/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* Core Styles */
@media only screen and (min-width: 0em) {
  /* Modal Template 1 */
  /* New Folder Modal */
  .modal-template1 {
    font-size: 20px;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -11100;
    /* When the open class is added */
  }
  .modal-template1.open {
    pointer-events: all;
    opacity: 1;
    z-index: 111000000;
  }
  .modal-template1 .button-solid {
    display: block;
    border: none;
    font-size: 0.8em;
    font-family: var(--ubuntoFont);
    font-weight: bold;
    color: #fff;
    background-color: var(--primary);
    line-height: 3.125em;
    border-radius: 0.25em;
    width: 100%;
  }
  .modal-template1 .container {
    background: #fff;
    z-index: 100000;
    width: 96%;
    max-width: 18.75em;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
    border-radius: 0.3em;
  }
  .modal-template1 .folder-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.8em;
    padding-bottom: 1.25em;
    border-bottom: 1px solid #C4C4C4;
    margin-bottom: 0.8em;
  }
  .modal-template1 .folder-top .header {
    display: block;
    font-size: 0.9em;
    font-family: var(--ubuntoFont);
    font-weight: 500;
    line-height: 2;
  }
  .modal-template1 .folder-top .closeModal {
    font-size: 20px;
    border: none;
    width: 1.8em;
    height: 1.8em;
    background: #f1f1f3;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: filter 0.3s, transform 0.3s;
  }
  .modal-template1 .folder-top .closeModal:hover {
    filter: brightness(90%);
    transform: rotate(90deg);
  }
  .modal-template1 form {
    padding: 0 0.8em 0 0.8em;
  }
  .modal-template1 form label {
    display: block;
    font-size: 0.65em;
    line-height: 1.53846154;
    color: #14142b;
    margin-bottom: 0.92307692em;
  }
  .modal-template1 form input,
  .modal-template1 form select {
    font-size: 0.9em;
    height: 2.66666667em;
    background: #F3F3F4;
    border: 1px solid #E8E9EC;
    box-sizing: border-box;
    border-radius: 0.44444444em;
    padding-left: 0.88888889em;
    width: 100%;
    display: block;
    margin-bottom: 0.88888889em;
  }
  .modal-template1 form input::placeholder,
  .modal-template1 form select::placeholder {
    color: var(--neutralLabel);
  }
  .modal-template1 form .button-solid {
    display: block;
    border: none;
    font-size: 0.8em;
    font-family: var(--ubuntoFont);
    font-weight: bold;
    color: #fff;
    background-color: var(--primary);
    line-height: 3.125em;
    border-radius: 0.25em;
    width: 100%;
  }
  .modal-template2 .divider {
    display: block;
    text-align: center;
    margin-top: 1.53846154em;
    margin-bottom: 1.53846154em;
    position: relative;
    font-size: 0.65em;
  }
  .modal-template2 .divider:before {
    content: '';
    position: absolute;
    display: block;
    height: 1px;
    width: 5.76923077em;
    background: var(--neutralLabel);
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    margin-left: -6.92307692em;
  }
  .modal-template2 .divider:after {
    content: '';
    position: absolute;
    display: block;
    height: 1px;
    width: 5.76923077em;
    background: var(--neutralLabel);
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    margin-left: 1.15384615em;
  }
  .modal-template2 .button-solid {
    width: 91%;
    margin: auto;
    margin-bottom: 1.33333333em;
  }
  .modal-template2 #add-folder-form {
    overflow: hidden;
    height: 0;
    transition: height 0.3s;
  }
  .modal-template2 #add-folder-form.open {
    height: 7.3em;
  }
  body {
    font-size: 125%;
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', Arial, monospace;
    background: #F7F7F7;
  }
  body.clicked {
    overflow: hidden;
  }
  *,
  *:before,
  *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  :root {
    --neutralLabel: #6E7191;
    --neutralBody: #4E4B66;
    --primary: #0C293E;
    --lightBlue: #C7E1F4;
    --darkPrimary: #262338;
    --neutralLine: #E8E9EC;
    --ubuntoFont: 'Ubuntu', arial, sans-serif;
    --error: #F12705;
    --warning: #c79f4c;
    --warningLight: #fef4df;
    --success: #1E821D;
    --successLight: #F2FFF9;
    --primaryDarkMode: #3A96D9;
  }
  a:hover,
  button:hover {
    cursor: pointer;
  }
  button {
    font-family: 'Work Sans', Arial, monospace;
  }
  .button-transparent {
    display: block;
    background-color: transparent;
    border: 1px solid var(--primary);
    font-family: var(--ubuntoFont);
    line-height: 3.125;
    font-size: 0.8em;
    text-align: center;
    font-weight: 700;
    color: var(--primary);
    transition: background-color 0.3s, color 0.3s;
    width: auto;
    margin: auto;
    padding: 0 1.875em;
    border-radius: 0.25em;
  }
  .button-transparent:hover {
    background-color: var(--primary);
    color: #fff;
  }
  h2 {
    font-size: 1.55em;
    color: var(--primary);
    line-height: 1.16129032;
    font-weight: 700;
    font-family: var(--ubuntoFont);
    margin-bottom: 0.25806452em;
  }
  h3 {
    font-size: 1.05em;
    font-family: var(--ubuntoFont);
    font-weight: bold;
    line-height: 1.14285714;
    margin-bottom: 0.38095238em;
  }
  p {
    font-size: 0.8em;
    color: var(--neutralBody);
    line-height: 1.5em;
    margin: 0;
  }
  input {
    font-family: 'Work Sans', Arial, monospace;
  }
  /*-- -------------------------- -->
    <---           Fonts            -->
    <--- -------------------------- -*/
  /* work-sans-regular - latin */
  @font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''), url('../fonts/work-sans-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/work-sans-v16-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* work-sans-700 - latin */
  @font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''), url('../fonts/work-sans-v16-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/work-sans-v16-latin-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ubuntu-regular - latin */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''), url('../fonts/ubuntu-v19-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/ubuntu-v19-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ubuntu-500 - latin */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(''), url('../fonts/ubuntu-v19-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/ubuntu-v19-latin-500.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* ubuntu-700 - latin */
  @font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''), url('../fonts/ubuntu-v19-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/ubuntu-v19-latin-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
}
/* Scale Up */
@media only screen and (min-width: 450px) {
  body {
    font-size: 150%;
  }
}
/* Scale Up and Custo Scroll Bar */
@media only screen and (min-width: 1200px) {
  body {
    font-size: 125%;
  }
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.3);
    background-color: #fff;
  }
  ::-webkit-scrollbar-track-piece {
    background-color: #f7f7f7;
  }
  ::-webkit-scrollbar {
    width: 0.25em;
    background-color: var(--primary);
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 0.5em;
    background: var(--primary);
  }
}
/* Scale Up */
@media only screen and (min-width: 1600px) {
  body {
    font-size: 145%;
  }
}
/* Scale Up */
@media only screen and (min-width: 1700px) {
  body {
    font-size: 155%;
  }
}
/* Scale Up */
@media only screen and (min-width: 1800px) {
  body {
    font-size: 165%;
  }
}
/* Scale Up */
@media only screen and (min-width: 1900px) {
  body {
    font-size: 175%;
  }
}
/* Scale Up */
@media only screen and (min-width: 2100px) {
  body {
    font-size: 190%;
  }
}
/* Scale Up */
@media only screen and (min-width: 2300px) {
  body {
    font-size: 1.4vw;
  }
}
/*-- -------------------------- -->
<---          Main Nav          -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (max-width: 1199px) {
  .main-nav {
    position: fixed;
    bottom: 0;
    height: 3.7em;
    background: #fff;
    left: -1.2em;
    right: -1.2em;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: bottom 0.3s;
    box-shadow: 0px 91px 100px rgba(0, 0, 0, 0.02), 0px 33.2165px 36.5016px rgba(0, 0, 0, 0.0137996), 0px 16.126px 17.7209px rgba(0, 0, 0, 0.0111258), 0px 7.90526px 8.6871px rgba(0, 0, 0, 0.00887419), 0px 3.12575px 3.43489px rgba(0, 0, 0, 0.00620037);
  }
  .main-nav li {
    list-style: none;
  }
  .main-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--neutralLabel);
    font-size: 0.65em;
    line-height: 1.46153846;
    padding: 0.76923077em 1.92307692em;
    border-radius: 0.61538462em;
    transition: color 0.3s, background-color 0.3s;
  }
  .main-nav li a:hover {
    background-color: #F7F7F7;
    font-weight: 600;
    color: var(--primary);
  }
  .main-nav li a.main-active {
    background-color: #F7F7F7;
    font-weight: 600;
    color: var(--primary);
  }
  .main-nav li a svg {
    margin-bottom: 0.46153846em;
    width: 1.23076923em;
    height: 1.23076923em;
    display: block;
  }
}
/* Desktop */
@media only screen and (min-width: 1200px) {
  .main-nav {
    background-color: #fff;
    position: relative;
    z-index: 1;
    font-size: inherit;
    padding-top: 1em;
  }
  .main-nav li {
    list-style: none;
  }
  .main-nav a {
    text-decoration: none;
    color: var(--neutralLabel);
    font-size: 0.7em;
    width: 90%;
    line-height: 2.28571429em;
    padding-left: 1.14285714em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    margin-bottom: 0.85714286em;
    transition: background-color 0.3s, color 0.3s, font-weight 0.3s;
  }
  .main-nav a:hover {
    background-color: #F7F7F7;
    color: var(--primary);
  }
  .main-nav a:last-of-type {
    margin-bottom: 0;
  }
  .main-nav a.main-active {
    background-color: #F7F7F7;
    font-weight: 600;
    color: var(--primary);
    border-radius: 0.28571429em;
  }
  .main-nav a svg {
    margin-right: 0.57142857em;
  }
}
/*-- -------------------------- -->
<---         Navigation         -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  /* Header Content */
  #navigation {
    left: 0;
    right: 0;
    top: 0;
    padding: 0 0.75em;
    padding-top: 0.9em;
    position: fixed;
    display: block;
    box-shadow: 0px 36px 80px rgba(0, 0, 0, 0.01), 0px 16.6439px 36.9864px rgba(0, 0, 0, 0.00741675), 0px 9.52326px 21.1628px rgba(0, 0, 0, 0.00626781), 0px 5.78055px 12.8457px rgba(0, 0, 0, 0.00539948), 0px 3.48303px 7.74008px rgba(0, 0, 0, 0.00460052), 0px 1.93958px 4.31018px rgba(0, 0, 0, 0.00373219), 0px 0.834199px 1.85378px rgba(0, 0, 0, 0.00258325);
    padding-bottom: 0.9em;
    overflow: hidden;
    background: #fff;
    z-index: 100;
    /* Transition Properties */
    height: 3em;
    transition: height 0.3s;
  }
  #navigation .logo {
    width: 9.5em;
    height: auto;
    display: block;
    margin-bottom: 1.2em;
  }
  #navigation .logo img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
  }
  #navigation .agency-toggle {
    display: none;
  }
  #navigation .cs-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.84615385em;
  }
  #navigation .cs-tags {
    opacity: 0;
    transform: translateY(-2rem);
    transition: opacity 0.3s, transform 0.3s;
    transition-delay: 0.1s;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
  }
  #navigation .cs-tags.cs-active .cs-tags-button {
    background-color: var(--primary);
    color: #fff;
  }
  #navigation .cs-tags.cs-active .tags-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
  #navigation .cs-tags.cs-active .tag-arrow {
    transform: rotate(90deg);
  }
  #navigation .cs-tags.cs-active .tag-arrow {
    filter: grayscale(1) brightness(1000%);
  }
  #navigation .cs-tags-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--primary);
    border-radius: 0.5rem;
    width: 100%;
    line-height: 3rem;
    background-color: transparent;
    transition: color 0.3s, background-color 0.3s;
  }
  #navigation .tag-arrow {
    width: 0.75rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
  #navigation .tags-list {
    overflow: scroll;
    max-height: 25rem;
    padding: 1.25rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 1rem;
    position: absolute;
    top: 120%;
    left: 0;
    background-color: #fff;
    opacity: 0;
    transform: translateY(5rem);
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
  }
  #navigation .cs-tag,
  #navigation .cs-tag-control-btn {
    font-size: 0.875rem;
    background-color: #f7f7f7;
    color: #1a1a1a;
    margin: 0;
    padding: 0 1rem;
    line-height: 1.75rem;
    border-radius: 2.5rem;
    border: none;
    text-decoration: none;
  }
  #navigation .cs-tag.cs-active,
  #navigation .cs-tag-control-btn.cs-active {
    background-color: var(--primary);
    color: #fff;
  }
  #navigation .search {
    position: relative;
    display: block;
    pointer-events: none;
    /*transition Properties */
    transform: translateY(-1.15384615em);
    transition: transform 0.5s;
    opacity: 0;
  }
  #navigation .search input {
    font-size: 0.65em;
    width: 100%;
    height: 3.69230769em;
    background: #F3F3F4;
    border: 1px solid #E8E9EC;
    border-radius: 0.61538462em;
    display: block;
    padding: 0;
    padding-left: 4em;
    position: relative;
    box-sizing: border-box;
    color: var(--neutralLabel);
    margin-bottom: 1.84615385em;
  }
  #navigation .search .mag-glass {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.8em;
    z-index: 10;
    width: 1.2em;
    height: 1.2em;
  }
  #navigation .profile-info {
    display: none;
    padding: 0.5em;
    border-radius: 0.2em;
    transition: background-color 0.3s;
  }
  #navigation .profile-info:hover {
    cursor: pointer;
    background-color: #f7f7f7;
  }
  #navigation .profile-info .account-dropdown {
    display: none;
  }
  #navigation .upgrade {
    display: block;
    font-size: 0.65em;
    color: #fff;
    font-weight: 700;
    font-family: var(--ubuntoFont);
    background: linear-gradient(90deg, #F73C3C 0%, #EE870E 100%);
    text-decoration: none;
    text-align: center;
    border-radius: 1.30769231em;
    overflow: hidden;
    line-height: 2.61538462em;
    /* Transition Properties */
    opacity: 0;
    transform: translateY(-1.15384615em);
    transition: opacity 0.3s, transform 0.5s;
  }
  #navigation .upgrade img {
    transform: translateY(0.07692308em);
    margin-right: 0.76923077em;
    width: 0.9em;
    height: 0.9em;
  }
  #navigation.clicked {
    height: 23.5em;
  }
  #navigation.clicked .search,
  #navigation.clicked .cs-tags {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }
  #navigation.clicked .upgrade {
    line-height: 2.61538462em;
    opacity: 1;
    transform: translateY(0);
  }
}
/* mobile only changes */
@media only screen and (max-width: 74.9375em) {
  #navigation {
    height: 3.125em;
    transition: height 0.3s;
  }
  #navigation nav {
    height: 90%;
    transform: scaleY(0);
    transform-origin: top;
    transition: transfrom 0.3s;
  }
  #navigation.clicked {
    height: 98% !important;
  }
  #navigation.clicked nav {
    transform: scaleY(1);
  }
  #stitch-list {
    height: 75% !important;
    overflow: scroll;
  }
  #stitch-list .dropdown:nth-of-type(2) .category {
    transition-delay: 0.02s;
  }
  #stitch-list .dropdown:nth-of-type(3) .category {
    transition-delay: 0.04s;
  }
  #stitch-list .dropdown:nth-of-type(4) .category {
    transition-delay: 0.06s;
  }
  #stitch-list .dropdown:nth-of-type(5) .category {
    transition-delay: 0.08s;
  }
  #stitch-list .dropdown:nth-of-type(6) .category {
    transition-delay: 0.1s;
  }
  #stitch-list .dropdown:nth-of-type(7) .category {
    transition-delay: 0.12s;
  }
  #stitch-list .dropdown:nth-of-type(8) .category {
    transition-delay: 0.14s;
  }
  #stitch-list .dropdown:nth-of-type(9) .category {
    transition-delay: 0.16s;
  }
  #stitch-list .dropdown:nth-of-type(10) .category {
    transition-delay: 0.18s;
  }
  #stitch-list .dropdown:nth-of-type(11) .category {
    transition-delay: 0.2s;
  }
  #stitch-list .dropdown:nth-of-type(12) .category {
    transition-delay: 0.22s;
  }
  #stitch-list .dropdown:nth-of-type(13) .category {
    transition-delay: 0.24s;
  }
  #stitch-list .dropdown:nth-of-type(14) .category {
    transition-delay: 0.26s;
  }
  #stitch-list .dropdown:nth-of-type(15) .category {
    transition-delay: 0.28s;
  }
  #stitch-list .dropdown:nth-of-type(16) .category {
    transition-delay: 0.3s;
  }
  #stitch-list .dropdown:nth-of-type(17) .category {
    transition-delay: 0.32s;
  }
  #stitch-list .dropdown:nth-of-type(18) .category {
    transition-delay: 0.34s;
  }
  #stitch-list .dropdown:nth-of-type(19) .category {
    transition-delay: 0.36s;
  }
  #stitch-list .dropdown:nth-of-type(20) .category {
    transition-delay: 0.38s;
  }
  #stitch-list .dropdown:nth-of-type(21) .category {
    transition-delay: 0.4s;
  }
  #stitch-list .dropdown:nth-of-type(22) .category {
    transition-delay: 0.42;
  }
  #stitch-list .dropdown:nth-of-type(23) .category {
    transition-delay: 0.44;
  }
  #stitch-list .dropdown:nth-of-type(24) .category {
    transition-delay: 0.46s;
  }
}
/* Tablet */
@media only screen and (min-width: 600px) {
  #navigation {
    z-index: 10000;
  }
  #navigation nav {
    background: #fff;
    z-index: 1000;
  }
  #navigation.clicked {
    height: 14.5em;
  }
  #navigation .upgrade {
    position: absolute;
    opacity: 1;
    transform: none;
    top: 1em;
    width: 14.46153846em;
    right: 5em;
  }
}
@media only screen and (min-width: 700px) {
  #navigation.clicked {
    height: 24.5em;
  }
}
/* Small Desktop */
@media only screen and (min-width: 1200px) {
  #navigation {
    display: contents;
    height: 4.6em;
    box-shadow: none;
    left: 0;
    top: 4.7em;
    height: 100%;
    position: fixed;
    z-index: 1000000;
  }
  #navigation nav {
    padding: 0 1.2em;
    background-color: #fff;
    box-sizing: content-box;
    position: fixed;
    left: 0;
    top: 4.55em;
    bottom: 0;
    padding-right: 0.25em;
    z-index: 1000;
  }
  #navigation header {
    font-size: inherit;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 4.6em;
    padding: 0 1.2em;
    position: fixed;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0px 36px 80px rgba(0, 0, 0, 0.01), 0px 16.6439px 36.9864px rgba(0, 0, 0, 0.00741675), 0px 9.52326px 21.1628px rgba(0, 0, 0, 0.00626781), 0px 5.78055px 12.8457px rgba(0, 0, 0, 0.00539948), 0px 3.48303px 7.74008px rgba(0, 0, 0, 0.00460052), 0px 1.93958px 4.31018px rgba(0, 0, 0, 0.00373219), 0px 0.834199px 1.85378px rgba(0, 0, 0, 0.00258325);
  }
  #navigation .logo {
    margin: 0;
    margin-right: 2.55em;
  }
  #navigation form {
    height: 2.4em;
    width: 17.2em;
  }
  #navigation .cs-form-wrapper {
    margin: 0;
    margin-right: auto;
    flex-direction: row;
  }
  #navigation .cs-tags {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
  #navigation .cs-tags:hover .tags-list {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
    pointer-events: all;
  }
  #navigation .cs-tags-button {
    border: none;
    padding: 0 0.75rem;
    opacity: 1;
    transform: none;
    pointer-events: all;
  }
  #navigation .tags-list {
    overflow: auto;
    width: 40vw;
    max-width: 37.5rem;
    top: 100%;
    max-height: 62.5rem;
    height: auto;
    left: 50%;
    transform: translateX(-50%) translateY(5rem);
  }
  #navigation .tags-list:hover .tags-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
  #navigation .cs-tag {
    transition: background-color 0.3s, color 0.3s;
  }
  #navigation .cs-tag:hover,
  #navigation .cs-tag.cs-active {
    background-color: var(--primary);
    color: #fff;
  }
  #navigation .search {
    opacity: 1;
    transform: none;
    margin-right: auto;
    pointer-events: all;
  }
  #navigation .search input {
    margin: 0;
  }
  #navigation .profile-info {
    display: flex;
    align-items: center;
    margin-right: 1.2em;
    position: relative;
  }
  #navigation .profile-info:hover .account-dropdown {
    transform: scaleY(1);
    opacity: 1;
  }
  #navigation .profile-info:hover .account-dropdown li a {
    transform: translateY(0);
    opacity: 1;
  }
  #navigation .profile-info #profile-name {
    display: none;
  }
  #navigation .profile-info picture {
    margin-right: 0.4em;
    display: block;
    position: relative;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    overflow: hidden;
  }
  #navigation .profile-info picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #navigation .profile-info .carrot {
    width: 1em;
    height: 1em;
  }
  #navigation .profile-info .account-dropdown {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 10.625rem;
    background: #fff;
    padding: 1.25rem 0.625rem;
    border-radius: 0.5rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    overflow: hidden;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
  }
  #navigation .profile-info .account-dropdown li {
    list-style: none;
  }
  #navigation .profile-info .account-dropdown li:nth-of-type(2) a {
    transition-delay: 0.05s;
  }
  #navigation .profile-info .account-dropdown li:nth-of-type(3) a {
    transition-delay: 0.1s;
  }
  #navigation .profile-info .account-dropdown li:nth-of-type(4) a {
    transition-delay: 0.15s;
  }
  #navigation .profile-info .account-dropdown li:nth-of-type(5) a {
    transition-delay: 0.2s;
  }
  #navigation .profile-info .account-dropdown li a {
    display: block;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 2rem;
    padding: 0 0.625rem;
    border-radius: 0.25rem;
    opacity: 0;
    transform: translateY(-0.3125rem);
    transition: opacity 0.3s, transform 0.3s;
    /* active class when we are on that page */
  }
  #navigation .profile-info .account-dropdown li a:hover {
    background-color: #F7F7F7;
  }
  #navigation .profile-info .account-dropdown li a.active {
    background-color: #F7F7F7;
  }
  #navigation .upgrade {
    position: relative;
    top: auto;
    right: 0;
    line-height: 2.61538462em;
    height: 2.61538462em;
  }
  #navigation .agency-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    transition: background-color 0.3s;
  }
  #navigation .agency-toggle:hover {
    background-color: #dddddd;
  }
  #navigation .agency-toggle:hover .agency-dropdown {
    transform: scaleY(1);
    opacity: 1;
  }
  #navigation .agency-toggle:hover .agency-dropdown li a {
    transform: translateY(0);
    opacity: 1;
  }
  #navigation .agency-toggle .arrow {
    width: 1.5625rem;
    height: auto;
    display: block;
  }
  #navigation .agency-toggle .agency-dropdown {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 10.625rem;
    background: #fff;
    padding: 1.25rem 0.625rem;
    border-radius: 0.5rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    overflow: hidden;
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
  }
  #navigation .agency-toggle .agency-dropdown li {
    list-style: none;
  }
  #navigation .agency-toggle .agency-dropdown li:nth-of-type(2) a {
    transition-delay: 0.05s;
  }
  #navigation .agency-toggle .agency-dropdown li:nth-of-type(3) a {
    transition-delay: 0.1s;
  }
  #navigation .agency-toggle .agency-dropdown li:nth-of-type(4) a {
    transition-delay: 0.15s;
  }
  #navigation .agency-toggle .agency-dropdown li:nth-of-type(5) a {
    transition-delay: 0.2s;
  }
  #navigation .agency-toggle .agency-dropdown li a {
    display: block;
    text-align: right;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 2rem;
    padding: 0 0.625rem;
    border-radius: 0.25rem;
    opacity: 0;
    transform: translateY(-0.3125rem);
    transition: opacity 0.3s, transform 0.3s;
  }
  #navigation .agency-toggle .agency-dropdown li a:hover {
    background-color: #F7F7F7;
  }
  #navigation .agency-toggle .agency-dropdown li a.active {
    background-color: #F7F7F7;
  }
}
/* Large Desktop Styles */
@media only screen and (min-width: 1300px) {
  #navigation {
    width: 12.35em;
  }
  #navigation .profile-info picture {
    margin-right: 0.6em;
  }
  #navigation .profile-info #profile-name {
    display: block;
    font-size: 0.65em;
    color: var(--neutralBody);
    margin-right: 0.61538462em;
  }
}
@media only screen and (min-width: 1300px) {
  #navigation header {
    font-size: 90%;
  }
  #navigation nav {
    top: 4.05em;
  }
}
/*-- -------------------------- -->
<---         Hamburger          -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  /* Hamburger Menu */
  #hamburger {
    position: absolute;
    top: 1.25em;
    right: 0.75em;
    height: 0.5em;
    font-size: 1em;
    background: transparent;
    border: none;
    width: 0.75em;
  }
  #hamburger span {
    height: 2px;
    background: #332d2d;
    display: block;
    width: 0.75em;
    position: absolute;
    left: 0;
    border-radius: 1px;
    transform-origin: center;
  }
  #hamburger span:nth-of-type(1) {
    top: 0;
    transition: transform 0.3s, top 0.3s;
  }
  #hamburger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.3s, opacity 0.3s;
  }
  #hamburger span:nth-of-type(3) {
    bottom: 0;
    transition: transform 0.3s, top 0.3s;
  }
  #hamburger.clicked span:nth-of-type(1) {
    top: 50%;
    transform: rotate(45deg) translateY(-70%);
  }
  #hamburger.clicked span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
    left: 0.5em;
    opacity: 0;
  }
  #hamburger.clicked span:nth-of-type(3) {
    bottom: 50%;
    transform: rotate(-45deg) translateY(50%);
  }
}
/* Large Desktop */
@media only screen and (min-width: 1200px) {
  #hamburger {
    display: none;
  }
}
/*-- -------------------------- -->
<---        Stitch List         -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  .stitch-header {
    font-size: 0.7em;
    color: var(--neutralLabel);
    text-transform: uppercase;
    line-height: 1.14285714;
    margin-bottom: 1.14285714em;
    display: block;
    margin-top: 1.71428571em;
  }
  #stitch-list {
    margin-top: 0.8em;
    padding: 0;
    overflow-y: scroll;
    margin-bottom: 0;
    height: 10em;
    /* Drop down button */
  }
  #stitch-list li {
    list-style: none;
  }
  #stitch-list .dropdown {
    border-radius: 0.2em;
    margin-bottom: 0.4em;
    height: 1.8em;
    overflow: hidden;
    /* Stitch Options List */
  }
  #stitch-list .dropdown.open {
    height: auto;
    background-color: #F7F7F7;
    position: relative;
  }
  #stitch-list .dropdown.open .category {
    font-weight: bold;
    color: #14142B;
  }
  #stitch-list .dropdown.open .category img {
    transform: rotate(180deg);
  }
  #stitch-list .dropdown.open ul {
    height: auto;
  }
  #stitch-list .dropdown .category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 2.57142857em;
    width: 100%;
    padding-left: 0.85714286em;
    padding-right: 0.85714286em;
    font-size: 0.7em;
    color: var(--neutralLabel);
    box-sizing: border-box;
    /* Transition Properties */
    transition: color 0.3s, transform 0.3s, opacity 0.3s;
    opacity: 0;
    transform: translateY(0.57142857em);
  }
  #stitch-list .dropdown .category.clicked {
    transform: translateY(0);
    opacity: 1;
  }
  #stitch-list .dropdown .category img {
    transition: transform 0.3s;
  }
  #stitch-list .dropdown ul {
    padding: 0 0.6em;
    position: relative;
    z-index: 1000;
  }
  #stitch-list .dropdown ul li {
    list-style: none;
    font-size: 1em;
    margin-bottom: 0.4em;
  }
  #stitch-list .dropdown ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: var(--neutralLabel);
    font-size: 0.7em;
    line-height: 1.71428571;
    transition: padding 0.3s;
  }
  #stitch-list .dropdown ul li a.active {
    color: #14142B;
    font-weight: bold;
  }
  #stitch-list .dropdown ul li a.active:hover {
    padding: 0;
  }
  #stitch-list .dropdown ul li a:hover {
    padding-left: 0.42857143em;
  }
  #stitch-list .dropdown ul li a .cat-options {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 0 0.42857143em;
    line-height: 1.71428571;
    background: #E1E1E1;
    color: #616161;
    font-weight: 600;
    border-radius: 7.07142857em;
  }
}
/* Larger Phone */
@media only screen and (min-width: 600px) {
  #stitch-list {
    height: 14.5em;
  }
}
/* Desktop - Includes Page layout flexbox code */
@media only screen and (min-width: 1200px) {
  body {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #main {
    width: 73%;
    font-size: 62%;
  }
  #stitch-list {
    background: #fff;
    height: 60%;
    font-size: 85%;
    width: 12.35em;
    margin-top: 0;
    padding-right: 0.75em;
    overflow-y: scroll;
  }
  #stitch-list .dropdown:hover {
    cursor: pointer;
  }
  #stitch-list .dropdown ul {
    overflow-y: hidden;
  }
  #stitch-list .dropdown .category {
    opacity: 1;
    transform: none;
  }
  #stitch-list .dropdown .category:hover {
    background-color: #F7F7F7;
  }
}