/* 

    HOLMES MILLET DEV - LIVE

 */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

/* Sections€
     ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
    font-family: sans-serif;
    overflow-x:hidden ;
    font-family: "apparat",sans-serif;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
     ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Text-level semantics
     ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
    letter-spacing: 1px;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
648b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
     ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
    border-style: none;
}

/* Forms
     ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *      `fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Interactive
     ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Misc
     ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}




/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

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

figure {
    margin: 1em 0;
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}
/*------------------------------------------
# HEADER
------------------------------------------*/

/* ===============
    HMI MENU
================ */

/* MENU CONTENTS */

/* top menu animation properties */
.menu-contents .top-menu-items .menu-logo img,
.menu-contents .top-menu-items .say-hola,
.menu-contents .top-menu-items .menu-announcement-wrap,
.menu-contents .top-menu-items .menu-contact-links a{
    opacity: 0;
}
.menu-contents.is-animated .top-menu-items .menu-logo img{
    -webkit-animation: fadeInBottom 0.5s ease forwards;
    animation: fadeInBottom 0.5s ease forwards;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
.menu-contents.is-animated .top-menu-items .say-hola{
    -webkit-animation: fadeInTop 0.5s ease forwards;
    animation: fadeInTop 0.5s ease forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}
.menu-contents.is-animated .top-menu-items .menu-announcement-wrap{
    -webkit-animation: fadeInTop 0.5s ease forwards;
    animation: fadeInTop 0.5s ease forwards;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.menu-contents.is-animated .top-menu-items .menu-contact-links a{
    -webkit-animation: fadeInRight 0.5s ease forwards;
    animation: fadeInRight 0.5s ease forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}
.menu-contents.is-animated .top-menu-items .menu-contact-links a:nth-of-type(1) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.menu-contents.is-animated .top-menu-items .menu-contact-links a:nth-of-type(2) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.menu-contents.is-animated .top-menu-items .menu-contact-links a:nth-of-type(3) {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
/* end */

/* bottom menu animation properties */
.menu-contents .menu-social-links a,
.menu-contents .menu-slogan .slogan{
    opacity: 0;
}
.menu-contents.is-animated .menu-slogan .slogan{
    -webkit-animation: fadeInTop 0.5s ease forwards;
    animation: fadeInTop 0.5s ease forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}
.menu-contents.is-animated .menu-social-links a{
    -webkit-animation: fadeInBottom 0.5s ease forwards;
    animation: fadeInBottom 0.5s ease forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}
.menu-contents.is-animated .menu-social-links a:nth-of-type(1) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.menu-contents.is-animated .menu-social-links a:nth-of-type(2) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.menu-contents.is-animated .menu-social-links a:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.menu-contents.is-animated .menu-social-links a:nth-of-type(4) {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.menu-contents.is-animated .menu-slogan .slogan{
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}
/* end */

/* mid menu animation properties */
.menu-contents .navigation nav ol li{
    opacity: 0;
}
.menu-contents.is-animated .navigation nav ol li{
    -webkit-animation: fadeInRight 0.5s ease forwards;
    animation: fadeInRight 0.5s ease forwards;
    -webkit-animation-delay: 0.35s;
    animation-delay: 0.35s;
}
.menu-contents.is-animated .navigation nav ol li:nth-of-type(1) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.menu-contents.is-animated .navigation nav ol li:nth-of-type(2) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.menu-contents.is-animated .navigation nav ol li:nth-of-type(3) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.menu-contents.is-animated .navigation nav ol li:nth-of-type(4) {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
/* end */

/* animation styles */
@-webkit-keyframes fadeInBottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
           -moz-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
             -o-transform: translateY(-100%);
                transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
            -ms-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@keyframes fadeInBottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
           -moz-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
             -o-transform: translateY(-100%);
                transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
            -ms-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-webkit-keyframes fadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
           -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
             -o-transform: translateY(100%);
                transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
            -ms-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@keyframes fadeInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
           -moz-transform: translateY(100%);
            -ms-transform: translateY(100%);
             -o-transform: translateY(100%);
                transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
           -moz-transform: translateY(0%);
            -ms-transform: translateY(0%);
             -o-transform: translateY(0%);
                transform: translateY(0%);
    }
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
           -moz-transform: translateX(100%);
            -ms-transform: translateX(100%);
             -o-transform: translateX(100%);
                transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
           -moz-transform: translateX(0%);
            -ms-transform: translateX(0%);
             -o-transform: translateX(0%);
                transform: translateX(0%);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
           -moz-transform: translateX(100%);
            -ms-transform: translateX(100%);
             -o-transform: translateX(100%);
                transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0%);
           -moz-transform: translateX(0%);
            -ms-transform: translateX(0%);
             -o-transform: translateX(0%);
                transform: translateX(0%);
    }
}
/* end animation styles */

.sub-menu a{
    font-size: 18px;
    font-weight: 400;
}
.sub-menu{
    display: grid;
    grid-template-columns: 1fr 1fr;
    line-height: 2.5rem;
    margin-bottom: 1rem;
    column-gap: 2rem;
}
.menu-logo img{
    margin: 1rem;
    border-radius: 5px;
    width: 54px;
    padding: 0px 3px 13px 12px;
    background: #ffffff;
}

.menu-social-links{
    display: flex;
    column-gap: 2rem;
    padding: 2rem;
}
.menu-social-links a{
    color: #A67CA3;
    text-decoration: none;
    font-size: 14px;
    width: max-content;
}
.menu-contact-links{
    display: grid;
    justify-content: center;
    grid-auto-flow: column;
    column-gap: 3rem;
}
.menu-contact-links a{
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
}
.say-hola p{
    margin: 0px;
    color: #A67CA3;
    font-size:14px;
}
.menu-slogan{
    display: grid;
    justify-content: flex-end;
    padding: 2rem;
    margin-right: 13rem;
}
.bottom-menu-items{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
}
.navigation{
    display: grid;
    grid-template-columns: 1fr;
}
.top-menu-items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-self: flex-start;
    align-items: center;
}
.menu.active.back{
    color: #ffffff;
    background: #1F1F1F;
    border: 3px solid #1F1F1F;
    box-shadow: 3px 10px 17px rgb(31 31 31 / 48%);
}
.menu.active{
    color: #ffffff;
    background: rgba(255,255,255,0.0);
    border: none;
}
.menu.active.back .bar{
    background: #ffffff;
}
.menu.active .bar{
    background: #ffffff;
}
.menu-contents.show-menu{
        -webkit-animation: slideMenuIn 0.3s ease-out forwards;
          animation: slideMenuIn 0.3s ease-out forwards;
}
.menu-contents.close-menu {
  left:0%;
  -webkit-animation: slideMenuBack 0.3s 0.05s ease-out forwards;
          animation: slideMenuBack 0.3s 0.05s ease-out forwards;
}
.menu-contents{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70px 1fr 70px;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    background:#1F1F1F;
    position:fixed;
    top:0;
    left:100%;
    z-index: 2;
    -webkit-transition: all .3s ease;
         -moz-transition: all .3s ease;
            -ms-transition: all .3s ease;
             -o-transition: all .3s ease;
                    transition: all .3s ease;
}
/* Slide menu back */
@-webkit-keyframes slideMenuBack {
  to {
    left:100%;
  }
}
@keyframes slideMenuBack {
  to {
    left:100%;
  }
}
/* Slide menu in */
@-webkit-keyframes slideMenuIn {
  to {
    left:0%;
  }
}
@keyframes slideMenuIn {
  to {
    left:0%;
  }
}

/* MENU ICON */
.top-bar{
    display: grid;
    align-self: flex-end;
    margin-right:auto;
    margin-left:4px;
}
.bottom-bar{
    display: grid;
    align-self: flex-start;
    margin-right:4px;
    margin-left:auto;
}
.menu:hover .bar{
    width:80%;
}
.menu .bar{
    background: #ffffff;
    height: 3px;
    border-radius: 10px;
    width: 45%;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.menu-labels span{
    display:block;
}
.menu-labels{
    overflow:hidden;
    height:16px;
    width:100%;
    margin:0px;
    display:grid;
    font-size:13px;
    font-weight:bold;
    text-align:center;
    line-height:normal;
    align-self:center;
}
.menu {
    z-index: 3;
    overflow: hidden;
    padding: 5px;
    cursor: pointer;
    display: grid;
    align-self: center;
    justify-self: flex-end;
    margin-right: 10px;
    height: 60px;
    width: 60px;
    border: 3px solid #1F1F1F;
    box-shadow: 3px 7px 18px rgb(0 0 0 / 20%);
    background: #1F1F1F;
    color: #ffffff;
    border-radius: 100%;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.navigation nav ol{
    list-style-type: none;
    counter-reset: li;
    padding: 0px;
}
.navigation nav ol li .sub-menu a:hover,
.navigation nav ol li:hover::before,
.navigation nav ol li:hover > a{
    color: #CC3CFF;
}
.navigation nav ol li{
    position: relative;
    width: max-content;
}
.navigation nav ol li::before{
    counter-increment: li;
    content: counter(li, decimal-leading-zero)".";
    color: #93358D;
    font-size: 14px;
    font-weight: 600;
    position: absolute;
    left: -30px;
    top: -17px;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.navigation a{
    color: #ffffff;
    text-decoration: none;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.navigation nav{
    display: grid;
}
.navigation{
    font-size: 4rem;
    font-weight: 800;
    line-height: 5rem;
    text-transform: uppercase;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 2fr;
    justify-self: center;
}
/* .menu-section{
    display:grid;
    justify-content:flex-end;
    align-items:flex-start;
    height:100vh;
    width:100%;
    position:relative;
    overflow:hidden;
} */
/* NOTE: Always place initial animation code first then returning animation after or else it won't work */

/*Move close label to the top*/
.menu.active .menu-labels {
    font-size:13px;
    -webkit-animation: moveMenuLabel 0.3s ease-out forwards;
          animation: moveMenuLabel 0.3s ease-out forwards;
}
.menu.back .menu-labels {
  transform: translateY(-70%);
    font-size: 13px;
  -webkit-animation: slideLabelBack 0.3s 0.05s ease-out forwards;
          animation: slideLabelBack 0.3s 0.05s ease-out forwards;
}

/*rotate bottom bar on click*/
.menu.active .bottom-bar {
  -webkit-animation: rotateBottomBar 0.3s ease-out forwards;
          animation: rotateBottomBar 0.3s ease-out forwards;
}
/*rotate bottom bar back in place*/
.menu.back .bottom-bar {
  transform: rotate(-135deg) translate(3px, 3px);
  -webkit-animation: rotateBothBarsBack 0.3s ease-out forwards;
          animation: rotateBothBarsBack 0.3s ease-out forwards;
}


/*rotate top bar on click*/
.menu.active .top-bar {
  -webkit-animation: rotateTopBar 0.3s ease-out forwards;
          animation: rotateTopBar 0.3s ease-out forwards;
}
/*rotate top bar back in place*/
.menu.back .top-bar {
  transform: rotate(-225deg) translate(16px, -19px);
  -webkit-animation: rotateBothBarsBack 0.3s ease-out forwards;
          animation: rotateBothBarsBack 0.3s ease-out forwards;
}

/*hide menu label*/
.menu.active .menu-label{
  -webkit-animation: slideTop 0.3s 0.05s ease-out forwards;
          animation: slideTop 0.3s 0.05s ease-out forwards;
}
/*put back menu label*/
.menu.back .menu-label {
  transform: translateY(-100%);
  -webkit-animation: slideLabelBack 0.3s 0.05s ease-out forwards;
          animation: slideLabelBack 0.3s 0.05s ease-out forwards;
}
/*show close label*/
.menu.active .close-label{
  -webkit-animation: slideTop 0.3s 0.05s ease-out forwards;
          animation: slideTop 0.3s 0.05s ease-out forwards;
}
/*hide close label*/
.menu.back .close-label {
  transform: translateY(-100%);
  -webkit-animation: slideLabelBack 0.3s 0.05s ease-out forwards;
          animation: slideLabelBack 0.3s 0.05s ease-out forwards;
}



/*animation settings for moving menu label to the top*/
@-webkit-keyframes moveMenuLabel {
  to {
    transform: translateY(-70%);
        font-size:13px;
  }
}
@keyframes moveMenuLabel {
  to {
    transform: translateY(-70%);
        font-size:13px;
  }
}

/*animation settings for labels*/
@-webkit-keyframes slideTop {
  to {
    transform: translateY(-120%);
    font-size: 10px;
  }
}
@keyframes slideTop {
  to {
    transform: translateY(-120%);
    font-size: 10px;
  }
}
/*rotate bottom bar*/
@-webkit-keyframes rotateBottomBar {
  to {
    transform: rotate(-135deg) translate(3px, 3px);
    width:80%;
  }
}
@keyframes rotateBottomBar {
  to {
    transform: rotate(-135deg) translate(3px, 3px);
    width:80%;
  }
}

/*rotate top bar*/
@-webkit-keyframes rotateTopBar {
  to {
    transform: rotate(-225deg) translate(16px, -19px);
    width:80%;
  }
}
@keyframes rotateTopBar {
  to {
    transform: rotate(-225deg) translate(16px, -19px);
    width:80%;
  }
}
/*rotate both bars back in place*/
@-webkit-keyframes rotateBothBarsBack {
  to {
    transform: rotate(0deg);
  }
}
@keyframes rotateBothBarsBack {
  to {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes slideLabelBack {
  to {
    transform: translateY(0);
    font-size: 13px;
  }
}
@keyframes slideLabelBack {
  to {
    transform: translateY(0);
    font-size: 13px;
  }
}


/* END HMI MENU */


/* PROCESS LABEL */
.process a{
    display: grid;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 50px;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    background-color: #373a36;
}   
.process-bar-wrap{
    display: grid;
    grid-template-columns: 280px 1fr 1fr 1fr 1fr;
    column-gap: 2rem;
    justify-content: center;
}
.process-bar{
    display: grid;
    background: #373a36;
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 830px);
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0rem 1rem;
    box-shadow: 3px 7px 18px rgb(0 0 0 / 20%);
    opacity: 0;
    visibility: hidden;
}
.process-bar-header{
    overflow: hidden;
    position: relative;
    display: grid;
    justify-content: flex-start;
    align-items: center;
}
.process-title{
    color: #ffffff;
    font-size: 12px;
    margin: 0px;
    letter-spacing: 15px;
    font-weight: 400;
    text-align: center;
    margin: 0px 0px 0px 12px;
    line-height: normal;
}

/* LOGO MASK HOVER */
header .logo img{
    height: auto;
    width: auto;
    max-width: none;
}
header .logo{
    display: grid;
    align-items: center;
    max-width: 440px;
    height: 100%;
    background: #ffffff;
    z-index: 1;
    padding: 5px 15px 8px 15px;
    box-shadow: 3px 7px 18px rgb(0 0 0 / 20%);
}
.no-blend{
    mix-blend-mode: normal !important;
}
/* .reversify{
 mix-blend-mode: difference;
} */
header .main-header{
    display: grid;
    align-items: center;
    grid-template-columns: 430px 1fr 1fr;
    padding: 1rem;
}
#header.hide{
    top: -62px;
}
header{
    width: 100%;
    height: 0px;
    top: 0;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    z-index: 222222;
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
}
/* MOVED LINK */
@media (max-width: 767px) {
    .menu-contents .menu-announcement-wrap{
        display: grid;
        justify-content: flex-end;
    }
    #menu-move-button{
        display: inline-block !important;
        margin-right: 30px;
    }
    .move-announcement-btn{
        display: none;
    }
}
.move-announcement-btn.hire-btn{
    right: 290px;
    color: #ecc8ff !important;
}
.move-announcement-btn.menu-move-button,
.move-announcement-btn.menu-move-button.hire-btn{
    position: relative;
    right: unset;
    top: unset;
    display: inline-block;
}
.move-announcement-btn {
    text-decoration: none;
    padding: 10px 15px;
    position: absolute;
    right: 120px;
    top: 27px;
    text-transform: uppercase;
    color: #f8b030 !important;
    font-weight: 600;
    font-family: 'Apparat Bold',Helvetica,Arial,Lucida,sans-serif;
}
svg.arrow-loop {
  width: 15px;
  position: absolute;
  right: 0px;
  top: 15px;
  transform: scaleX(-1);
}

svg.arrow-loop .draw-arrow {
  stroke-width: 8;
  stroke: #f8b030;
  fill: none;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: draw;
  animation-iteration-count: infinite;
}
svg.arrow-loop .draw-arrow-end {
  stroke-width: 8;
  stroke: #f8b030;
  fill: none;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-name: draw;
  animation-iteration-count: infinite;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
/* CAREERS/JOB POST BANNER */
.job-post{
    background: #ffffff;
    padding: 4rem 0rem;
}
.job-post-wrap{
     display: grid;
     grid-template-columns: minmax(auto, 1080px);
     justify-content: center;
}
.job-post-title{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1rem;
    max-width: 90%;
}
.job-post-title h3{
    font-size: 3.5rem;
    color: #85007c!important;
    line-height: 4rem;
}
.job-post-listing h4{
    font-size: 1.3rem;
    color: #555555!important;
    line-height: 1.5rem;
}
.job-post-listing p{
    color: #6b6b6b!important;
    line-height: 1.5rem;
}
.job-post-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content: center;
    column-gap: 3rem;
}
.job-post-copy a{
    text-decoration: none;
}
.job-post-copy h3{
    font-size: 2.5rem;
    font-family: "apparat",sans-serif;
    font-weight: normal;
    line-height: normal;
    text-align: left;
}
.job-post-copy{
    color: #ffffff;
    text-align: center;
    line-height: 1.5rem;
}

/* NEW OFFICE BANNER */
.new-office{
    background: #242624;
    padding: 4rem 0rem;
}
.new-office-wrap{
     display: grid;
     grid-template-columns: minmax(auto, 1280px);
     justify-content: center;
}
.new-office-container{
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    max-width: 90%;
    margin: 0 auto;
}
.new-office-copy a{
    text-decoration: none;
}
.new-office-copy h3{
    font-size: 2.5rem;
    font-family: "apparat",sans-serif;
    font-weight: normal;
    line-height: normal;
}
.new-office-copy{
    color: #ffffff;
    text-align: center;
    line-height: 1.5rem;
}
/*------------------------------------------
# FOOTER
------------------------------------------*/
.contact-info-left p{
    margin-bottom: 1rem;
    line-height: 26px;
}
footer p{
    font-family: apparat-semicond, sans-serif;
}
.hm-socials{
    margin-top: 4rem;
    display: flex;
    column-gap: 1rem;
}
.hm-socials a{
    color: #b5b1bc;
    text-decoration: none;
}
.hm-tel a{
    text-decoration: none;
    color: #f8b030;
}
.hm-mail a{
    text-decoration: none;
    color: #ffffff;
}
.footer-column.contact-info-right {
    margin-top: 3rem;
}
footer .division-listing{
    display: grid;
    max-width: 360px;
    grid-template-columns: 118px 20px 1fr;
    row-gap: 1px;
    column-gap: 7px;
}
footer .division-label{
    text-align: right;
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: bold;
}
footer .division-icon{
    display: grid;
    justify-content: center;
    align-items: center;
}
footer .division-url{
    text-align: left;
    color: #9f4a99;
}
.contact-info-center{
    background-image: url('https://holmesmillet.dev/media/lines.svg');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}
.footer-links{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 80px));
    gap: 1rem;
    justify-content: flex-end;
}
.contact-info-right a{
    color: #ffffff;
    text-decoration: none;
}
.bottom-footer-info .footer-column-2 a{
    color: #9174A4;
    text-decoration: none;
}
.bottom-footer-info .footer-column-2{
    padding: 0rem 3rem;
    color: #666468;
}
.bottom-footer-info{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    margin-bottom: 3rem;
}
.contact-info-center{
    text-align: center;
    display: grid;
    justify-content: center;
    align-self: center;
}
.footer-column{
    padding: 3rem;
}
.footer-info{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
}
.footer-logo{
    max-width: 300px;
    margin-bottom: 1.5rem;
}
footer .slogan{
    margin-bottom: 3rem;
}
footer .hm-divisions{
    display: grid;
    gap: 0.5rem;
    justify-content: flex-end;
}
footer{
    background: #363a36;
    background-image: url('https://holmesmillet.dev/media/hm-pattern-horizontal.svg'), url('https://holmesmillet.dev/media/hm-square.svg');
    background-repeat: repeat-x, no-repeat;
    background-size: auto 35px, 80px auto;
    background-position: 0% 100%, 100% 0px;
    color: #ffffff;
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 1280px);
    justify-content: center;
    padding-top: 2rem;
}
.scroll{
    width: auto;
    height: 0px;
    display: grid;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    bottom: 30%;
    z-index: 22222222;
    padding: 20px;
}
/*------------------------------------------
# GLOBALS
------------------------------------------*/

.slogan{ 
    letter-spacing: 6px;
    font-size: 1.4rem;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
}
.scroll-lock{
    overflow: hidden;
    touch-action: none;
}
.magenta{
    color: #e00843;
}
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.big-text{
    font-size: 7vw;
    line-height: 6.5vw;
    font-weight: 900;
    text-transform: uppercase;
}
.dim{
    opacity: 0.3;
    -webkit-transition: all .25s ease-in-out;
       -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
         -o-transition: all .25s ease-in-out;
            transition: all .25s ease-in-out;
}
.text-btn:hover .dim{
    opacity: 1;
}
.align-bottom-center{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.align-bottom-right{
    position: absolute;
    bottom: 0;
    right: 0;
}
.align-bottom-left{
    position: absolute;
    bottom: 0;
    left: 0;
}
.text-btn{
    padding: 20px;
    text-transform: uppercase;
    z-index: 1;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 100;
    max-width: 360px;
    -webkit-transition: all .25s ease-in-out;
       -moz-transition: all .25s ease-in-out;
        -ms-transition: all .25s ease-in-out;
         -o-transition: all .25s ease-in-out;
            transition: all .25s ease-in-out;
}
.keep-scrolling span::before{
    position: absolute;
    bottom: 100%;
    content: attr(data-hover);
    color: #fff;
  font-size: 16px;
  letter-spacing: 15px;
  font-weight: bold;
  opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.keep-scrolling {
    overflow: hidden;
    width: auto;
    height: auto;
    display: block;
    position: fixed;
    z-index: 1111;
    bottom: 8rem;
    left: -2rem;
    mix-blend-mode: difference;
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
}

.keep-scrolling span {
  color: #fff;
  font-size: 16px;
  letter-spacing: 15px;
  font-weight: bold;
  opacity: 1;
  z-index: 9;
  display: block;
}
.nav-link-active{
    font-weight: bold;
    color: red;
}
.spacer::before{
    content: "SPACER";
    display: grid;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
}
.spacer{
    height: 100vh;
    width: 100%;
    background: #0084a5;
    position: relative;
    display: block;
    clear: both;
    z-index: 111;
    border: 1px solid black;
}
.is-hidden{
    display: none;
}


/*------------------------------------------
# ABOUT PAGE
------------------------------------------*/
.button-label{
    z-index: 2;
    text-transform: uppercase;
}
.section-button-link .button-bar {
    height: calc(100% - 5px);
    width: calc(100% - 54px);
    position: absolute;
    bottom: -5px;
    left: -10px;
    z-index: 0;
}
.section-button-link .button-arrow span{
    display: inline-block;
    height: 9px;
    width: 9px;
    background: transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0px;
    margin: auto;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
.section-button-link .button-arrow{
    width: 50px;
    height: 1px;
    display: inline-block;
    margin-left: 10px;
    position: relative;
}
.section-button-link{
    display: inline-flex;
    align-items: center;
    position: relative;
    text-decoration: none;
}
.section-button-wrap {
    display: inline-flex;
}
.section-button{
    display: grid;
    grid-template-columns: minmax(auto, 1000px);
    justify-content: center;
    padding: 4rem 0rem;
}
.section-heading{
    display: grid;
    grid-template-columns: minmax(auto, 1000px);
    justify-content: center;
    padding: 4rem 0rem;
}
.about-page .process-subheading{
    max-width: 730px;
}

/*------------------------------------------
# CONTACT PAGE
------------------------------------------*/
.contact-us-page .contact{
        background-image: url('https://holmesmillet.dev/media/hm-pattern-horizontal.svg');
    background-repeat: repeat-x;
    background-size: auto 35px;
    background-position: 0% calc(100% - 6rem);
}
.contact-follow p{
    display: flex;
    gap: 1rem;
}
.division-listing .division-icon img{
    width: 16px;
    height: auto;
}
.division-url{
    color: #9f4a99;
}
.hm-divisions{
    display: flex;
    gap: 3rem;
}
.division-listing{
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    gap: 11px;
}
.contact-quick-links a{
    text-decoration: none;
    font-size: 2rem;
    text-transform: uppercase;
    color: #ef4579;
}
.contact-form .field label{
    color: #b9b9b9;
    margin-bottom: 3px;
    display: block;
}
.contact-us-page .site-footer{
    display: none;
}
.contact-form input,.contact-form textarea{
    background: transparent;
    border: 1px solid #b9b9b9;
    font-weight: normal;
    color: #b9b9b9;
    padding: 1rem;
    width: 100%;
}
.field.message{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
}
.field.submit-btn{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
}
#thanks{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    color: green;
}
.contact-form{
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 1rem;
}
.contact-info p, .contact-office a, .contact-follow a{
    color: #b9b9b9;
    text-decoration: none;
    line-height: normal;
}
.contact-info label{
    color: #9f4a99;
    font-weight: bold;
    display: block;
    margin-bottom: 2rem;
}
.contact-espanol{
    text-align: left;
    color: #ffffff;
    font-size: 1rem;
    margin: 0 1rem 0 0;
}
.contact-title{
    font-size: 6rem;
    font-weight: 900;
    line-height: 6rem;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    color: #F8B030;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #F8B030;
}
.standalone-contact-footer p{
    font-size: 14px;
    margin: 0;
    color: #898989;
    letter-spacing: 1px;
}
.standalone-contact-footer{
    display: grid;
    gap: 1rem;
    position: absolute;
    bottom: 0;
    padding: 1rem;
}
.contact-quick-links{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 2rem;
}
.contact-info{
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 1rem;
}
.contact-header{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
.contact-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1280px;
    justify-self: center;
    width: 100%;
    padding: 2rem;
    row-gap: 2rem;
}

.grecaptcha-badge { 
    visibility: hidden; 
}
.contact-form{
    max-width: 100%;
    display: grid;
    justify-self: center;
    width: 100%;
}
.contact{
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: relative;
    grid-template-columns: 1fr;
    background:#363a36;
}

/*------------------------------------------
# PORTFOLIO PAGE
------------------------------------------*/
.portfolio-thumb{
    object-fit: cover;
    object-position: center center;
    height: 102%;
    width: 100%;
}
.portfolio-page .process-subheading{
    max-width: 100%;
}
.process-header.portfolio-header{
    background-image: url('');
    padding: 8rem 0rem 3rem;
}
.portfolio-url{
    display: grid;
    position: relative;
    height: 100%;
    width: 100%;
}
.portfolio-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* gap: 0.5rem; */
}
.portfolio{
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}


/*------------------------------------------
# PROCESS PAGES
------------------------------------------*/
/* QUARTER BLOCK */
.qb-link{
    text-decoration: none;
}
.qb-header{
    font-size: 7vw;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    font-weight: 900;
    text-transform: uppercase;
}
.qb{
    display: grid;
    justify-content: flex-start;
    align-items: flex-start;
    background-repeat: no-repeat;
    padding: 3rem;
}
.qb-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 50vh;

}
/* SERVICE LISTINGS */
.service-image img,.service-image .lottie{
    width:340px;
    height:auto;
    margin:0 auto;
}
.reverse-column{
    background: #f9f9f9;
}
.reverse-column .service-wrap .service-info{
    order: 2;
}
.reverse-column .service-wrap .service-image{
    order: 1;
}
.service-wrap .service-info{
    max-width: 540px;
}
.service-title{
    color: #9071E9;
    font-size: 2rem;
    line-height: normal;
    margin-bottom: 2rem;
}
.service-description{
    max-width: 450px;
    line-height: 30px;
    color: #9f9f9f;
    font-size: 18px;
}
.service-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    align-items: center;
}
.service-listing{
    display: grid;
    grid-template-columns: minmax(auto, 1000px);
    justify-content: center;
    padding: 4rem 3rem;
}

/* PROCESS HEADER */
.process-label{
    position: absolute;
    bottom: 0;
    margin: 0;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    font-size: 12rem;
    font-weight: 900;
    line-height: 8.5rem;
    text-transform: uppercase;
}
.process-subheading{
    font-weight: 100;
    font-size: 2rem;
    line-height: normal;
    max-width: 560px;
}
.process-heading .dash{
    content: "";
    height: 1px;
    width: 100px;
    display: inherit;
    vertical-align: middle;
    margin-left: 10px;
}
.process-heading{
    position: relative;
    font-size: 1.2rem;
    font-weight: 900;
    max-width: 560px;
    display: inline-block;
}
.process-header{
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: minmax(auto, 90%);
    justify-content: center;
    padding: 11rem 0rem 16rem 0rem;
    position: relative;
}


/*------------------------------------------
# MAIN
------------------------------------------*/
/*
# HOME PAGE
-----------------------*/
section{
    overflow: hidden;
}
/* CONTACT ANIMATION SECTION */
.contact-cta-links a:hover{
    color: #d7045a;
}
.contact-cta-heading .outline-text2{
    color: #3c0095;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #3c0095;
}
.contact-cta-links{
    text-align: left;
    display: grid;
    row-gap: 1rem;
}
.contact-cta-links a span:hover{
    color: #e00843;
}
.contact-cta-links a span{
    color: #3c0095;
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
}
.contact-cta-links a{
    font-weight: 200;
    font-size: 3rem;
    text-transform: uppercase;
    text-decoration: none;
}
.contact-cta-heading{
    font-size: 6rem;
    line-height: 6rem  ;
    font-weight: 900;
    margin: 0 0 0 0;
    position: relative;
    text-transform: uppercase;
    color: #3c0095;
    justify-items: center;
    align-items: center;
    z-index: 0;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transform: translateY(200px);
       -moz-transform: translateY(200px);
        -ms-transform: translateY(200px);
         -o-transform: translateY(200px);
            transform: translateY(200px);
}
.contact-cta-wrapper{
    background-image: url('https://holmesmillet.dev/media/contact-cta-bg-2.webp');
    background-size: cover;
    background-position: center;
    opacity: 0;
}
.contact-cta{
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 11;
    overflow: hidden;
    background: #cccccc;
}
.contact-container{
    display: grid;
    grid-template-columns: 4fr 1fr;
    align-items: flex-start;
    column-gap: 2rem;
    max-width: 1300px;
}
.contact-cta-wrapper{
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 5rem;
}

/* DEPLOYMENT ANIMATION SECTION */

.rockets.rocket-5{
    position: relative;
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
}
.deployment-rocket-btn{
    display: block;
    position: absolute;
    top: 16%;

    right: 5%;
}
.deployment-path{
    fill: #222222;
    stroke: #222222;
    stroke-width: 8px;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.deployment-btn img{
    position: relative;
    width: 80px;
    display: flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
    -webkit-animation: hover 1s infinite ease-in;
    animation: hover 1s infinite ease-in;
}
.deployment-btn{
    transform-style: preserve-3d;
    position: absolute;
    text-align: center;
    bottom: 40%;
    left: 44%;
    margin: auto;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.deployment-circle text {
    fill: #ffffff;
    font-family: 'apparat', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    letter-spacing: 4px;
    word-spacing: 5rem;
    text-transform: uppercase;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.deployment-circle {
    position: absolute;
    width: 120px;
    height: 120px;
    max-height: 75vh;
    max-width: 75vw;
    overflow: visible;
    transform-origin: center center;
    stroke-opacity: 0.5;
}
.rocket-4{
    position: absolute;
    top: -13rem;
    right: -31rem;
}
.deployment-copy-wrap{
    position: absolute;
    left: 50%;
    z-index: 1;
}
.deployment-text{
    display: flex;
    justify-content: center;
    align-items: center;
}
.deployment-copy{
    color: #ffffff;
    font-weight: 100;
    font-size: 2rem;
    position: relative;
    text-align: left;
    max-width: 400px;
    font-size: 2rem;
    line-height: normal;
}
.deployment-heading-wrap{
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0%;
    left: 0%;
}
.deployment-heading-wrap img{
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}
.deployment-header{
    font-size: 12rem;
    font-weight: 900;
    margin: 0 0 0 0;
    justify-items: center;
    z-index: 0;
    align-items: center;
    height: 100%;
    left: -97%;
    top: 57%;
    line-height: normal;
    position: relative;
}
.rockets{
    position: absolute;
}
.deployment-pin{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background: #ff6d00;
    /* background-size: cover;
    background-image: url('https://holmesmillet.dev/media/deployment-bg.jpg'); */
}

/* DEVELOPMENT ANIMATION SECTION */
.development-path{
    fill: #05c403;
    stroke: #05c403;
    stroke-width: 8px;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.development-btn img{
    position: relative;
    width: 60px;
    display: flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
    -webkit-animation: hover 1s infinite ease-in;
    animation: hover 1s infinite ease-in;
}
.development-btn{
    transform-style: preserve-3d;
    position: absolute;
    text-align: center;
    margin-top: 3rem;
    bottom: 10%;
    right: 10%;
    margin: auto;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transform: translateZ(0px);
       -moz-transform: translateZ(0px);
        -ms-transform: translateZ(0px);
         -o-transform: translateZ(0px);
            transform: translateZ(0px);
}
.development-circle text {
    fill: #ffffff;
    font-family: 'apparat', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    letter-spacing: 4px;
    word-spacing: 5rem;
    text-transform: uppercase;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.development-circle {
    position: absolute;
    width: 120px;
    height: 120px;
    max-height: 75vh;
    max-width: 75vw;
    overflow: visible;
    transform-origin: center center;
    stroke-opacity: 0.5;
}
.command-prompt{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.cp-buttons {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 1px solid #000;
    position: relative;
    top: 6px;
    left: 6px;
    background-color: #ff3b47;
    border-color: #9d252b;
    display: inline-block;
}

.cp-minimize {
    left: 11px;
    background-color: #ffc100;
    border-color: #9d802c;
}

.cp-zoom {
  left: 16px;
  background-color: #00d742;
  border-color: #049931;
}

.cp-menu {
  width: 620px;
  box-sizing: border-box;
  height: 25px;
  background-color: #bbb;
  margin: 0 auto;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.cp-screen {
  background-color: #000000;
  box-sizing: border-box;
  width:620px;
  height: 250px;
  margin: 0 auto;
  padding: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#cp-strings p {
  position: relative;
  text-align: left;
  font-size: 1.25em;
  font-family: monospace, consolas, "Andale Mono", "DejaVu Sans Mono",monaco;
  white-space: normal;
  color:#05c403;
  padding-top: 0px;
}
#cp-type{
  font-family: monospace, consolas, "Andale Mono", "DejaVu Sans Mono",monaco;
  color:#05c403;
  font-size:1.5rem;
  line-height:normal;
}
.development-header .outline-text2{
    color: #05c403;
    -webkit-text-stroke-color: #05c403;
}
.development-header{
    font-size: 13vw;
    font-weight: 900;
    margin: 4% 0 0 0;
    justify-self: center;
    width: 100%;
    z-index: 0;
    align-items: center;
    text-align: center;
    display: grid;
    height: 100%;
    top: 0;
    line-height: normal;
    position: absolute;
}
.bracket-element{
    position: absolute;
    top: 0;
    left: 0;
}
.left-bracket{
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.forward-slash{
    -webkit-transform: translateZ(20px);
       -moz-transform: translateZ(20px);
        -ms-transform: translateZ(20px);
         -o-transform: translateZ(20px);
            transform: translateZ(20px);
}
.right-bracket{
    -webkit-transform: translateZ(0px);
       -moz-transform: translateZ(0px);
        -ms-transform: translateZ(0px);
         -o-transform: translateZ(0px);
            transform: translateZ(0px);
}
.development-bracket{
    transform-style: preserve-3d;
    width: 600px;
    height: auto;
    position: absolute;
    z-index: 1;
    top: 10%;
    left: 0;
    right: 0;
    margin: auto;
}
.development-text{
    color: #ffffff;
}
.development-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    height: 100%;
    z-index: 0;
}
.development-bg-red{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    opacity: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background: rgb(215,63,63);
    background: -moz-radial-gradient(circle, rgba(215,63,63,1) 0%, rgba(116,1,1,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(215,63,63,1) 0%, rgba(116,1,1,1) 100%);
    background: radial-gradient(circle, rgba(215,63,63,1) 0%, rgba(116,1,1,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d73f3f",endColorstr="#740101",GradientType=1);
}
.development-bg-black{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background: rgb(60,60,60);
    background: -moz-radial-gradient(circle, rgba(60,60,60,1) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(60,60,60,1) 0%, rgba(0,0,0,1) 100%);
    background: radial-gradient(circle, rgba(60,60,60,1) 0%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c3c3c",endColorstr="#000000",GradientType=1);
}
.development-pin{
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 3;
    background: #1f1b66;
    /* background-size: cover;
    background-image: url('https://holmesmillet.dev/media/code-bg.jpg'); */
}


/* DESIGN ANIMATION SECTION */
.design-path{
    fill: #f2f1ff;
    stroke: #f2f1ff;
    stroke-width: 8px;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.design-btn img{
    position: relative;
    width: 60px;
    display: flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
    -webkit-animation: hover 1s infinite ease-in;
    animation: hover 1s infinite ease-in;
}
.design-btn{
    transform-style: preserve-3d;
    position: absolute;
    text-align: center;
    bottom: 10rem;
    right: 14rem;
    margin: auto;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transform: translateZ(0px);
       -moz-transform: translateZ(0px);
        -ms-transform: translateZ(0px);
         -o-transform: translateZ(0px);
            transform: translateZ(0px);
}
.design-circle text {
    fill: #ffffff;
    font-family: 'apparat', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    letter-spacing: 4px;
    word-spacing: 5rem;
    text-transform: uppercase;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.design-circle {
    position: absolute;
    width: 120px;
    height: 120px;
    max-height: 75vh;
    max-width: 75vw;
    overflow: visible;
    transform-origin: center center;
    stroke-opacity: 0.5;
}
.design-text{
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    margin-top: -30%;
}
.design-title{
    font-size: 15vw;
    font-weight: 900;
    margin: 0;
    justify-items: center;
    z-index: 1111;
    align-items: center;
    left: 0;
    top: 0;
    line-height: normal;
}
.design-paragraph{
    padding-top: 0px;
    color: #ffffff;
    font-size: 2rem;
    display: flex;
    justify-content: flex-start;
    position: absolute;
    max-width: 580px;
    line-height: normal;
    left: 7rem;
    bottom: 4rem;
    font-weight: 100;
}
#paint-drops{
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.design-images{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}
.design-pin{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.design{
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 11;
}

/* BINOCULARS ANIMATION SECTION */
.binoculars-section{
    /* background-image: url('https://holmesmillet.dev/media/discovery-bg.jpg');
    background-size: cover; */
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 111;
    background: #f5d701;
    overflow: hidden;
}
.binoculars-path{
    fill: rgb(245 215 1 / 100%);
    stroke: #f5d701;
    stroke-width: 8px;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.binoculars-btn img{
    position: relative;
    width: 60px;
    display: flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
    -webkit-animation: hover 1s infinite ease-in;
          animation: hover 1s infinite ease-in;
}
.binoculars-btn{
    transform-style: preserve-3d;
    text-align: center;
    margin-top: 3rem !important;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.binoculars-circle text {
    fill: #ffffff;
    font-family: 'apparat', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    letter-spacing: 4px;
    word-spacing: 5rem;
    text-transform: uppercase;
    -webkit-transform: translateZ(40px);
       -moz-transform: translateZ(40px);
        -ms-transform: translateZ(40px);
         -o-transform: translateZ(40px);
            transform: translateZ(40px);
}
.binoculars-circle {
    position: absolute;
    width: 120px;
    height: 120px;
    max-height: 75vh;
    max-width: 75vw;
    overflow: visible;
    transform-origin: center center;
    stroke-opacity: 0.5;
}
.binoculars-title{
    font-size: 13vw;
    font-weight: 900;
    margin: 0px;
    line-height: normal;
}
.binoculars-paragraph{
    padding: 0px;
    font-size: 2rem;
    width: 720px;
    margin-top: 7rem;
    font-weight: 100;
    text-align: center;
    line-height: normal;
}
.binoculars-copy{
    position: absolute;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    flex-flow: column;
    color: #ffffff;
    z-index: 2;
    margin-top: 3%;
}
.binoculars-text{
    font-size: 15vw;
    font-weight: 900;
}
.binoculars-text-wrap{
    text-align: center;
    position: absolute;
    margin: 0;
    width: 100%;
    top: 45%;
    z-index: 0;
    height: 100%;
}
.binoculars{
    transform-origin: 14% 50%;
    width: 90%;
    z-index: 2;
}
.binoculars-wrap{
    height: 100vh;
    position: relative;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}



/* SHOES ANIMATION SECTION */
.shoes-text-wrap .text-column strong{
    color: #f6dc2b;
}
.shoes-text-wrap .text-column p{
    padding-top: 0px;
    max-width: 560px;
    margin: 0px;
    font-size: 2rem;
    line-height: normal;
}
.shoes-text-wrap h3 span{
    color: #ff982c;
    margin: 0px 3rem;
    display: block;
    line-height: 1rem;
    font-size: 3rem;
}
.shoes-text-wrap h3{
    margin: 0px;
    line-height: 6rem;
    font-size: 4.5rem;
}
.text-column{
    display: flex;
    flex-direction: column;
    flex-basis: 100% !important;
    flex: 1;
}
.shoes-text-wrap{
    color: #ffffff;
    text-align: left;
    position: absolute;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    width: 80%;
    top: 50%;
    font-size: 2vw;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 0;
    opacity: 0;
}
.shoes-wrapper{
    display: inline-flex;
    max-width: 90%;
    z-index: 1;
    pointer-events: none;
}
.shoes-pin{
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-flow: wrap;
}
.shoes{
    margin-top: 0rem;
    height: 100%;
    width: 100%;
    position: relative;
    background: gray;
    z-index: 123;
    overflow: hidden;
}
/* WOMAN ANIMATION SECTION */
.stock-woman-section {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.stock-woman p {
    font-size: 6vw;
    line-height: 6vw;
    color: #ffffff;
    padding: 0 20px;
    z-index: 2;
}
.stock-woman-1 p,
.stock-woman-3 p,
.stock-woman-5 p {
    text-align: left;
}
.stock-woman-2 p,
.stock-woman-4 p {
    right: 0;
    text-align: right;
}
.stock-woman-5 .stock-woman-copy{
    left: 6%;
}
.stock-woman-4 .stock-woman-copy{
    right: 6%;
    left: unset;
    max-width: 50%;
}
.stock-woman-2 .stock-woman-copy{
    max-width: 55%;
    right: 6%;
}
.stock-woman-copy{
    max-width: 50%;
    width: 100%;
    position: absolute;
}
.stock-woman-img{
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
}
.stock-woman-3 .stock-woman-copy{
    max-width: 50%;
    left: 6%;
    top: 15%;
}
.stock-woman {
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 1.5em;
    padding: 0;
    position: absolute;
    display: grid;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    top: 0;
    left: 0;
}
.stock-woman-1 .stock-woman-copy{
    max-width: 60%;
    left: 6%;
}
.stock-woman-1 {
  /* background-image: url('https://holmesmillet.dev/media/stock-woman-bg-1.jpg'); */
  background-repeat: no-repeat;
  background-color: #7500b1;
  z-index: 1;
}

.stock-woman-1-img {
  background-image: url('https://holmesmillet.dev/media/stock-woman-1.webp');
  background-position: center;
  background-size: cover;
  z-index: 3;
  left: 15%;
}

.stock-woman-2 {
  /* background-image: url('https://holmesmillet.dev/media/stock-woman-bg-2.jpg'); */
  background-repeat: no-repeat;
  background-color: #ffae00;
  z-index: 2;
}

.stock-woman-2-img {
  background-image: url('https://holmesmillet.dev/media/stock-woman-2v2.webp');
  background-position: 24%;
  z-index: 3;
}

.stock-woman-3 {
 /*  background-image: url('https://holmesmillet.dev/media/stock-woman-bg-3-v2.jpg'); */
  background-repeat: no-repeat;
  background-color: #25b5d5;
  z-index: 3;
}

.stock-woman-3-img {
  background-image: url('https://holmesmillet.dev/media/stock-woman-3.webp');
  background-position: top;
  z-index: 3;
}

.stock-woman-4 {
  /* background-image: url('https://holmesmillet.dev/media/stock-woman-bg-4-v2.jpg'); */
  background-repeat: no-repeat;
  background-color: #ff8100;
  z-index: 4;
}

.stock-woman-4-img {
  background-image: url('https://holmesmillet.dev/media/stock-woman-4.webp');
  background-position: 37%;
  z-index: 3;
}

.stock-woman-5 {
  /* background-image: url('https://holmesmillet.dev/media/stock-woman-bg-5.jpg'); */
  background-repeat: no-repeat;
  background-color: #bf0000;
  z-index: 5;
}

.stock-woman-5-img {
  background-image: url('https://holmesmillet.dev/media/stock-woman-5.webp');
  background-position: top;
  z-index: 3;
}

.down-arrow-container {
  position: relative;
}

#down-arrow {
  width: 130px;
  margin-top: 50px;
  border: 0;
  opacity: 0;
}

.startPin {
    overflow: hidden;
    height: 100vh;
    width: 100%;
    position: relative;
}

/* WATCH ANIMATION SECTION */
.the-watch{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #c7d1ff;
}
.the-watch-text{
    font-size: 4.5rem;
    line-height: 4rem;
    position: absolute;
    text-align: center;
    color: #94c5ef;
    font-weight: 900;
    mix-blend-mode: screen;
    -webkit-transform: translateY(-20px);
       -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
         -o-transform: translateY(-20px);
            transform: translateY(-20px);
}
.watch-text-container{
    position: absolute;
    display: grid;
    flex-flow: column;
    max-width: 95%;
    width: 100%;
    justify-self: center;
    align-self: center;
    left: 0;
    right: 0;
    margin: auto;
    padding-left: 5rem;
}
.watch-btn{
    color: #6d28df;
}
.watch-text{
    color: #004a99;
    width: auto;
    font-size: 6vw;
    line-height: 6vw;
    margin-bottom: 75px;
    margin-top: 0px;
}
.watch-device-wrap{
    -webkit-transform: translateX(20%);
       -moz-transform: translateX(20%);
        -ms-transform: translateX(20%);
         -o-transform: translateX(20%);
            transform: translateX(20%);
}
.watch-text-wrap{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}
.watch-device{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.earbud-1{
    width: 250px !important;
    height: auto;
    z-index: 0;
}
.earbud-2{
    width: 220px !important;
    height: auto;
    z-index: 1;
}
.watch-layer{
    width: 450px !important;
    height: auto;
    z-index: 1;
}
.watch-pin{
    height: 100vh;
    width: 100%;
    position: relative;
    display: grid;
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-columns: 40% 60%;
    background: #ffffff;
    /* background-size: cover;
    background-image: url('https://holmesmillet.dev/media/watch-bg.jpg'); */
}
.gadgets{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.watch{
    margin-top: 0rem;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 123;
}

/* MOBILE ANIMATION SECTION */
.mobile-btn.text-btn{
    margin-left: 4%;
    margin-bottom: 3%;
}
.mobile-btn{
    color: #ffffff;
}
.mobile-text-wrap .mobile-text{
    color: #ffffff;
    font-size: 7vw;
    line-height: 6.5vw;
    margin-bottom: 35%;
}
.mobile-text-wrap{
    position: absolute;
    height: 100%;
    width: 65%;
    top: 0rem;
    left: 6%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    z-index: 0;
}
.mobile{
    position: relative;
    overflow: hidden;
}
.screen-scroll{
    top: 0%;
    position: absolute;
}
.screen-scroll-wrap{
    z-index: -1;
    position: absolute;
    width: calc(100% - 110px);
    height: calc(100% - 30px);
    bottom: 0;
    left: -25px;
    right: 0;
    margin: auto;
    overflow: hidden;
    clip-path: polygon(18% 10%, 78% 2%, 90% 1%, 96% 2%, 100% 5%, 100% 100%, 0 100%, 0 20%, 3% 15%, 9% 12%);
}
.mobile-pin{
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.mobile{
    margin-top: 0rem;
    height: 100%;
    width: 100%;
    position: relative;
    background: #000000;
    z-index: 122;
}
.mobile-3{
    z-index: 3;
}
.mobile-2{
    z-index: 2;
}
.mobile-1{
    z-index: 1;
}
.mobile-0{
    z-index: 0;
}
.mobile-device-wrap{
    height: 560px;
    width: 670px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.mobile-device{
    width: 420px;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    pointer-events: none;
    z-index: 1;
}
.mobile-layers{
    position: absolute;
    width: 100%;
    height: auto;
}

/* TABLET SECTION */
.device-btn{
    color: #ffffff;
}
.device-text.big-text{
    font-size: 8vw;
    line-height: 7.5vw;
    color: #ffffff;
    margin-bottom: 0px;
    margin-top: 0px;
}
.device-text-wrap{
    max-width: 70%;
    position: absolute;
    right: 0;
    z-index: 0;
}
.tablet-6{
    z-index: 5;
}
.tablet-5{
    z-index: 4;
}
.tablet-4{
    z-index: 3;
}
.tablet-3{
    z-index: 2;
}
.tablet-2{
    z-index: 1;
}
.tablet-1{
    z-index: 0;
}
.tablet-wrap{
    height: auto;
    width: 1024px;
    display: flex;
    flex-wrap: wrap;
    align-self: flex-end;
    position: relative;
}
.tablet{
    max-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
    margin-left: 20px;
    z-index: 1;
}
.tablet-layers{
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0px;
}

.tablet-container{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}
.tablet-section{
    background-color: #2a2a2a;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}

/* BRAND BUILDING SECTION */
body .centric-btn.text-btn{
    color: #ffffff !important;
    max-width: 100%;
    text-align: center;
    bottom: 4%;
}
.waves-bg{
    opacity: 1;
    object-fit: cover;
    width: 100%;
    z-index: 0;
}
.laptop-lockup{
    opacity: 1;
    position: absolute;
    right: 0;
    left: 0;
    top: 70px;
    width: 741px;
    height: 426px;
    margin: auto;
    background-color: rgba(0,0,0,0.0);
    overflow: hidden;
}
.laptop-ph{
    max-width: 100vw;
    max-height: 100vh;
    margin: 0 auto;
    display: block;
    width: 1280px;
    height: auto;
    position: absolute;
    bottom: -33px;
    left: 0;
    right: 0;
    transform: scale(1.3) translateY(-110px);
}
.laptop-ph-wrap{
    height: 100%;
    width: 100%;
    display: block;
}
.inviting-environments-pin{
    height: 100%;
    width: 100%;
    background: white;
}
.inviting-environments{
    height: 100vh;
    width: 100%;
    background: red;
    opacity: 0;
    position: fixed;
    overflow: hidden;
    z-index: 2;
}

.inviting-text-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
.inviting-text.big-text{
    color: #ffffff;
    text-align: left;
    font-size: 4.5rem;
    line-height: 4.5rem;
    width: 100%;
    padding: 3rem;
    margin-top: 0px;
}
.gracient-text3{
    background: linear-gradient(to right, #1da6d3 20%, #c4199f 40%, #8700bf 60%, #1da6d3 80%);
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: shine2 5s linear infinite;
    animation: shine2 5s linear infinite;
}
.gradient-text2 {
    background: linear-gradient(to right, #ee9632 20%, #c41975 40%, #8700bf 60%, #f09c2f 80%);
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: shine2 5s linear infinite;
          animation: shine2 5s linear infinite;
}
@-webkit-keyframes shine2 {
  to {
    background-position: 200% center;
  }
}
@keyframes shine2 {
  to {
    background-position: 200% center;
  }
}
.gradient-text {
    background: linear-gradient(to right, #650ba3 20%, #004eff 40%, #ff003a 60%, #650ba3 80%);
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: shine 5s linear infinite;
          animation: shine 5s linear infinite;
}
@-webkit-keyframes shine {
  to {
    background-position: 200% center;
  }
}
@keyframes shine {
  to {
    background-position: 200% center;
  }
}
body .brand-build-btn{
    color: #650ba3;
}
#laptop-canvas {
    max-width: 100vw;
    max-height: 100vh;
    margin: 0 auto;
    display: block;
    width: 1280px;
}
.the-laptop{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}
.laptop{
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}
.laptop-wrap{
    background: rgb(170,0,217);
    background: -moz-linear-gradient(127deg, rgba(170,0,217,1) 0%, rgba(219,0,0,1) 100%);
    background: -webkit-linear-gradient(127deg, rgba(170,0,217,1) 0%, rgba(219,0,0,1) 100%);
    background: linear-gradient(127deg, rgba(170,0,217,1) 0%, rgba(219,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aa00d9",endColorstr="#db0000",GradientType=1);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
/* =======================
    CUBES SECTION
========================== */
.scroll-text-wrap {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0px;
    z-index: 1;
    left: 0px;
}
.scroll-text-wrap .scroll-text{
    color: #5700cd;
    max-width: 55%;
    margin-left: 5%;
    margin-right: auto;
    -webkit-transform: translate(110px, 10px);
       -moz-transform: translate(110px, 10px);
        -ms-transform: translate(110px, 10px);
         -o-transform: translate(110px, 10px);
            transform: translate(110px, 10px);
}
#cubes-canvas,.cubes-wrap{
    width: 1600px;
}
.cubes-pin{
    background: #ffc729;
    /* background: rgb(255,229,0);
    background: -moz-linear-gradient(135deg, rgba(255,229,0,1) 0%, rgba(243,179,0,1) 100%);
    background: -webkit-linear-gradient(135deg, rgba(255,229,0,1) 0%, rgba(243,179,0,1) 100%);
    background: linear-gradient(135deg, rgba(255,229,0,1) 0%, rgba(243,179,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffe500",endColorstr="#f3b300",GradientType=1); */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.cubes{
    background-color: #ffc729;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}

/* =======================
    HMI HERO SECTION
========================== */
.hero-video-wrap{
    padding:59.25% 0 0 0;
    position:relative;
    overflow: hidden;
    width: 100%;
}
.hero-video-wrap video{
    object-fit: cover;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.kbm{
    left: -1%;
    right: 0;
    display: block;
    margin: auto;
    max-width: 75%;
    z-index: 5;
    position: relative;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(115px,100px);
       -moz-transform: translate(115px,100px);
        -ms-transform: translate(115px,100px);
         -o-transform: translate(115px,100px);
            transform: translate(115px,100px);
}
.text-animation{
    position: absolute;
    height: 95%;
    width: 85%;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
}
.web-design-text-vertical{
    height: auto;
    width: 120px;
    max-height: none;
}
.web-design-text{
    height: 120px;
    width: auto;
    max-width: none;
}
.bottom-title{
    position: absolute;
    z-index: 11111;
    max-width: calc(100% - 120px);
    width: 100%;
    left: 0px;
    bottom: 0px;
    right: unset;
    margin: auto;
    overflow: hidden;
}
.top-title{
    position: absolute;
    z-index: 11111;
    max-width: calc(100% - 120px);
    width: 100%;
    left: unset;
    top: 0px;
    right: 0px;
    margin: auto;
    overflow: hidden;
}
.left-title{
    position: absolute;
    z-index: 11111;
    max-height: calc(100% - 120px);
    width: 120px;
    left: 0px;
    top: 0px;
    right: unset;
    bottom: 120px;
    margin: auto;
    overflow: hidden;
}
.right-title{
    position: absolute;
    z-index: 11111;
    max-height: calc(100% - 120px);
    width: 120px;
    left: unset;
    top: 120px;
    right: 0;
    bottom: 0px;
    margin: auto;
    overflow: hidden;
}

.big-title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    color: #ffffff;
    height: 100%;
    font-size: 15vw;
    text-transform: uppercase;
    line-height: normal;
    margin-top: 28rem;
    white-space: pre;
    padding: 4rem;
}
.is-loading{
    overflow: hidden;
}
.marqueeScroll {
  -webkit-animation: marqueeScroll linear 4s infinite;
}
@-webkit-keyframes marqueeScroll {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: -707px;
  }
}
.mug{
    position: absolute;
    max-width: 24%;
    right: -23%;
    bottom: 13px;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(400px);
       -moz-transform: translateX(400px);
        -ms-transform: translateX(400px);
         -o-transform: translateX(400px);
            transform: translateX(400px);
}
.screen{
    z-index: -3;
    position: relative;
}
.outline-text9{
    color: #ff982c;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #ff982c;
}
.outline-text8{
    color: #004a99;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #004a99;
}
.outline-text7{
    color: #b979ff;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #b979ff;
}
.outline-text6{
    color: #5d22d2;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #5d22d2;
}
.outline-text5{
    color: #995c3c;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #995c3c;
}
.outline-text4{
    color: #000000;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #000000;
}
.outline-text3{
    color: #5700cd;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #5700cd;
}
.outline-text2-3{
    color: #ffffff;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #ffffff;
}
.outline-text2-2{
    color: #ffffff;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #ffffff;
}
.outline-text2{
    color: #ffffff;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #ffffff;
}
.outline-text2-2::before{
    position: absolute;
    right: calc(-100% - 40px);
    display: inline;
    content: attr(data-text);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.outline-text{
    color: #9326ff;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #9326ff;
}
/* .hero-marquee {
    display: flex;
    position: absolute;
    width: 100%;
    height: 70px;
    margin: auto;
    overflow: hidden;
    z-index: 0;
    bottom: -6px;
}
.hero-marquee-title {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    transform: scale(2);
    transition: all 1s ease;
}
.hero-marquee-title > div {
  display: flex;
  -webkit-animation: scrollText 30s infinite linear;
          animation: scrollText 30s infinite linear;
}
.hero-marquee-title h3 {
  margin: 0;
  font-size: 2.5rem;
  text-transform: uppercase;
  transition: all 2s ease;
  letter-spacing: 4px;
  font-weight: 900;
}
.hero-marquee-title a {
  text-decoration: none;
  color: white;
}
.hero-marquee-title a:hover {
  -webkit-text-stroke: 1px white;
  color: transparent;
}
@-webkit-keyframes scrollText {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(calc(-100% - 40px));
  }
}
@keyframes scrollText {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(calc(-100% - 40px));
  }
} */
.bottom-left-text h3,.bottom-right-text h3{
    font-weight: 400;
    font-size: 18px;
    color: #919191;
    letter-spacing: 2px;
}

.bottom-right-text{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    bottom: 148px;
    right: 10px;
    width: 100%;
}
.bottom-left-text{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    bottom: 148px;
    left: 10px;
    width: 100%;
}
.top-text h1{
    font-weight: 300;
    font-size: 1.2rem;
    color: #ffffff;
    letter-spacing: 9px;
    text-align: center;
}
.top-text{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -69px;
    width: 100%;
}
.hmi-desktop img{
    width: 100%;
}
.hmi-desktop{
   position: absolute;
    margin: 0;
    width: 100%;
    height: auto;
}
.typed-text-wrap{
    display: grid;
    z-index: 3;
    justify-self: center;
    position: absolute;
    align-self: center;
}
 .typed-cursor {
    z-index: 3;
    color: white;
    display: inline;
    top: 0rem;
    opacity: 1;
    position: relative;
    animation: blink .7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.hmi-hero-wrapper{
    background-color: white;
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 2;
    background: rgb(102,0,240);
    background: -moz-linear-gradient(170deg, rgba(102,0,240,1) 0%, rgba(50,42,61,1) 100%);
    background: -webkit-linear-gradient(170deg, rgba(102,0,240,1) 0%, rgba(50,42,61,1) 100%);
    background: linear-gradient(170deg, rgba(102,0,240,1) 0%, rgba(50,42,61,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6600f0",endColorstr="#322a3d",GradientType=1);
}
.hmi-hero-lockup h2{
    padding: 0px;
    color: #ffffff;
    position: relative;
    z-index: 3;
    text-align: left;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 900;
}
.hmi-video-wrap{
    z-index: 1;
    position: absolute;
    height: auto;
    width: calc(100% - 5%);
    margin: auto;
    left: 0;
    right: 0;
    top: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.hmi-hero-lockup{
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 1280px;
    justify-content: center;
    align-items: center;
    margin: auto;
    left: 0;
    right: 0;
    top: 5%;
    -webkit-transform: scale(2.5, 2.5);
       -moz-transform: scale(2.5, 2.5);
        -ms-transform: scale(2.5, 2.5);
         -o-transform: scale(2.5, 2.5);
            transform: scale(2.5, 2.5);
}
.hmi-hero{
    height: 100vh;
    position: relative;
    overflow: hidden;
    width: 100%;
}
/* PROCESS MENU ADJUSTMENTS */
@media only screen and (min-width : 1331px) and (max-width : 1680px)  {
    header .main-header{
        grid-template-columns: 260px 1fr 1fr;
    }
    .process-title{
        letter-spacing: 10px;
        font-size: 11px;
    }
    .process a{
        font-size: 11px;
    }
    .process-bar-wrap{
        grid-template-columns: 124px 1fr 1fr 1fr 1fr;
    }
}
/* END ADJUSTMENTS */

/* ADJUSTMENTS TO ROCKET AND DEPLOY TEXT */
@media only screen and (max-height: 980px){
    .deployment-heading-wrap img.rocket-3{
        top: 0%;
    }
    .deployment-header{
        font-size: 10rem;
        top: 60% !important;
        left: -92%;
    }
}
@media only screen and (min-width : 1441px) and (max-width : 1700px)  {
    .deployment-heading-wrap img.rocket-3{
        top: 7%;
    }
    .deployment-header{
        top: 45%;
        left: -94%;
    }
}
/* END ADJUSTMENTS */

/* SMALLER LAPTOP SIZES */
@media only screen and (min-width : 1025px) and (max-width : 1440px)  {
    .deployment-btn{
        bottom: 35%;
    }
    .deployment-header{
        top: 35%;
        left: -97%;
    }
    .contact-cta-links{
        margin-top: 0.5rem;
    }
    .contact-cta-links a{
        font-size: 2rem;
    }
    .contact-cta-heading{
        font-size: 5rem;
        line-height: 5rem;
    }
    .development-header{
        margin: 5% 0 0 0;
    }
    .cp-screen{
        height: 190px;
    }
    #cp-type{
        font-size: 1.2rem;
    }
    .development-bracket{
        width: 500px;
        top: 13%;
    }
    .mobile-text-wrap .mobile-text{
        font-size: 6vw;
        line-height: 6vw;
        margin-bottom: 23%;
    }
    .inviting-text.big-text{
        width: 70%;
        margin: 0 auto;
        font-size: 3.5rem;
        line-height: 3.5rem;
        padding: 0rem;
    }
    #laptop-canvas{
        width: 1000px;
    }
    .top-text{
        top: -40px;
    }
    .hmi-hero-lockup{
        width: 930px;
    }
    .tablet-wrap{
        width: 800px;
    }
}
/* READJUST PROCESS BAR */
@media only screen and (max-width:1330px) {
    .process a{
        padding: 3px 8px 1px 8px;
        font-size: 12px;
    }
    .process-bar-wrap{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 1rem;
    }
    .process-bar-header{
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 1;
        grid-row-end: 2;
        justify-content: center;
        padding: 5px 0px;
    }
    .menu{
        order: 2;
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;

    }
    .process-bar{
        order: 3;
        padding: 0rem 1rem 0.5rem 1rem;
    }
    header .main-header{
        grid-template-columns: 430px 1fr 430fr;
    }
}

/* HIT LARGER SCREENS QUERIES ----------- */
@media only screen and (min-width:1600px){
    .portfolio-wrap{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@media only screen and (max-width:1220px){
    .contact-cta-heading {
        font-size: 4rem;
        line-height: 4rem;
    }
}

/* TABLET QUERIES ----------- */

/* OVERALL */
@media only screen and (max-width:1024px){

    .contact-quick-links{
        margin-top: 0rem;
    }
    .standalone-contact-footer p{
        padding-right: 5rem;
    }
    .division-listing{
        gap: 5px;
    }
    .hm-divisions{
        display: flex;
        gap: 1rem;
        flex-flow: wrap;
    }
    .standalone-contact-footer{
        position: relative;
    }
    .contact{
        height: auto;
    }
    .contact-header{
        grid-column-start: unset;
        grid-column-end: unset;
        grid-row-start: unset;
        grid-row-end: unset;
    }
    .contact-wrap{
        grid-template-columns: 1fr;
        width: 90%;
        max-width: 700px;
        padding: 9rem 0rem;
    }
}
/* TABLET SPECIFIC */
@media only screen and (min-width:768px) and (max-width:1024px) {
    .keep-scrolling{
        bottom: 6rem;
        left: -3rem;
    }
    /* CONTACT CTA TABLET */
    .contact-cta-wrapper{
        background-position: 72% 65%;
    }
    .contact-cta-links{
        text-align: left;
        display: grid;
        row-gap: 1rem;
        grid-auto-flow: column;
        margin-top: 3rem;
    }
    .contact-container{
        grid-template-columns: 1fr;
    }

    /* DEPLOYMENT TABLET */
   .deployment-rocket-btn{
        top: unset;
        bottom: 0%;
        right: 1%;
    }
    .deployment-copy-wrap{
        left: 0rem;
    }
    .deployment-heading-wrap{
        left: -33%;
    }
    .deployment-circle text{
        letter-spacing: 1px;
    }
    .deployment-circle-text{
        fill: #ffffff;
    }
    .deployment-btn{
        top: 45%;
        right: unset;
        left: 34%;
    }
    .rockets.rocket-5{
        position: relative;
        -webkit-transform: scale(1.1);
           -moz-transform: scale(1.1);
            -ms-transform: scale(1.1);
             -o-transform: scale(1.1);
                transform: scale(1.1);
    }
    .deployment-header{
        font-size: 19vw;
    }
    .deployment-copy{
        font-size: 3.5vw;
        max-width: 335px;
    }
    .rocket-4{
        top: -13rem;
    }

    /* DEVELOPMENT TABLET */
    #cp-type{
        font-size: 1.5rem;
    }
    .cp-screen{
        height: 380px;
    }
    .development-btn{
        right: 0rem;
        left: 0rem;
        bottom: 5rem;
        margin: auto;
    }
    .development-header{
        font-size: 16vw;
        margin: -3% 0 0 0;
        width: 100%;
        justify-content: center;
    }
    .development-bracket{
        width: 540px;
        height: auto;
        margin-top: 2%;
    }

    /* DESIGN TABLET */
    .design-btn{
        bottom: 7%;
        right: 11%;
    }
    .design-paragraph{
        font-size: 1.4rem;
        bottom: 25%;
        left: 0rem;
        max-width: 460px;
        right: 0rem;
        margin: auto;
        text-align: center;
    }

    /* DISCOVERY TABLET */
    .binoculars-copy{
        margin-top: -27%;
    }
    .process-arrow{
        height: 35px;
    }
    .process-title{
        letter-spacing: 7px;
        font-size: 5vw;
    }
    .binoculars-btn{
        position: absolute;
        bottom: -45%;
    }
    .binoculars-text-wrap{
        top: 55%;
    }
    .binoculars-paragraph{
        margin-top: 0rem;
        font-size: 1.4rem;
        line-height: normal;
        max-width: 460px;
    }

    /* SHOES TABLET */
    .shoes-text-wrap h3 span{
        font-size: 2.5rem;
    }
    .shoes-text-wrap .text-column p{
        font-size: 1.5rem;
        padding-top: 25px;
    }
    .shoes-text-wrap h3{
        font-size: 7vw;
        line-height: 8vw;
    }
    .shoes-wrapper{
        max-width: 100%;
        -webkit-transform: rotate(-90deg) translateX(-26%) translateY(-23%);
           -moz-transform: rotate(-90deg) translateX(-26%) translateY(-23%);
            -ms-transform: rotate(-90deg) translateX(-26%) translateY(-23%);
             -o-transform: rotate(-90deg) translateX(-26%) translateY(-23%);
                transform: rotate(-90deg) translateX(-26%) translateY(-23%);
    }
    .shoes-text-wrap{
        width: 55%;
        font-size: 2.5vw;
        line-height: ;
        flex-direction: column;
        -webkit-transform: translate(-20%, -50%);
           -moz-transform: translate(-20%, -50%);
            -ms-transform: translate(-20%, -50%);
             -o-transform: translate(-20%, -50%);
                transform: translate(-20%, -50%);
    }

    /* WOMEN TABLET */
    .stock-woman .stock-woman-copy .big-text .outline-text2{
        -webkit-text-stroke-width: 1px;
    }
    #down-arrow{
        width: 90px;
    }
    .stock-woman-5 .stock-woman-copy{
        max-width: 530px;
    }
    .stock-woman-4 .stock-woman-copy{
        max-width: 408px;
    }
    .stock-woman-2-img{
        background-position: 34%;
    }
    .stock-woman-copy{
        max-width: 620px;
    }
    .stock-woman-1-img{
        background-size: cover;
    }

    /* WATCH TABLET */
    .the-watch-text{
        font-size: 7vw;
        line-height: 7vw;
    }
    .the-watch{
        position: relative;
    }
    .watch-btn{
        float: unset;
        display: block;
        margin-top: 4rem;
        font-size: 3vw;
        width: 500px;
        left: 8%;
        bottom: 1%;
    }
    .watch-text{
        font-size: 10vw;
        line-height: 9vw;
        margin-bottom: 0px;
    }
    .watch-text-container{
        max-width: 70%;
        top: -10%;
    }
    .earbud-2{
        width: 150px !important;
    }
    .earbud-1{
        width: 190px !important;
    }
    .watch-layer{
        width: 320px !important;
    }
    .watch-pin{
        flex-flow: column;
        grid-template-columns: 1fr;
    }

    /* MOBILE TABLET */
    .mobile-btn::before{
        top: -35px;
    }
    .mobile-text .outline-text2{
        -webkit-text-stroke-width: 2px;
    }
    .mobile-btn{
        float: unset;
        max-width: 365px;
        font-size: 3vw;
    }
    .mobile-text-wrap{
        width: 90%;
        top: -12rem;
    }
    .mobile-text-wrap .mobile-text{
        font-size: 9vw;
        line-height: 9vw;
    }
    .screen-scroll-wrap{
        width: calc(100% - 100px);
        height: calc(100% - 30px);
        left: -20px;
    }
    .mobile-device-wrap{
        height: 530px;
        width: 400px;
    }

    /* TABLET SCENE STYLES */
    .tablet-wrap{
        margin-bottom: 17%;
    }
    .device-text.big-text{
        font-size: 14vw;
        line-height: 14vw;
    }
    .device-btn{
        margin-left: 0px;
        margin-right: auto;
        float: none;
        margin-top: 1rem;
        font-size: 3vw;
        width: 100%;
        max-width: 580px;
        margin:  auto;
        left: 0;
        right: 0;
    }
    .device-text-wrap{
        max-width: 80%;
        left: 0;
        margin: auto;
    }
    .tablet{
        margin-left: 0px;
    }

    /* LAPTOP SCENE STYLES */
    .inviting-text .outline-text2{
        -webkit-text-stroke-width: 1px;
    }
    .laptop-lockup{
        top: 13%;
        width: 444px;
        height: 258px;
        overflow: unset;
    }
    .inviting-text.big-text{
        font-size: 5vw;
        line-height: 5vw;
        padding: 2rem;
    }
    body .centric-btn.text-btn{
        padding: 20px;
        font-size: 1.5rem;
        height: 90px;
        width: 100%;
        max-width: 580px;
        left: 0;
        margin: auto;
        bottom: 7%;
        text-align: left;
    }

    /* CUBES TABLET */
    .cubes-pin{
        display: grid;
    }
    .brand-build-btn::before{
        top: 0px;
        left: 20px;
    }
    .brand-build-btn{
        position: relative;
        max-width: 580px;
        padding: 0px 5%;
        font-size: 1.5rem;
        bottom: 48%;
    }
    .scroll-text-wrap{
        flex-flow: column;
        top: -15%;
    }
    .scroll-text-wrap .scroll-text{
        font-size: 11vw;
        line-height: 11vw;
        padding: 0px 5%;
        max-width: 90% !important;
        margin-left: 0rem;
        margin-bottom: 30px;
        -webkit-transform: scale(1) translate(0px, 0px);
        -moz-transform: scale(1) translate(0px, 0px);
        -ms-transform: scale(1) translate(0px, 0px);
        -o-transform: scale(1) translate(0px, 0px);
        transform: scale(1) translate(0px, 0px);
    }

    /* HERO TABLET */
    .kbm{
        left: -11%;
    }
    header .logo{
        max-width: 410px;
    }
    header .main-header{
        grid-template-columns: 1fr;
    }
    .scroll{
        bottom: 12%;
    }
    .top-text{
        top: -40px;
    }
    .top-text h1{
        font-size: 0.8rem;
        letter-spacing: 5px;
    }

    .hmi-video-wrap{
        width: calc(100% - 32px);
        top: 15px;
    }
    .mug{
        right: -8%;
        max-width: 130px;
    }
}
@media only screen and (max-width : 1150px) {
    .job-post-wrap{
        max-width: 90%;
        margin: 0 auto;
    }
}
/* MOBILE QUERIES ----------- */
@media only screen and (max-width : 767px) {
    /* GLOBALS */
    .new-office-container{
        grid-template-columns: 1fr;
    }
    .keep-scrolling{
        bottom: 5rem;
        left: -3.5rem;
    }
    .menu{
        position: fixed;
        bottom: 6rem;
        right: 1rem;
        -webkit-transform: scale(0.9);
           -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
             -o-transform: scale(0.9);
                transform: scale(0.9);
    }
    .footer-logo{
        max-width: 240px;
    }
    .service-image img, .service-image .lottie{
        width: 250px;
    }
    .service-title{
        font-size: 1.5rem;
    }
    .service-listing{
        padding: 2rem 0rem;
    }
    .footer-column.contact-info-right{
        margin-top: 0rem;
    }
    footer{
        padding-top: 5.5rem;
    }
    footer .hm-divisions{
        justify-content: flex-start;
    }
    .qb{
        padding: 4.5rem 3rem;
    }
    .qb-header{
        font-size: 3rem;
        -webkit-text-stroke-width: 2px;
        margin-top: 0rem;
    }
    .process-bar{
        display: none;
    }
    .portfolio-wrap{
        grid-template-columns: 1fr 1fr;
    }
    .scroll{
        bottom: 70px;
        padding: 10px;
        width: 50px;
    }
    /* PROCESS */
    .develop-qbid{
        background-size: auto 45%;
        background-position: 97% 100%;
    }
    .discover-qbid{
        background-size: auto 40%;
        background-position: 98% 100%;
    }
    .deploy-qbid{
        background-size: 20% auto !important;
        background-position: 91% 230% !important;
    }
    .qb-wrap{
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    /* CONTACT */
    #thanks,.field.message,.field.submit-btn{
        grid-column-start: unset;
        grid-column-end: unset;
        grid-row-start: unset;
        grid-row-end: unset;
    }
    .contact-form{
        grid-template-columns: 1fr;
    }
    .contact-quick-links a{
        font-size: 1.4rem;
    }
    .contact-title{
        font-size: 4rem;
        line-height: 4rem;
        -webkit-text-stroke-width: 2px;
    }
    .contact-wrap{
        padding: 6rem 0rem;
    }
    /* PROCESS */

    .service-wrap .service-info{
        order: 2;
    }
    .service-wrap{
        width: 90%;
        justify-self: center;
        grid-template-columns: 1fr;
    }
    
    .deploy-page .process-subheading{
        max-width: 77%;
    }
    .deploy-page .process-header{
        background-size: 40% auto !important;
        background-position: 120% 160% !important;
    }

    .develop-page .process-header{
        background-size: 60% auto !important;
        background-position: 90% 95% !important;
    }

    .design-page .process-subheading{
        max-width: 82%;
    }
    .design-page .process-header{
        background-size: cover !important;
        background-position: 84% 50% !important;
    }

    .discover-page .process-header{
        background-size: 90% !important;
        background-position: 300% 95% !important;
    }
    .process-subheading{
        font-size: 1.2rem;
        line-height: 1.8rem;
        white-space: normal;
    }
    .process-label{
        display: none;
    }
    .process-header{
        padding: 8rem 0rem 11rem 0rem;
        white-space: nowrap;
    }
    /* CONTACT MOBILE */
    .contact-cta-links a{
        font-size: 22px;
    }
    .contact-cta-links{
        grid-auto-flow: column;
        row-gap: 0rem;
        column-gap: 1rem;
        margin-top: 2rem;
    }
    .contact-cta-heading{
        font-size: 3rem;
        line-height: 3rem;
    }
    .contact-container{
        grid-template-columns: 1fr;
    }
    .contact-cta-wrapper{
        background-position: 95% 50%;
        background-size: 371%;
        padding: 2rem;
    }
    /* DEPLOYMENT MOBILE */
    .deployment-circle-text{
        fill: #000000;
    }
    body .rockets.rocket-5{
        position: absolute;
    }
    .deployment-btn{
        bottom: 26%;
        left: unset;
        width: auto;
        right: 15%;
    }
    .rocket-4{
        top: -8rem;
        left: 0rem;
    }
    .deployment-copy{
        font-size: 1rem;
        max-width: 280px;
        text-align: left;
    }
    .deployment-copy-wrap{
        bottom: 95%;
        left: 0rem;
    }
    .deployment-header{
        left: -75%;
        font-size: 19vw;
        top: 48%;
    }
    .deployment-rocket-btn{
        bottom: 22rem;
        top: unset;
        right: 0%;
        left: 0%;
        margin: auto;
    }
    .rockets{
        max-width: 140px;
    }

    /* DEVELOPMENT MOBILE */
    #cp-type{
        font-size: 1rem;
    }
    .development-header .outline-text2{
        -webkit-text-stroke-width:  1px;
    }
    .development-header{
        margin: -24% 0 0 0;
        font-size: 18vw;
    }
    .development-pin{
        background-position: 0% 60%;
    }
    .development-btn{
        right: 0rem;
        left: 0rem;
        margin: auto;
        bottom: 9%;
    }
    .cp-screen{
        width: 100%;
        height: 320px;
    }
    .cp-menu{
        width: 100%;
    }
    .development-bracket{
        width: 215px;
        height: auto;
        margin-top: -2%;
    }
    /* DESIGN SECTION ANIMATION STYLES */
    .design-btn{
        bottom: 11%;
    }
    .design-images{
        -webkit-transform: scale(1.5) translateY(-6%) translateX(-10%);
        -moz-transform: scale(1.5) translateY(-6%) translateX(-10%);
        -ms-transform: scale(1.5) translateY(-6%) translateX(-10%);
        -o-transform: scale(1.5) translateY(-6%) translateX(-10%);
        transform: scale(1.5) translateY(-6%) translateX(-10%);
    }
    .design-paragraph{
        max-width: 80%;
        bottom: 40%;
        font-size: 1rem;
        left: 0rem;
        right: 0rem;
        margin: auto;
    }
    .design-text{
        margin-top: -75%;
    }

    /* DISCOVERY MOBILE */
    .binoculars-copy{
        margin-top: -20%;
    }
    .binoculars-title{
        font-size: 17vw;
    }
    .binoculars-title .outline-text2{
        -webkit-text-stroke-width: 1px;
    }
    .binoculars-btn{
        position: absolute;
        bottom: -75%;
    }
    .binoculars-paragraph{
        max-width: 80%;
        font-size: 1rem;
        margin-top: 0rem;
        line-height: normal;
    }
    .binoculars-text{
        font-size: 28vw;
    }
    .binoculars-text-wrap{
        height: auto;
    }

    /* PROCESS MOBILE */
    .process-title .outline-text4{
        -webkit-text-stroke-width: 1px;
    }
    .process-title{
        font-size: 5vw;
        letter-spacing: 8px;
    }
    .process{
        overflow: unset;
    }
    .process-arrow{
        display: none;
    }
    /* SHOES MOBILE */
    .shoes-text-wrap h3 span{
        font-size: 2rem;
    }
    .shoes-text-wrap .text-column p{
        padding-top: 35px;
        font-size: 1rem;
    }
    .shoes-wrapper{
        -webkit-transform: scale(1.5) rotate(-90deg) translateX(-40%) translateY(-2%);
        -moz-transform: scale(1.5) rotate(-90deg) translateX(-40%) translateY(-2%);
        -ms-transform: scale(1.5) rotate(-90deg) translateX(-40%) translateY(-2%);
        -o-transform: scale(1.5) rotate(-90deg) translateX(-40%) translateY(-2%);
        transform: scale(1.5) rotate(-90deg) translateX(-40%) translateY(-2%);
    }
    .shoes-text-wrap h3{
        font-size: 9vw;
        line-height: 13vw;
    }
    .shoes-text-wrap{
        flex-direction: column;
        font-size: 4vw;
    }

    /* WOMEN MOBILE */
    .stock-woman .stock-woman-copy .big-text .outline-text2{
        -webkit-text-stroke-width: 1px;
    }
    .stock-woman-5-img{
        background-position: 60%;
    }
    #down-arrow{
        margin-top: 25px;
        width: 30%;
    }
    .stock-woman-4 .stock-woman-copy{
        left: unset;
        bottom: 20%;
    }
    .stock-woman-3 .stock-woman-copy{
        max-width: 300px;
    }
    .stock-woman-3-img{
        top: 10%;
        background-position: 56% 50%;
    }
    .stock-woman-2 .stock-woman-copy p{
        padding: 0px 0px;
    }
    .stock-woman-2 .stock-woman-copy{
        left: unset;
        max-width: 60%;
        bottom: 20%;
    }
    .stock-woman-2-img{
        background-position: 38% 100%;
        background-size: cover;
    }
    .stock-woman-copy{
        max-width: 60%;
        position: absolute;
        left: 0;
    }
    .stock-woman p{
        font-size: 9vw;
        line-height: 9vw;
        padding: 0px 10px;
        position: relative;
        width: 100%;
    }
    .stock-woman-1-img{
        background-position: 50% 60%;
        background-size: cover;
        left: 0%;
    }

    /* WATCH MOBILE */
    .the-watch-text{
        font-size: 8vw;
        line-height: 7vw;
        margin: 0px;
        -webkit-transform: translateY(-8px);
        -moz-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        -o-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    .watch-btn::before{
        top: -20px;
    }
    .watch-btn{
        width: unset;
        max-width: 80%;
        left: 3%;
        float: unset;
        margin-right: 0px;
        font-size: 1rem;
        margin-top: 20px;
    }
    .watch-text .outline-text8{
        -webkit-text-stroke-width: 1px;
    }
    .watch-text{
        width: 100%;
        font-size: 10vw;
        line-height: 10vw;
        margin-bottom: 25%;
    }
    .earbud-2{
        width: 75px !important;
    }
    .earbud-1{
        width: 85px !important;
    }
    .watch-layer{
        width: 160px !important;
    }
    .watch-text-container{
        top: 10%;
        max-width: 83%;
        width: 100%;
        position: relative;
        margin: unset;
        justify-self: center;
        align-self: center;
        padding-left: 0rem;
    }
    .watch-device{
        width: 100%;
    }
    .watch-pin{
        grid-template-columns: 1fr;
    }

    /* MOBILE MOBILE */
    .mobile-btn.text-btn{
        margin-bottom: 90%;
        font-size: 1rem;
        max-width: 81%;
    }
    .mobile-text .outline-text2{
        -webkit-text-stroke-width: 1px;
    }
    .mobile-btn::before{
        display: none;
    }
    .mobile-text-wrap .mobile-text{
        font-size: 9vw;
        line-height: 9vw;
        margin-bottom: 15px;
    }
    .mobile-text-wrap{
        width: 90%;
        top: -12rem;
    }
    .mobile-device{
        pointer-events: none;
        justify-content: center;
    }
    .screen-scroll-wrap{
        width: calc(100% - 60px);
        height: calc(100% - 18px);
        left: -8px;
    }
    .mobile-device-wrap{
        height: 328px;
        width: 250px;
    }

    /* TABLET MOBILE */
    .tablet-layers{
        bottom: -5px;
    }
    .tablet-wrap{
        width: 100%;
        height: auto;
    }
    .tablet{
        width: 140%;
        margin-left: 0px;
        bottom:  23%;
        position: absolute;
    }
        
    /* LAPTOP MOBILE */
    .laptop-lockup{
        overflow: unset;
        top: 17px;
        width: 100%;
        height: 108px;
    }
    body .centric-btn.text-btn{
        width: 80%;
        height: auto;
        font-size: 1rem;
        text-align: left;
        line-height: normal;
        padding: 5px;
        left: 0px;
        margin: auto;
        bottom: 7%;
    }
    .inviting-text-wrap{
        top: 18%;
    }
    .inviting-text .outline-text2{
        -webkit-text-stroke-width: 1px;
    }
    .inviting-text.big-text{
        font-size: 5vw;
        line-height: 5vw;
        max-width: 150px;
        margin: 0 auto;
        padding: 0rem;
     }
    .inviting-text.big-text .outline-text2-3{
        -webkit-text-stroke-width: 1px;
    }
    .device-text-wrap{
        max-width: 81%;
        left: 0;
        margin: auto;
    }

    .device-btn{
        float: none;
        font-size: 1rem;
        word-break: break-word;
        display: inline;
        line-height: normal;
        margin: 0 auto;
        max-width: 81%;
        left: 0;
        right: 0;
        bottom: 2%;
    }
    .device-text.big-text{
        font-size: 16vw;
        line-height: 16vw;
        margin-bottom: 1rem !important;
    }

    /* CUBES MOBILE */
    .cubes-pin{
        display: grid;
    }
    .brand-build-btn{
        position: absolute;
        display: block;
        max-width: 81%;
        margin: 0 auto;
        font-size: 1rem;
        line-height: normal;
        padding: 10px;
        left: 0;
        right: 0;
        bottom: 28%;
    }
    .scroll-text-wrap{
        flex-flow: column;
        top: -23%;
    }
    .outline-text3{
        -webkit-text-stroke-width: 2px;
    }
    .scroll-text-wrap .scroll-text{
        font-size: 11vw;
        line-height: 11vw;
        max-width: 78% !important;
        margin-left: auto;
        margin-bottom: 10px;
        -webkit-transform: scale(1) translate(0px, 0px);
           -moz-transform: scale(1) translate(0px, 0px);
            -ms-transform: scale(1) translate(0px, 0px);
             -o-transform: scale(1) translate(0px, 0px);
                transform: scale(1) translate(0px, 0px);
    }

    /* HERO MOBILE */
    .top-text{
        opacity: 0;
        visibility: hidden;
        -webkit-transform:translate(100%, 0%);
        -moz-transform:translate(100%, 0%);
        -ms-transform:translate(100%, 0%);
        -o-transform:translate(100%, 0%);
        transform:translate(100%, 0%);
    }
    .mug{
        display: none;
    }
    .kbm{
        left: -29%;
    }
    .top-text{
        top: 32%;
        right: -55%;
    }
    .top-text h1{
        font-weight: 300;
        font-size: 6px;
        color: #ffffff;
        letter-spacing: 3px;
        text-align: center;
    }

    /* HEADER MOBILE */
    .bottom-footer-info .footer-column-2{
        padding: 0rem 5rem 0rem 1rem;
    }
    .footer-column{
        padding: 2rem;
    }
    .menu-contents .menu-slogan .slogan{
        letter-spacing: 7px;
        font-size: 14px;
        margin: 0px;
        margin-right: 8rem;
    }
    .navigation nav ol li::before{
        top: -10px;
    }
    .navigation nav ol li{
        margin-left: 4rem;
    }
    .menu-contact-links{
        justify-self: flex-end;
        top: 2rem;
        right: 2rem;
        position: absolute;
        column-gap: 2rem;
    }
    .say-hola{
        max-width: 190px;
        text-align: right;
        display: grid;
        justify-self: flex-end;
        margin-right: 2rem;
        margin-top: 1rem;
    }
    .top-menu-items{
        grid-template-columns: 1fr;
    }
    .menu-social-links{
        padding: 0rem;
        grid-auto-flow: row;
        row-gap: 6px;
        margin-bottom: 2rem;
    }
    .menu-contents .menu-slogan{
        padding: 0rem 0rem 2rem 0rem;
        justify-content: flex-start;
        margin-right: 0rem;
    }
    .bottom-menu-items{
        grid-template-columns: 1fr;
        padding: 0rem 2rem 0rem 2rem;
        align-self: flex-end;
    }
    .navigation{
        grid-template-columns: 1fr;
        font-size: 2rem;
        line-height: 3rem;
    }
    header{
        grid-template-columns: 1fr;
        justify-items: inherit;
    }
    header .logo img{
        max-width: 100%;
        width: 100%;
    }
    header .logo{
        max-width: 320px;
        padding: 0px 10px 5px 10px;
    }
    header .main-header{
        grid-template-columns: 1fr;
        justify-self: center;
        padding: 1rem 0rem 0rem 0rem;
    }

    /* FOOTER MOBILE */
    .contact-info-center{
        padding: 4rem 1rem;
    }
    .footer-links{
        justify-content: flex-start;
    }
    .footer-links,.footer-column{
        text-align: left;
    }
    .bottom-footer-info .footer-column-2:nth-child(2){
      grid-row: 1;
      grid-column: 1;
    }
    .bottom-footer-info{
        grid-template-columns: 1fr;
        grid-auto-flow: dense;
    }
    .footer-info{
        grid-template-columns: 1fr;
    }
}