/*--------------------------------------------------------------
# GENERIC
--------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
}

.link {
  cursor: pointer;
}

/*--------------------------------------------------------------
# NAV
--------------------------------------------------------------*/
.navbar {
  padding: 0;
  padding-top: .3rem;
}
.page-logo-maker .mm-topbar,
.brand-in-a-box .mm-topbar {
  position: absolute;
  z-index: 1;
}
.page-logo-maker .mm-topbar,
.brand-in-a-box .mm-topbar {
  /* background-color: white; */
}
.home.page-logo-maker .mm-topbar {
  background-color: white;
}
.navbar-brand {
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(10px + 1vw);

  -webkit-transition: color .1s ease .4s;
  transition: color .1s ease .4s;

  width: 148px;
  background-image: url('/assets/images/home/Mojomox-logo-red.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 25px;
}
.navbar-brand span {
  position: absolute;
  top: -100px;
}
.page-logo-maker .navbar-brand,
.brand-in-a-box .navbar-brand {
  /* better than white for all 3 cases: lightgray (catalog), black (landing), mixed (home v4) */
  color: #cdcdcd;
}
.navbar-brand img,
.home.page-logo-maker .navbar-brand img {
  width: 100%;
}
/* catalog page */
.brand-in-a-box.templates-page .navbar-brand {
  color: #333;
}
.navbar-brand:focus,
.navbar-brand:hover {
  /* purple */
  color: #6800ff;
  /* red */
  color: #fa4600;
}
.navbar-nav li {
  margin: 0;
  border-bottom: 1px solid #1a1a1a;
}
.navbar-nav li:last-of-type {
  border-bottom: 0;
}
.navbar-nav > li > a {
  font-weight: 450;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .05em;
  text-decoration: none;
  padding-left: 0;
  padding-right: 0;
  color: #000;
  text-transform: uppercase;

  -webkit-transition: color .1s ease .2s;
  transition: color .1s ease .2s;
}
.navbar-nav > li > a,
.dropdown-menu a,
.dropdown-item {
  font-size: calc(.6rem + 0.3vw);
}
.page-logo-maker .navbar-nav > li > a,
.page-logo-maker .navbar-nav li span.open-sub,
.brand-in-a-box .navbar-nav > li > a,
.brand-in-a-box .navbar-nav li span.open-sub {
  /* color: rgba(255,255,255,.65); */
}
.brand-in-a-box.templates-page .navbar-nav > li > a,
.brand-in-a-box.templates-page .navbar-nav li span.open-sub {
  color: #333;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav li span:hover.open-sub,
.navbar-nav li span:focus.open-sub,
/* specifically for catalog page */
.brand-in-a-box.templates-page .navbar-nav > li > a:hover,
.brand-in-a-box.templates-page .navbar-nav > li > a:focus,
.brand-in-a-box.templates-page .navbar-nav li span:hover.open-sub,
.brand-in-a-box.templates-page .navbar-nav li span:focus.open-sub {
  /* red */
  color: #fa4600;
}
/* specifically for home movies section */
.brand-in-a-box .navbar-nav > li > a:hover,
.brand-in-a-box .navbar-nav > li > a:focus,
.brand-in-a-box .navbar-nav li span:hover.open-sub,
.brand-in-a-box .navbar-nav li span:focus.open-sub {
  /* light gray */
  color: #d6d6d6;
}
/* second-tier menu li */
.dropdown-menu {
  /* overwrites bootstrap */
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.dropdown-item {
  font-weight: 450;
  font-size: 14px;
  text-decoration: none;
  padding: .3rem .7rem .2rem;
  padding-left: 1.5rem;
  color: black;
  border-top: 1px solid white;
}
.page-logo-maker .dropdown-item,
.brand-in-a-box .dropdown-item {
  color: white;
}
.dropdown-item.active, .dropdown-item:active {
  background-color: rgba(0,0,0,.2);
}
.dropdown-item:focus, .dropdown-item:hover {
  color: #000;
}
/* bootstrap toggle */
.navbar-toggler {
  padding: 0;
  margin: .3rem 0;
  font-size: 1.5rem;
  line-height: 1.3;
}
.navbar-toggler-icon {
  display: inline-block;
  width: 3rem;
  height: 100%;
  vertical-align: baseline;
  text-align: right;
  font-family: 'BauhausSansExGX' !important;
  background: none;
  line-height: 1.4;
  color: black;
}
.brand-in-a-box.templates-page .navbar-toggler-icon {
  color: #333;
}

.page-app.pdfLayout, .page-app.pdfLayout .logo-box {
  background-color:  transparent;
}
.page-app.pdfLayout nav, .page-app.pdfLayout .bg-success, .page-app.pdfLayout .lm-sidebar,
.page-app.pdfLayout .logo-kit,.page-app.pdfLayout .color-kit,.page-app.pdfLayout .type-kit,.page-app.pdfLayout .templates-kit,
.page-app.pdfLayout .mockup-section, .page-app.pdfLayout footer, .page-app.pdfLayout .color-preview, .page-app.pdfLayout .mm-form-page {
  display: none;
}

.clone-parent {
  position:relative;
}


@media (min-width: 768px) {
  .page-logo-maker .mm-topbar,
  .brand-in-a-box .mm-topbar {
    /* only home needed */
    /* background-color: transparent; */
  }
}
@media (max-width: 767px) {
  .navbar-nav {
    background: #f3f3f3;
  }
  .blog .navbar-nav {
    background: #f3f3f3;
  }
  .home .navbar-nav {
    background: white;
  }
  .navbar-brand {
    height: 20px;
  }
}
@media (min-width: 768px) {
  .navbar {
    padding-top: .4rem;
  }
  .navbar-expand-md .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
  }
  .navbar-brand {
    font-size: calc(7px + 1vw);
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: .7rem;
    padding-left: .7rem;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0.3rem 0 .4rem;
  }
  .home .navbar-expand-md .navbar-nav .nav-link {
    color: black;
  }
  .navbar-nav {
    border-top: 0;
  }
  .navbar-nav li {
    border-bottom: 0;
  }
  .dropdown-menu {
    background: white;
  }
  .navbar-nav > li > a,
  .dropdown-menu a,
  .dropdown-item {
    font-size: calc(.6rem + 0.3vw);
  }
  .page-logo-maker .dropdown-menu,
  .brand-in-a-box .dropdown-menu {
    background: black;
  }
  .dropdown-item {
    padding-left: .7rem;
  }
}

/*--------------------------------------------------------------
# LOGO MAKER
--------------------------------------------------------------*/

#saving {
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: #333;
  color: white;
  z-index: 10000;
  font-size: calc(.6rem + 0.3vw);
  padding: .3rem 2rem;
  border-radius: 2rem;
}
div.unwind {
  font-family: 'BauhausSansExGX', Arial;
  font-weight: 450;
}
.container.container-large {
    /* padding-bottom: 40px; */
}
.block-cols-no-space {
  /* not used w sidebar */
    margin-bottom: 0;
}
/* ---------------------- header section * /
/* brandname input section */
.page-logo-maker .lm-app-settings,
.page-app .lm-app-settings {
  background: rgba(0,0,0,.05);
}
.page-logo-maker .lb-home {
  padding-top: 3vw;
  padding-bottom: 3vw;
}
.explainer {
  font-size: .7rem;
  color: rgba(255,255,255,.7);
  font-weight: 300;
}
.explainer a {
  color: rgba(255,255,255,.7);
}
textarea.mm-form-input,
input.mm-form-input {
  /* used to be 23px instead of 11; smaller for multiline */
  font-size: calc(11px + .7vw);
  line-height: 37px;
  height: 3.2vw;
  line-height: 1.4;
}
textarea.mm-form-input::placeholder,
input.mm-form-input::placeholder {
  /* prevent cutoff */
  overflow: visible;
}
textarea#brandname {
  width:  100%;
  background-color: white;
  padding: 7px 5px;
  /* 2 lines + padding minus a bit too much padding at bottom */
  height: calc(2em + 9px);
  line-height:  1;
  border-radius: .4rem;
}
input#brandname.mm-form-input {
  margin-left: 0;
  padding-left: .6em;
  width: 100%;
  /* lh: needed for umlaut cutoff, can't do border-bottom but needs bg img */
  height: auto;
  /* line-height: 2; */

  font-weight: 500;
  background: #fff;
}
.page-logo-maker input#brandname.mm-form-input,
.input-unit-v3 input#brandname.mm-form-input,
.page-logo-maker input#logoIdeasSearch.mm-form-input {
  font-weight: 400;
  /* prevent cut off */
  /* line-height: 2; */
  /* same height as btn on mobile */
  /* height: 100%; cuts off text input > do padding and auto height instead*/
  height: auto;
}

.get-these-fonts,
.get-these-logos {
  cursor: pointer;
  color: rgba(0,0,0,.6);
  background-color: rgba(255,255,255,.6);
  padding: 0.3rem 0.6rem 0.3rem;
  border-radius: 1rem;
  letter-spacing: .02rem;
  font-size: 80%;
  -webkit-transition: background-color .5s ease, color .5s ease;
  transition: background-color .5s ease, color .5s ease;
}
.get-these-fonts:hover,
.get-these-logos:hover {
  background-color: rgba(255,255,255,.9);
  color: rgba(0,0,0,.9);
}
.feat-logo-icons .get-these-logos {
  border: 1px solid #333;
  color: #333;
  background-color: transparent;
}
.feat-logo-icons {
  background: rgba(255,212,23,1);
  margin-bottom: 10px;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  gap: .1rem;
  padding: .8rem .5rem .8rem .8rem;
  justify-content: space-between;
  text-decoration: none;
}
.feat-logo-icons:hover,
.feat-logo-icons:focus {
  text-decoration: none;
  background: rgba(255,222,23,1);
}
.feat-logo-icons label {
  width: auto !important;
}
.feat-logo-icons .tagline {
  font-size: .6rem;
  color: #fa4600;
  line-height: 1.2;
  width: 50%;
  font-weight: 600;
  text-transform: uppercase;
}

.page-logo-maker input#logoIdeasSearch.mm-form-input {
  background: white;
  width: 100%;
  padding: 1rem 1rem 1rem 2rem;
  border-radius: 3rem 0 0 3rem;
}
input#brandname.mm-form-input::placeholder {
  font-size: calc(7px + .9vw);
  color: rgba(0,0,0,.4);
  /* letter-spacing: -.035em; */
  font-weight: 400;
  /* prevent cutoff */
  overflow: visible;
}
input#brandname.form-control::placeholder {
  /* prevent cutoff */
  overflow: visible;
}
.page-app input#brandname.mm-form-input {
  font-size: calc(7px + .9vw);
  padding-top: 5px;
  font-weight: 400;
  letter-spacing: 0;
  padding-left: .55rem;
  /* margin-bottom: 4px; */
  border-radius: 2px;
}
/* form unit; company name inputs */
.brandname-input {
  display: flex;
  /* for label to be full width */
  flex-wrap: wrap;
  gap: 1rem;
  /* architecture page */
  justify-content: space-between;
}
.brandname-input label {
  flex: 0 0 100%;
}
.brandname-input input[type=text] {
  border: 1px solid rgba(0,0,0,.5);
  width: 100%;
  padding: 0.3rem 0.4rem;
  margin-bottom: .6em;
}
.form-unit {
  background-color: white;
  padding: 4vw 3vw 5vw;
  margin: 3vw 0;
}
.brandname-input.wide input[type=text] {
  /* folds on tablet when bigger */
  width: 70%;
  padding: 0.3rem 0.4rem;
  margin: 0;
}

/* short steps above company name input bar */
.short-steps {
  padding: 3rem 0 0;
  font-size: calc((1.3 - 1) * 1.2vw + 1rem);
}
.short-steps.version-2 {
  padding: 0;
  padding-bottom: 3vw;
  font-size: calc((1.3 - 1.15) * 1.1vw + .8rem);
  display: flex;
}
.short-steps span {
  margin: 0 .4em;
  letter-spacing: -.03em;
  color: rgba(0,0,0,.8);
  font-weight: 420;
}
.short-steps span.highlighted {
  color: rgba(250,70,0,1);
}
/* larger phone, used to be 1024 */
@media (max-width: 767px) {
  .short-steps {
    padding: 2rem 0 2rem;
    font-size: calc((2.3 - 1) * 1.2vw + .6rem);
  }
  .short-steps span {
    display: block;
  }
  .short-steps.version-2 {
    flex-direction: column;
    align-items: start;
  }
  .short-steps span {
    margin: 0 1em 0 0;
  }
  .form-unit {
    padding: 6vw;
  }
  .brandname-input.wide input[type=text] {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2vw;
  }
  input#brandname.mm-form-input::placeholder {
    /* font-size: calc(12px + 1.3vw); */
    font-size: calc(9px + .7vw);
  }
  .input-unit-v3 input#brandname.mm-form-input {
    /* font-size: calc(12px + 1.3vw); */
    font-size: calc(9px + .7vw);
    padding: 0.1rem 0.1rem 0.1rem 1rem;
    height: 100%;
  }
  .page-logo-maker input#logoIdeasSearch.mm-form-input {
    padding: 1rem 1rem 0.8rem 1rem;
    border-radius: 3rem;
  }
}
/* logo options */
.view-options-container {
  display: flex;
}
.view-option {
  flex-basis: 0;
  flex-grow: 1;
  position: relative;
  outline: 1px solid rgba(255,255,255,0);
}
.view-option:not(:first-child) {
  margin-left: .6vw;
}
.multiline-container {
  padding-bottom: 0.4rem;
}
.option-box,
.lm-prepare-lowres,
.lm-download-lowres,
.cta-pill,
.cta-pill a {
  border-radius: 3rem;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-transform: uppercase;
  /* ~article CTAs + account cta pills too */
  font-size: calc((1.05 - 1) * 1.2vw + .8rem);
  line-height: 1;
  letter-spacing: .03rem;
  font-weight: 420;
  opacity: 1;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  padding: .5rem 1.3rem .5rem;

  text-decoration: none;
  border: 0;
}
.cta-pill a {
  color: white;
  text-decoration: none;
  /* to not apply padding twice: button and then link inside button */
  padding: 0;
}
/* keep rem, not em, so they stay absolute numbers not relative when stacked into each other */
.cta-pill.superbig,
.cta-pill.superbig a {
  font-size: 1.8rem;
  font-size: calc((1.05 - 1) * 1.2vw + 1.8rem);
}
/* padding might be able to go one up to both a and no a */
.cta-pill.superbig a {
  padding: 0.5rem 0.7rem;
}
.cta-pill.big,
.cta-pill.big a {
  font-size: 1.1rem;
  font-size: calc((1.05 - 1) * 1.2vw + 1.1rem);
  letter-spacing: -.01rem;
}
.cta-pill.medium,
.cta-pill.medium a {
  font-size: .9rem;
  font-size: calc((1.05 - 1) * 1.2vw + .85rem);
}
.cta-pill.small,
.cta-pill.small a {
  font-size: .7rem;
  font-size: calc((1.05 - 1) * 1.2vw + .65rem);
  padding: 0.5rem 1.3rem 0.5rem;
}
/* ––––––––––– button display options */
.cta-pill.short {
  display: inline-block;
  width: fit-content;
}

/* SVG Color Choice Modal Styling */
.svg-color-preview-brand,
.svg-color-preview-original {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
}

.svg-color-preview-brand svg,
.svg-color-preview-original svg {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
}

.svg-color-preview-brand {
  color: var(--primary-color, #000);
}

.svg-color-notification {
  margin-top: 10px;
  border-radius: 6px;
}

/* Color swatch text contrast */
.color-swatch-box {
  --text-color: #000000; /* Default text color */
}

/* Removed color: inherit !important rule to allow JavaScript inline styles for dynamic contrast */

/* Allow all palette captions to use dynamic contrast colors from JavaScript */

.color-swatch-box .code {
  color: inherit !important;
}
.cta-pill.full {
  width: 100%;
}
.cta-pill.full-height {
  height: 100%;
}
/* when inside span elements > otherwise they stack vs go inline */
.cta-pill.inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-gap: 4px;
}
.cta-pill.right {
  float: right;
}
.cta-pill.center {
  align-items: center;
}
.cta-pill.spaced {
  margin: 1rem;
}
.cta-pill.readable-text {
  letter-spacing: -.02rem;
  text-transform: inherit;
}

.option-box:hover,
.lm-prepare-lowres:hover,
.lm-download-lowres:hover,
.cta-pill:hover,
.cta-pill.black:hover,
.cta-pill.mid-gray:hover,
.cta-pill.dark-gray:hover,
.cta-pill.red:hover {
  cursor: pointer;
  opacity: .8;

  text-decoration: none;
  border: 0;
}
.cta-pill a:hover {
  color: #fff;
}
.option-box.black,
.lm-prepare-lowres.black,
.lm-download-lowres.black,
.cta-pill.black {
  background: #1e1e1e;
  color: #fff;
  border: 0;
}
.cta-pill.black.transparent {
  background: rgba(219,219,219,.2);
}
/* download btns in toolbar */
.lm-row-settings .lm-prepare-lowres.black {
  line-height: 1.2;
  width: 100%;
  margin: 0;
  margin-bottom: 8px;
}
.option-box.black a {
  color: #fff;
  text-decoration: none;
}
.lm-prepare-lowres.gray,
.lm-download-lowres.gray,
.cta-pill.gray {
  background: rgba(219,219,219,.5);
  color: #fff;
}
.cta-pill.mid-gray {
  background: rgba(0,0,0,.35);
  color: #fff;
}
.lm-prepare-lowres.dark-gray,
.lm-download-lowres.dark-gray,
.cta-pill.dark-gray {
  background: rgba(0,0,0,.6);
  color: #fff;
}
.lm-prepare-lowres.white,
.lm-download-lowres.white,
.cta-pill.white {
  background: rgba(255,255,255,.9);
  color: rgba(0,0,0,.9);
}
.cta-pill.red {
  background: rgba(250,70,0,1);
  color: #fff;
}
.cta-pill.red a:hover {
  color: #fff;
}
.cta-pill.green {
  background: #28af23;
  color: #fff;
}
.cta-pill.blue {
  background: #2328a0;
  color: #fff;
}
.cta-pill.outline,
.cta-pill.outline a {
  border: 1px solid rgba(0,0,0,.3);
  color: rgba(0,0,0,.8);
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.cta-pill.outline a {
  border: 0;
}
.cta-pill.outline:hover {
  background: rgba(0,0,0,.1);
  border-color: white;
}
/* disabled */
.lm-prepare-lowres.gray:hover,
.lm-download-lowres.gray:hover {
  cursor: default;
  opacity: 1;
}
.option-box.white {
    background: white;
    -webkit-box-shadow:inset 0px 0px 0px 2px #b1b1b1;
    -moz-box-shadow:inset 0px 0px 0px 2px #b1b1b1;
    box-shadow:inset 0px 0px 0px 2px #b1b1b1;
    color: #333;
}
.option-box.color {
    background: rgb(196,16,16);
    background: linear-gradient(90deg, rgba(196,16,16,1) 0%, rgba(170,165,26,1) 25%, rgba(16,149,41,1) 50%, rgba(71,83,221,1) 76%, rgba(185,28,169,1) 100%);
    color: #fff;
}
/* similar to pill but text with arrow */
.cta-arrow {
  position: relative;
  padding: .5rem 1rem;
  padding-left: 1.2rem;
  text-decoration: none;
  font-weight: 430;
  border-bottom: 2px solid rgba(0,0,0,.1);
  display: block;
  color: rgba(0,0,0,.45);
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}
.cta-arrow::before {
  content: '→';
  color: rgba(0,0,0,.45);
  position: absolute;
  transform: translate(-50%, -50%);
  top: calc(50%);
  left: 6px;
  text-decoration: none;
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}
.cta-arrow:hover,
.cta-arrow:focus {
  border-bottom: 1px solid;
  text-decoration: none;
  color: rgba(0,0,0,.4);
}
.cta-arrow:hover::before,
.cta-arrow:focus::before {
  border-bottom: 0;
  color: rgba(0,0,0,.4);
}
body {
  background-color: rgba(0,0,0,.04);
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;
}
.option-box em {
  position: absolute;
  top: -100vh;
}
/* centered buttons */
.load-options-container {
  display: flex;
  justify-content: center;
}
.ex-label {
  -webkit-box-shadow: 2px 2px 30px 1px rgba(0,0,0,.4);
  box-shadow: 2px 2px 30px 1px rgba(0,0,0,.4);
  /* purple */
  background: #6800ff;
  /* red */
  background: #fa4600;
  border-radius: 20em;
  color: white;
  font-size: calc(8px + .5vw);
  line-height: 1.3;
  font-weight: 420;
  padding: 11px 18px;
  width: max-content;

  width: intrinsic;
  width: -moz-max-content;
  width: -webkit-max-content;
}
.ex-label.black {
  background: black;
}
.hover-label {
  position: absolute;
  z-index: 1;
  transform: translateY(-70%);
  margin-left: 1.6vw;

  /* duration | function | delay | animation-iteration-count | animation-direction  */
  animation: nudge .8s ease-out 2s infinite alternate;
}
.hover-label.position-2 {
  margin-left: 0;
}
.page-logo-maker .hover-label {
  transform: translateY(-90%);
  margin-left: -0.4rem;
}
.brand-in-a-box .hover-label {
  margin-left: 8.6vw;
}
.page-app .hover-label {
  margin-left: -5px;
  top: -3px;
}
.tipp-label {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;

  background: #c5c5c5;
  background: rgba(0,0,0,.3);
  /* fa4600 */
  box-shadow: 2px 2px 10px 1px rgb(0 0 0 / 10%);
}
@keyframes nudge {
  0% {
    transform: translateY(-90%);
  }
  20% {
    transform: translateY(-66%);
  }
  40% {
    transform: translateY(-90%);
  }
  100% {
    transform: translateY(-90%);
  }
}
.hover-label em,
.tipp-label em {
  color: #6800ff;
  color: #fa4600;
  position: absolute;
  top: 73%;
  font-size: 21px;
  font-style: normal;
}
.black.hover-label em {
  color: black;
}
.tipp-label em {
  /* color: #c5c5c5; */
  color: rgba(250,70,0,1);
  color: #b3b3b3;
}
.view-option:hover .hover-label {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}
.dropdown-options-container {
    position: relative;
    z-index: 2;
    height: 3.2vw;
    overflow: scroll;
}
.dropdown-options-container.full-list {
    overflow: visible;
    height: auto;
}
.industry-option {
    border-bottom: 2px solid #b1b1b1;
    background: white;
    height: 3.2vw;
    font-size: 1.05em;
    line-height: 1;
    padding: .7em .4em;
}
.industry-option:hover {
    background: #e6e6e6;
    color: rgba(0,0,0,.65);
}
.industry-option.grayed-out {
    color: rgba(0,0,0,.4);
    padding-top: .5em;
}
.industry-option .not-yet {
    text-transform: uppercase;
    font-size: .5em;
    color: rgba(0,0,0,.4);
}
.industry-option.view-active {
    color: rgba(0,0,0,.85);
}
.industry-option.view-active:hover {
    background: white;
}
.lm-row-settings ul {
  padding: 0px;
  margin-bottom: 0;
}
.lm-row-settings ul + ul,
.lm-row-settings .lm-btn-row + .lm-btn-row,
.logo-svg-container {
  margin-top: 3px;
}

.selected-element {
    border: 1px dashed gray;
    margin: -1px;
}
.clear-element {
    position: absolute;
    top: 16px;
    right: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    border: 1px dashed magenta;
    color: magenta;
    padding: 5px 4px 2px;
}
.clear-element em {
    font-style: normal;
}
.box-white .clear-element {
    color: rgba(119,119,119,1);
}
/* color scroll */
.select-color-presets {
  height: 26vh;
  overflow-y: scroll;
  display: grid;
  gap: 2px;
}
.select-color-presets::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}
.select-color-presets::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: rgba(0,0,0,.2);
  border: 2px solid #e5e5e5;
}
/* ––––––––––––––––– logo maker features */
.logo-maker-features {
  padding: 1rem 0 2rem;
}
.logo-maker-features.last-on-page {
  /* /logo-maker: fill margin top gap from footer */
  margin-bottom: -3vw;
  /* /logo-maker: pull closer to feature before last */
  margin-top: -3vw;
}
.container-fluid.white,
.container-lg.white,
.logo-maker-features.white {
  background: white;
}
.logo-maker-features.gray {
  /* default bg */
}
.logo-maker-features.red {
  background: rgba(250,70,0,1);
  /* fa4600 */
}
.logo-maker-features-row a {
  border-left: 2px solid black;
  float: left;
  margin-top: 1rem;
  margin-bottom: 3rem;
  padding-left: 1rem;
}
.logo-maker-features-row a,
.logo-maker-features-row a h2,
.home .logo-maker-features-row a h3 {
  text-decoration: none;
  font-size: calc(.4rem + 1vw);
}
.home .logo-maker-features-row a h3 {
  margin-bottom: 2rem;
}
.logo-maker-features-row figure {
  margin-bottom: 0;
}
.lmlogo div.logo-glyph-container {
  display: inline-block;
  /* neu with claude, test */
  display: flex;
}
.logo-glyph {
  text-transform: uppercase;
  letter-spacing: initial !important;
}
.lmlogo div.logo-glyph-container .logo-glyph {
  /* default spacing between symbol and wordmark; must be em not rem so that it scales down */
  /* padding-right: .3em; */
  line-height: 1;
}
/* logo ideas page */
.one-oh-one .lmlogo div.logo-glyph-container .logo-glyph {
  /* otherwise symbol is pulled up */
  line-height: inherit;
}
.color-box-icon .lmlogo div.logo-glyph-container,
.phone-box-logo-icon .lmlogo div.logo-glyph-container {
  transform: none;
}

.lmlogo div.logo-glyph {
  cursor: pointer;
  display:  block;
  transform-origin: center;
  /* ensures svg grows with wordmark */
  height: 100%;
}
.logo-glyph svg {
  /* ensure centering vertically when next to wordmark */
  display: block;
}
.svg-logo-padding {
  /* padding-bottom: 2.8vw !important */
}
.story-icon .svg-logo-padding {
  /* padding-bottom: 0 !important; */
  /* padding-top: 0px !important; */
}
.logo-grayscale {
  filter: grayscale(1);
}
/* needs both containers to symbol and word line up in logo */
.word-row,
.logo-glyph-container {
  /* is added to prevent bottom cut off on logo png download */
  /* creates line diff line heights on diff logo locations like phone etc */
  /* padding-bottom: 1rem; */
}

.word-row {
  display:flex;
  flex-direction:row;
  justify-content: inherit; /* Inherit alignment from parent layout class */
  /* needed for 2 lines on choose-logo */
  line-height: 1.05;
  align-items:center;
}

#logo-flex-container {
  display:flex;
  /* overrides choose logo layouts */
  /* flex-direction:row; */
  align-items:center;
  /* default, also inline but not always */
  gap: .3em;
}

/* Layout alignment classes for choose-logo templates */
.logo-layout-row {
  display: flex;
  flex-direction: row;
  align-items: center; /* Vertical centering */
  justify-content: flex-start; /* Left-aligned when SVG is on left */
  text-align: left;
}

.logo-layout-row-reverse {
  display: flex;
  flex-direction: row-reverse;
  align-items: center; /* Vertical centering */
  justify-content: flex-end; /* Right-aligned when SVG is on right */
  text-align: right;
}

.logo-layout-column {
  display: flex;
  flex-direction: column;
  align-items: center; /* Horizontal centering for vertical layouts */
  justify-content: center; /* Vertical centering */
  text-align: center;
}

/* Make SVGs scale to fill their container height naturally */
.logo-glyph svg {
  height: 100%;
  width: auto; /* Maintain aspect ratio */
}

.wordSection {
  display:flex;
  flex-direction:column;
}


.lmlogo div.logo-glyph.selected {
  /* match alt letter selection */
  outline: 1px dashed gray;
  outline-offset: 10px;
}
/* larger phone, used to be 1024 */
@media (max-width: 767px) {
  .logo-maker-features.last-on-page {
    margin-top: -9vw;
  }
  .btn.btn-next-step {
    font-size: calc(13px + .5vw);
  }
}
/* ––––––––––––––––– end logo maker features */

/* ---------------------------------- logo kit */

/* larger phone, used to be 1024 */
@media (max-width: 767px) {
  .page-logo-maker .lm-app-settings {
    /* margin-bottom: 6vw; */
  }
  .logo-maker-features .container-lg {
    padding-left: 0;
    padding-right: 0;
  }
  .logo-maker-features-row a h2,
  .home .logo-maker-features-row a h3 {
    text-decoration: none;
    font-size: calc(.8rem + 1vw);
    margin-bottom: 0.5rem;
  }
  .ex-label {
    font-size: calc(11px + .5vw);
    line-height: 1.1;
    margin-top: -1px;
    max-width: 50vw;
  }
  .brand-in-a-box .hover-label {
    margin-left: 20%;
  }
  .option-box, .lm-prepare-lowres, .lm-download-lowres, .cta-pill {
    font-size: calc(8px + .5vw);
  }
  .cta-pill.right.mobile-left {
    float: left;
  }
  .scale-50 .lmlogo {
    /* reset */
    transform: scale(1);
  }
}
/* phone one col */
@media only screen and (max-width: 767px) {
    .option-box {
        height: auto;
        /* bigger padding for home */
        padding: 2em .3em 1.8em;
    }
    .lm-download-links .lm-prepare-lowres {
        margin-bottom: 20px;
    }
    .load-option .option-box,
    .load-options-container .option-box,
    .lm-download-links .lm-prepare-lowres,
    .lm-download-links .lm-download-lowres {
        font-size: calc(12px + .5vw);
        padding: 5vw 5vw 4.5vw;
        /* export page long CTAs */
        height: auto;
    }
    /* entire btn link */
    .lm-download-links .lm-download-lowres.green {
        padding: 0;
    }
    .lm-export-page .lm-download-lowres.green a {
        padding: 5vw 5vw 4.5vw;
    }
    .cta-pill a {
      font-size: calc((2 - 1) * 1.2vw + .6rem);
    }
    .page-logo-maker input#brandname.mm-form-input {
      font-size: calc(9px + 1.1vw);
      padding: 0.7rem;
    }
    .page-app input#brandname.mm-form-input {
      font-size: calc(14px + .9vw);
      min-height: auto;
    }
    .clear-element {
      top: 9px;
    }
    .lm-row-settings ul {
        margin-bottom: 0;
        /* out for image editor */
        /* margin-top: -7px; */
    }
    .lm-row-settings li {
        padding: .4em .2em .25em;
    }
    .lm-row-settings .select select {
        padding: 6px 0 0;
    }
    .lm-row-settings .select-colors {
        /* margin-top: 3px; */
    }
    .select-color-presets {
        padding: 0 5px 5px;
        width: 100%;
    }
    .lm-row-settings.lm-hr {
        padding-bottom: 12px;
    }
    /* content */
    .mm-form-page ol {
        margin-left: 14px;
    }
}
/* ---------------------- fixed steps section */
.lm-fixed-steps-section {
  background: red;
}
/* ---------------------- modals: logo maker: company name modal, also for pricing signup options modal, templates page: brand tester modal */
.modal.fade .modal-dialog {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* min-width: 64vw; */
  background: white;
}
.modal {
  position: absolute;
  background: #f2f2f2;
  /* more interesting */
  background: rgba(255, 255, 255, .4);
}
.modal.modal-initial-template {
  background: rgba(255,255,255,.8);
}
.page-app .modal .modal-dialog {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 50vw;
  background: white;
  border-radius: 0.6rem;
  padding: 1rem;
}
.page-app .modal .modal-dialog.modal-lg {
  min-width: 100vw;
  margin: 0;
  /* checkout */
  padding: 0;
}
.page-app .modal .modal-dialog.modal-lg .modal-body {
  padding: 0;
}
.page-app .modal .modal-dialog.pick-plan {
  background: #f2f2f2;
  height: 100%;
  top: 50%;
  max-height: none;
  border-radius: 0;
}
.modal-dialog-scrollable.pick-plan .modal-content {
  max-height: 100vh;
}
/* resize logo modal */
.page-app .modal.fade .modal-dialog.modal-resize {
  min-width: 42vw;
}
.modal h2 {
  font-weight: 500;
  letter-spacing: -.03em;
  font-size: calc((2.6 - 1) * 1.2vw + 1rem);
  margin-bottom: 7vh;
}
.modal .modal-resize label {
  font-size: calc(.55rem + .2vw);
}
.modal-resize .form-control {
  min-height: 46px;
  padding: 0.72rem 0.2rem 0.5rem 0.4rem;
  line-height: 2.4;
}
.modal-resize #feedbackPopupForm textarea.form-control {
  font-weight: 300;
  line-height: 1.2;
  min-height: 90px;
}
.gray {
  color: rgba(0,0,0,.3);
}
.cross-price {
  text-decoration: line-through;
}
@media (max-width: 767px) {
  .page-app .modal.fade .modal-dialog.modal-resize {
    min-width: 89vw;
  }
  .modal-resize .modal label {
    font-size: calc(.65rem + .2vw);
  }
  .modal h2 {
    margin-bottom: 7vh;
  }
}
/* templates page */
.templates-bg-loader-img {
  background-image: url('/assets/images/templates/bg-img-templates-loader.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 1;
}
.templates-page .modal.show .modal-dialog {
  min-width: 30vw;
  border-radius: 3px;
  padding: 2rem 2rem 2.5rem;
}
.templates-page .modal h1 {
  font-size: calc(.8rem + 1.7vw);
  line-height: 1;
  font-weight: 600;
  margin-bottom: 2rem;
}
.templates-page .modal label {
  font-size: calc(.55rem + .2vw);
  line-height: 1.2;
  padding-top: 1rem;
}
.templates-page .modal label span {
  color: lightgray;
}
.templates-page .modal input[type="color"] {
  height: 4rem;
}
.templates-page .modal input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  background: white;
}
.templates-page .modal input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}
.brand-in-a-box.templates-page select.custom-select {
  height: 4rem;
  border: 1px solid lightgray;
  padding-left: 1rem;
  background-position: right 1rem center;
  margin-bottom: 1rem;
}
.templates-page .modal .cta-pill.big {
  font-size: calc(.5rem + .5vw);
  line-height: 1;
  letter-spacing: .0rem;
  padding: .9rem 1.3rem .7rem;
}
/* /end templates page */
.modal-content {
  border: none;
  border-radius: 0;
  background: transparent;
}
.page-app .modal-dialog-scrollable .modal-body {
  padding: 2rem;
}
.modal-header {
  border-bottom: 0;
  padding-left: calc(1rem + 15px);
}
/* 10% coupon modal*/
.page-app .modal-header {
  /* match with modal-body */
  padding: 1rem;
}
.close {
  font-size: 3.5rem;
  font-weight: 200;
}
.modal label {
  font-size: calc(.55rem + .4vw);
}
.modal.modal-company input.form-control {
  padding: 0.4rem 0.9rem 0.25rem;
  /* logo maker app */
  /* font-size: calc(.9rem + 2vw); */
  /* line-height: 1.2; */
  height: auto;

  letter-spacing: -.015em;
  font-weight: 440;
  margin-bottom: 0;
}
.modal input.form-control::placeholder {
  color: rgba(119, 119, 119, 0.2);
  /* prevent cutoff */
  overflow: visible;
}
.modal .form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #fa4600;
  outline: 0;
  box-shadow: 0 0 0 0.1rem rgb(250 70 0 / 100%);
}
.modal .cta-pill.big {
  font-size: calc(.7rem + .5vw);
  letter-spacing: .06rem;
}
/* subscription modal (css only tested for file download modal)
download file modal */
.modal-sub h2 {
  font-size: calc((3.35 - 1) * 1.2vw + .6rem);
  line-height: 1.1;
  border-top: 2px solid rgba(0,0,0,.1);
  width: 100%;
  margin-top: 1rem;
  padding-top: 0.8rem;
}
.pick-plan .modal-sub h2 {
  border-top: 0;
  color: #000;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-weight: 420;
  margin-top: 6rem;
  margin-bottom: 2rem;
  margin-left: -0.1vw;
  padding: 0;
  font-size: calc(2.7rem + .5vw);
  max-width: 52%;
}
/* creditcard modal */
.pick-plan .modal-sub h2.payment-headline {
  font-size: calc(2.1rem + .5vw);
  line-height: 1.1;
  font-weight: 430;
  background: white;
  margin-bottom: 0;
  margin-left: 0;
  padding: 3rem 3rem 2rem;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
  max-width: none;
  /* padding-right: 54%; */
  margin-top: 2rem;
}
.pick-plan .modal-sub p.intro {
  line-height: 1.37;
}
.pick-plan .v4-pricing .price-card {
  border: 0;
}
.modal hr {
  background-color: rgba(0,0,0,.2);
  height: 1px;
}
/* 10% coupon modal */
.modal-header .close {
  margin-top: 0;
}
/* larger phone, used to be 1024 */
@media (max-width: 767px) {
  .modal.show .modal-dialog,
  .page-app .modal.show .modal-dialog {
    /* pricing popup */
    min-width: 100vw;
    top: 50%;
    margin: 0;
    padding: 0;
  }
  .modal label {
    font-size: calc(.65rem + .2vw);
  }
  .modal input.form-control {
    margin-bottom: 1rem;
  }
  .modal .cta-pill.big {
    letter-spacing: .08rem;
  }
  .modal-sub h2 {
    /* for 10% coupon modal */
    font-size: 3rem;

    line-height: 1.12;
    margin: 2rem 0 0;
  }
  .close {
    font-size: 1.5rem;
  }
  .pick-plan .modal-sub h2 {
    margin-top: 4rem;
    margin-bottom: 1rem;
    font-weight: 500;
    padding-right: 2rem;
    max-width: none;
  }
  .modal-sub .modal-content .border-left {
    border-left: 0;
  }
  .modal-sub .alert {
    margin-bottom: 0rem;
  }
  .modal-sub h6 {
    font-size: calc(12px + 1.7vw);
  }
  /* templates page */
  .templates-page .modal.show .modal-dialog {
    min-width: 90vw;
    padding: 1rem 1rem 1.5rem;
  }
  .templates-page .modal h1 {
    font-size: calc(1.3rem + 1.7vw);
    margin-bottom: 1rem;
  }
  /* /end templates page */
  /* logo page */
  .page-app .modal-header {
    padding: 0 1rem;
  }
  /* 10% coupon modal */
  /* download png logo modal */
  .page-app .modal-dialog-scrollable .modal-body {
    /* padding: 2rem 2rem 1rem 2rem; */
  }
  /* in 3 steps modal */
  .modal.modal-company input.form-control {
    margin-bottom: 1rem;
  }
  .pick-plan .modal-sub h2.payment-headline {
    font-size: calc(1.4rem + 1vw);
    padding-right: 3rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-top: 2rem;
    margin-top: 1rem;
  }
}
/* ---------------------- header section app page + tool sidebar */
.lm-row-align-center {
    align-items: center;
}
.lm-btn-row {
  display: flex;
  width: 100%;
  align-items: stretch;
  gap: 3px;
  position: relative;
  flex-wrap: wrap;
}
.lm-row-settings .lm-box-row,
.logo-svg-grid {
  display: flex;
  width: 100%;
  gap: 3px;
  max-height: 250px;
  overflow-y: scroll;
  background-color: rgba(255,255,255,.5);
  border-radius: 3px;
  /* only for copy good
  padding: .5rem 1rem .2rem; */
  /* better for when images are in */
  padding: .5rem;
  /* limit children per row */
  flex-wrap: wrap;
  justify-content: flex-start;
}
.logo-svg-grid {
  background-color: transparent;
  padding: 0;
  margin-bottom: .5rem; 
}
.lm-btn-row li,
.lm-btn-row-btn,
.logo-svg-item {
  /* same width */
  flex: 1 1 0;

  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: calc(.4rem + .2vw);
  line-height: 1;
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 4px;

  background-color: rgba(26,26,26,.1);
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
  cursor: pointer;
  /* align elements to bottom of row */
  align-self: flex-end;
}
@media (max-width: 767px) {
  .lm-btn-row li,
  .lm-btn-row-btn {
    font-size: calc(.4rem + .6vw);
  }
}
/* font labels except Google fonts button */
.lm-btn-row li.btn-lm-cut {
  font-size: calc(.59rem + .2vw);
  line-height: 1;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-weight: 450;
  letter-spacing: .01rem;
  /* remove when number of fonts in last row changes */
  padding-left: 0.3rem;
  padding-right: 0.2rem;
}
/* google fonts button */
.lm-btn-row li.google-font-show-modal {
  flex-grow: 2;
  padding-left: 0.6rem;
  padding-right: 0.5rem;
  line-height: 1;
}
.lm-btn-row li.align-auto,
.lm-btn-row-btn.align-auto {
  align-self: auto;
}
.lm-btn-row li span {
  /* ensure clickability full btn not just text */
  width: 100%;
}
.lm-btn-row li.btn-lm-cut span {
  text-transform: none;
  padding-left: 5px;
  color: rgba(0,0,0,.4);
}
.lm-box-row li {
  /* same width: grow shrink basis */
  /* limit items per row */
  box-sizing: border-box;
  flex: 1 0 12.5%;
  max-width: 12.5%;
  height: 32px;

  text-align: center;
  list-style: none;
  /* reset */
  margin: 0;
  border-width: 1px;
  border-style: solid;
  border-color: #c4c4c4;
  border-radius: 2px;
  overflow: hidden;
  /* flex as parent */
  display: flex;
  align-items: center;

  -webkit-transition: border-color .3s ease .2s;
  transition: border-color .3s ease .2s;
}
.lm-box-row li:hover,
.lm-box-row li:focus {
  cursor: pointer;
  border-color: #333;
}
.lm-box-row li img {
  width: 100%;
}
.lm-btn-row li {
  padding: 0.5rem 0.1rem;
  line-height: .93;
}
.lm-btn-row-btn .lm-btn-txt {
  position: absolute;
  top: calc(53%);
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(.5rem + .2vw);
  /* fill out btn > ensure clickability */
  padding: .6rem 0;
  width: 100%;
}
/* logo symbols bigger font size */
.logo-symbol-container .lm-btn-row li {
  font-size: calc(2rem + .2vw);
  /* make items same width when content gets too wide anyway */
  flex: 1 1 0;
  width: 0;
  overflow: hidden;
}
.grow-x2,
.lm-btn-row-btn.grow-x2,
.lm-btn-row-input.grow-x2,
.lm-btn-row .lm-btn-row-input.grow-x2 {
  flex-grow: 2;
}
/* buttons that are checkboxes with labels */
.lm-btn-row.lm-btn-input-label .lm-btn-row-btn {
  display: flex;
  padding: 0;
  padding-top: .5rem;
  height: auto;
  background: transparent;
}
.lm-btn-row-btn input[type="checkbox"] {
  transform: translateY(-4px);
  margin-right: .3rem;
}
.mojo .lm-btn-row.lm-btn-input-label label {
  width: auto;
}
/* new svg symbol options */
.logo-svg-grid {
  display: flex;
  flex-wrap: wrap;
}
.logo-svg-item {
  flex: 1 1 16.5%;
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-svg-item:hover,
.logo-svg-item:focus {
  cursor: pointer;
  background-color: rgba(26, 26, 26, .3);
}
.logo-svg-item svg {
  width: 100%;
  height: 100%;
  max-width: 80%;
  /* better for long symbols */
  max-height: 60px;
}
.logo-svg-item img {
  width: 100%;
}
/* ––––––––––––––––– Color section in img editor */
/*  only on image editor: color field in sidebar */
.color-preset {
  border-radius: 2px;
  border: 1px solid #c4c4c4;
}
.page-logo-maker .color-preset {
  height: 3.1rem;
  border-radius: 4px;
}
.brand-in-a-box .color-preset {
  width: 100%;
  height: 100%;
}
.google-font-list {
  height: 200px;
  overflow-y: scroll;
  list-style-type: none;
  border: 1px solid #e8e8e8;
  border-radius: 0.2rem;
  padding: 0;
}
.google-font-list li {
  border-bottom: 1px solid #e8e8e8;
  line-height: 1.1;
  padding: 0.5rem 1rem 0.3rem;
  margin: 0;
}
.google-font-list li:hover {
  background-color: #efefef;
  cursor: pointer;
}

.google-font-list li.selected {
  background-color: #eeeeee;
}

input.color-picker {
  border-radius: 2px;
}
/* ––––––––––––––––––––––– color picker spectrum */
/* dropdown */
.sp-replacer {
  border: 1px solid #c4c4c4;
  color: #666;
  transition: border-color .3s;
  vertical-align: middle;
  width: 100%;
  height: 2rem;
}
.sp-dd {
  /* vertical-align arrow */
  line-height: 2rem;
  background-color: rgba(255,255,255,.5);
}
/* palette */
.sp-palette-container,
.sp-picker-container {
  width: 50%;
}
/* btns */
.sp-container button {
  border-radius: 2px;
  font-size: .75rem;
  line-height: 1;
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: .02em;
  background-color: rgba(26,26,26,.1);
}
.sp-cancel {

}
.sp-container button.sp-choose {
  background-color: #1e1e1e;
}
/* slider */
.sp-hue {
  right: 4px;
  width: 6px;
}
.sp-slider {
  left: -5px;
}
/* color boxes */
.sp-palette .sp-thumb-el {
  width: 38px;
  height: 20px;
  margin: 1px;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
}
.sp-palette .sp-thumb-inner {
  border-radius: 1px;
}
/* activated color box  */
.sp-palette .sp-thumb-el.sp-thumb-active,
.sp-palette .sp-thumb-el:hover,
.sp-palette span.sp-thumb-active,
.sp-palette span:hover {
  border: 1px solid #f2f2f2;
}

.lm-btn-row li.btn-lm-case:first-child { text-transform: capitalize; }
.lm-btn-row li.btn-lm-case:nth-child(2) { text-transform: uppercase; }
.lm-btn-row li.btn-lm-case:nth-child(3) { text-transform: lowercase; }

.lm-btn-row li:hover,
.lm-btn-row-btn:hover,
.lm-btn-row li:focus,
.lm-btn-row-btn:focus {
    background-color: rgba(127,127,127,.35);
}
.lm-btn-row li.lm-btn-active {
  /* mid gray for black & white body */
  background-color: rgba(26,26,26,.25);
  cursor: default;
  /* for long google fonts so that button text doesnt go over 1 line*/
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.lm-btn-row li:first-of-type {
  border-left: none;
}
.lm-btn-row li:first-of-type.lm-btn-active {
  border-left: 0;
}
.lm-btn-row li:last-of-type {
  border-right-width: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-btn-row a {
  float: left;
  padding: 1.3em .6em;
  background: pink;
  font-size: .8em;
}
.lm-btn-row .lm-btn-row-input,
.lm-btn-row div {
  flex-grow: 1;
  /* same width */
  flex: 1 1 0;
}
.lm-btn-row-input input {
  width: 100%;
  padding: .01rem 0 0 .4rem;
  font-size: .75rem;
  line-height: 2.5;
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: .02em;
  border: 1px solid #c4c4c4;
  border-radius: 3px;
  background-color: rgba(255,255,255,.5);
}
/* ------------------------------------ logo symbols AA font */
.logo-symbol-container .logo-symbols {
  max-height: 250px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: .5rem;
  /* important for phone */
  width: 100%;
}
.logo-symbol-container .logo-symbols::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}
.logo-symbol-container .logo-symbols::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: rgba(0,0,0,.2);
  border: 2px solid #e5e5e5;
}
.logo-symbol-container .logo-symbols::-webkit-scrollbar-track {
    /* background-color: #fff; */
    /* border-radius: 8px; */
}
/* ------------------------------------ /end logo symbols */
.lm-dropdown li {
    list-style: none;
}
select.custom-select {
  text-transform: uppercase;
  font-size: calc(.5rem + .2vw);
}
select.custom-select,
.form-control {
  min-height: 32px;
  background-image: url('/assets/images/down-arrow-v2-gray.svg');
  background-position: right .35rem center;
  cursor: pointer;
  white-space: normal;

  width: 100%;
  position: relative;
  padding: .42rem .2rem .5rem .4rem;
  /* prevent cutoff > metrics of text font changed */
  /* line-height: 2; */
  font-weight: 450;
  color: rgba(0,0,0,.9);
  letter-spacing: .02em;
  cursor: pointer;

  border: 1px solid rgba(0,0,0,.3);
  border-color: #c4c4c4;
  border-radius: 3px;
  background-color: rgba(255,255,255,.5);
  margin-bottom: 3px;
}
.form-control.cta-fileupload {
  padding: 0.7rem;
  font-size: .8rem;
  margin-bottom: 1rem;
  color: rgba(0,0,0,.4);
  font-weight: 400;
  height: auto;
}
/* toolbar-specific */
.lm-sidebar .form-control {
  /* test more all 3 settings below */
  font-size: calc(.65rem + .2vw);
  height: calc(1.7em + .75rem);
  line-height: 3rem;
}
select.custom-select option,
.form-control option {
  background: pink;
}
.form-control {
  background-image: none;
}
.page-logo-maker select.custom-select {
  height: 3rem;
  background-color: rgba(255,255,255,.9);
  padding-left: 1rem;
}
.brand-in-a-box select.custom-select,
.brand-in-a-box .form-control {
  background-color: rgba(255,255,255,.9);
  text-transform: initial;
  font-size: calc(.9rem + .2vw);
  font-weight: 380;
  line-height: 1.4;
  border: 0;
  /* same as color inputs > safari wont do 0 px */
  border-radius: 2px;
  /* prevent cutoff */
  height: auto;
  letter-spacing: 0;
  padding: .42rem .5rem .3rem .6rem;
  background-position: right .55rem center;
}
.select {
  position: relative;
  display: inline-block;
  /* margin-bottom: 15px; */
  width: 100%;
  cursor: pointer;
}
.select select {
  /* overwrite */
  min-height: 0;

  display: inline-block;
  height: 25px;
  width: 100%;
  cursor: pointer;
  padding: 1px 0 5px;
  outline: 0;
  border: none;
  border-bottom: 2px solid #000000;
  border-radius: 0px;
  color: #000;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: .8em;
}
.select select option:checked {
    color: #000;
}
.select select::-ms-expand {
    display: none;
}
.select select:hover,
.select select:focus {
    /* color: #000000;
    background: #cccccc; */
}
.select select:disabled {
    opacity: 0.5;
    pointer-events: none;
}
.select-arrow {
    position: absolute;
    z-index: 1;
    top: 25px;
    right: 24px;
    /* pointer-events: none; */
    border-style: solid;
    border-width: 8px 5px 0px 5px;
    border-color: #000 transparent transparent transparent;
}
.page-logo-maker .select-arrow {
  right: 34px;
}
.select select:hover ~ .select-arrow,
.select select:focus ~ .select-arrow {
    border-top-color: #000000;
}
.select select:disabled ~ .select-arrow {
    border-top-color: #cccccc;
}
/* inverted black bg */
.box-white .select select {
    border-bottom: 2px solid rgba(216,216,216,.3);
    color: rgba(216,216,216,.5);
    background-image: url('../assets/images/drop-arrow2x-gray.png');
}
.box-white .select-arrow {
    border-color: #7f7f7f transparent transparent transparent;
}
/* explainers / tooltips font buttons */
/* reset */
.lm-btn-row li.tooltip-layer {
  background-color: transparent;
  position: absolute;
  top: -10px;
  left: 13%;
}
.lm-btn-row li.tooltip-layer.v2 {
  left: 58%;
  top: -14px;
}
.lm-btn-row .tooltip-layer span {
  display: initial;
  padding: 3px 3px 1px 3px;
  margin-left: 1px;
  background: #fa4600;
  border-radius: 2px;
  color: white;
}
.lm-btn-row .tooltip-layer span.mojo-tooltip .copy {
  display: none;
  position: absolute;
  top: -5vw;
  left: -3vw;
  text-align: left;
  text-transform: initial;
  font-size: calc((1.8 - 1) * 1vw);
  font-weight: 300;
  line-height: 1.2;
  padding: 8px;
  background: black;
  width: 21.7vw;
  box-shadow: 5px 4px 9px -2px rgb(0 0 0 / 25%);
}
.lm-btn-row .tooltip-layer.v2 span.mojo-tooltip .copy {
  left: -12.5vw;
}
.lm-btn-row .tooltip-layer span.mojo-tooltip .copy::before {
  content: '⭣';
  position: absolute;
  transform: translate(-50%, -50%);
  top: calc(102%);
  left: 30px;
  color: black;
  text-decoration: none;
  -webkit-transition: color .3s ease;
  transition: color .3s ease;
}
.lm-btn-row .tooltip-layer.v2 span.mojo-tooltip .copy::before {
  left: 50%;
}
.lm-btn-row .tooltip-layer span.comp {
  display: initial;
}
.lm-btn-row .tooltip-layer span.mojo-tooltip.comp:hover .copy {
  display: initial;
  position: absolute;
}
.lm-btn-row .tooltip-layer span.phone {
  display: none;
  font-size: calc((3 - 1) * 1.2vw);
  top: -1.2rem;
  width: 81vw;
}
@media (max-width: 767px) {
  .lm-btn-row .tooltip-layer span.comp {
    display: none;
  }
  .lm-btn-row .tooltip-layer span.phone {
    display: initial;
    /* easier to click on phone */
    padding: 6px;
  }
  .lm-btn-row .tooltip-layer span.mojo-tooltip.phone:hover .copy {
    display: initial;
    position: absolute;
    top: -18vw;
    left: -11vw;
    font-size: calc((3.8 - 1) * 1vw);
    width: 79vw;
  }
  .lm-btn-row .tooltip-layer.v2 span.mojo-tooltip.phone:hover .copy {
    left: -45vw;
  }
}
/* sliders */
.slider {
  margin-top: -8px;
}
.letter-controls .slider {
  transform: none;
}
.slider.addinput {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
input.number-input {
  /* 4 digits */
  width: 30%;
  max-width: 70px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: 0.2rem;
  font-size: .6rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  padding: 0.2rem 0 .2rem 0.23rem;
  background: rgba(0,0,0,.0);
}
/* arrow buttons move up to account for additional line height padding */
input.number-input::-webkit-outer-spin-button,
input.number-input::-webkit-inner-spin-button {
  margin-top: -3px;
  margin-bottom: -3px;
}
.slider-input  {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 20px;
  background: rgba(26,26,26,.15);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider input[type=range]::-webkit-slider-runnable-track {
  /* height: 3px; */
}
.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: .7vw;
  height: .7vw;
  border-radius: 50%;
  background: rgb(26,26,26);
  cursor: pointer;
}
.slider-input::-moz-range-thumb {
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background: rgb(26,26,26);
  cursor: pointer;
}
.box-white .slider-input {
  background: rgba(26,26,26,.8);
}
.box-white .slider-input::-webkit-slider-thumb {
  background: rgb(81,81,81);
}
/* color presets */
.btn-color-presets,
.btn-size-presets {
    cursor: pointer;
    border: 1px solid rgba(0,0,0,.3);
    border-color: #c4c4c4;
    border-radius: 2px;
}
/* inverted black bg */
.box-white .btn-color-presets {
    color: rgba(216,216,216,.5);
    border-bottom: 2px solid rgba(216,216,216,.3);
}
.mojo .select-color-presets label,
.mojo .select-size-presets label {
    margin-top: 12px;
    line-height: 1.2;
    width: 100%;
    text-align: left;
}
.select-color-unit {
  display: flex;
  gap: 2px;
}
.btn-lm-color-preset {
  flex-grow: 1;
  text-align: center;
  cursor: pointer;
  border-radius: 2px;
}
/* color dot > if not there, determines size of cells */
.btn-lm-color-preset div {
  display: block;
  font-size: .7rem;
  text-align: center;
  height: 5vh;
}

.btn-lm-color-preset.active div {
  box-shadow: inset 0px 0px 0px 2px #fa4600;
  position: relative;
}
.btn-lm-color-preset.active div::after {
  content: "\2713";
  font-size: 12px;
  line-height: 1;
  position: absolute;
  display: inline-block;
  bottom: 2px;
  right: 4px;
  font-weight: 400;
  color: #d1d1d1;
  border-radius: 50px;
}
/* first col cells no border to align w label */
.btn-lm-color-preset:first-of-type div {
  border-left: none;
}
/* color number internal */
.btn-lm-color-preset em {
  display: none;
}

/* color pickers */
.lm-color-pickers {
  display: flex;
  width: 100%;
  align-items: stretch;
  /* height: 40vh; */
}
.lm-color-pickers.gray {
  margin-bottom: 5vw;
}
.lm-sidebar .lm-color-pickers {
  height: 4vh;
}
.lm-color-pickers .pick-option {
  flex-grow: 1;
  /* same width */
  flex: 1 1 0;
  text-align: center;
  /* margin-right: 1rem; */
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
}
.lm-sidebar .lm-color-pickers .pick-option {
  margin-right: 8px;
  border: 1px solid rgba(0,0,0,.2);
}
.lm-color-pickers .pick-option:last-child {
  margin-right: 0;
}
/* in bk */
.lm-color-pickers .pick-option .main,
.lm-color-pickers .pick-option .main-1,
.lm-color-pickers .pick-option .main-2,
.lm-color-pickers .pick-option .main-3 {
  /* check on iframe too, vw is better, vh doesnt work, but fixed px would be okay too */
  height: 10vw;
  position: relative;
}
@media (max-width: 768px) {
  .lm-color-pickers .pick-option .main,
  .lm-color-pickers .pick-option div[class^="main-"] {
    height: 18vw;
  }
}
.lm-color-pickers .pick-option .tint {
  min-height: 10rem;
  display: flex;
  flex-direction: column;
}
/* Color tint styles */
.color-tint {
  position: relative;
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.color-tint.dark-tint {
  color: white;
}

.color-tint.light-tint {
  color: #333;
}

.color-tint::after {
  content: attr(data-tint-name);
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 10px;
  font-weight: bold;
  opacity: 0.7;
}

/* color boxes borders */
.lm-color-pickers .pick-option .main,
.lm-color-pickers .pick-option .main > .main {
  border-top: 1px solid rgba(119,119,119,.1);
  border-right: 1px solid rgba(119,119,119,.1);
  border-bottom: 1px solid rgba(119,119,119,.1);
}
.lm-color-pickers .pick-option .main > .main {
  /* border: none;
  border-bottom: none; */
}
.lm-color-pickers .pick-option .tint div[class^="tint-"] {
  border-right: 1px solid rgba(119,119,119,.1);
  border-bottom: 1px solid rgba(119,119,119,.1);
}
.pick-option.color-container-1,
.lm-color-pickers .pick-option .main.gray-1 {
  border-left: 1px solid rgba(119,119,119,.1);
}
/* end color boxes borders */

.lm-color-pickers .pick-option .tint div[class^="tint-"] {
  height: 33.33%;
  position: relative;
}
.lm-color-pickers input[type="color"] {
  -webkit-appearance: none;
  height: 100%;
  width: 100%;
  /* balance border */
  padding: 4px;
  /* safari adds anyway */
  border-radius: 0;
  /* overwrite default */
  border: 1px solid rgba(0,0,0,.3);
  /* cursor: url('../assets/images/mojomox/color-picker-cursor-h-a.png'), auto; */
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
.box-white input[type="color"] {
  border: none;
}
.btn-color-presets,
.btn-size-presets {
  position: relative;
  padding: 1.1em .2em .8em .7em;
  font-size: calc(.5rem + .2vw);
  line-height: 1;
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* arrow */
.btn-color-presets span,
.btn-size-presets span {
  position: absolute;
  top: calc(50% + 2px);
  right: 4px;
  transform: translate(-50%, -50%);
}
/* color models */
.color-models,
.lm-btn-row-container {
  font-size: 0.8em;
  cursor: pointer;
}
li.btn-lm-colormodel,
.lm-btn-row-container li,
.lm-btn-row-btn {
  /* get height from input size */
  height: 32px;
  position: relative;
}

/* icon btns */
li.btn-lm-colormodel span:nth-child(1),
.lm-btn-row-container li span:nth-child(1) {
  display: inline-block;
  /* set to 100% to get full text btn to click */
  height: 36px;
  position: absolute;
  font-size: 49px;
  line-height: .65;
  top: calc(50%);
  left: 50%;
  transform: translate(-50%, -50%);
}
/* txt btns */
li.btn-lm-colormodel span:nth-child(1).lm-btn-txt,
.lm-btn-row-container li span:nth-child(1).lm-btn-txt {
  /* ensure img upload clickability */
  width: 100%;
  height: auto;
  padding: .6rem .2rem .4rem .2rem;
  font-size: calc(.5rem + .2vw);
  line-height: 1;
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.lm-btn-row-container li span:nth-child(1).lm-btn-txt.lowercase {
  text-transform: lowercase;
}
/* icon on circle */
li.btn-lm-colormodel span:nth-child(1) {
  background: #e5e5e5;
  border-radius: 50%;
  font-size: 32px;
  line-height: 1;
}
/* mouseover explainers */
li.btn-lm-colormodel span:nth-child(2),
.lm-btn-row-container li span:nth-child(2) {
  font-size: 0.55rem;
  color: #fff;
  background: #333;
  position: absolute;
  z-index: 1;
  padding: .3rem .3rem .2rem;
  border-radius: .2rem;
  opacity: 0;
  -webkit-transition: opacity .3s ease .1s;
  transition: opacity .3s ease .1s;
  transform: translate(-50%, -50%);
  top: calc(50% + 28px);
}
li.btn-lm-colormodel span:nth-child(2)::before,
.lm-btn-row-container li span:nth-child(2)::before {
  content: '⭡';
  color: #333;
  position: absolute;
  transform: translate(-50%, -50%);
  top: calc(50% - 9px);
  left: 50%;
}
li.btn-lm-colormodel:hover span:nth-child(2),
.lm-btn-row-container li:hover span:nth-child(2) {
  opacity: 1;
}
/* color preview in editor main area */
.color-preview {
  height: calc(10px + .6vw);
  position: absolute;
  bottom: 0;
  width: 100%;
  display: none;
}
.color-preview div {
  width: 25%;
  height: 100%;
  float: left;
}
/* ---------------------- home templates section */
.template-row {
  display: flex;
  width: 100%;
  /* align-items: stretch; */
  /* brand in box page */
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 2rem;
  justify-content: stretch;
}
.template-row div.col-md-temp {
  /* same width */
  flex: 1 1 0;
  align-self: stretch;
}
/* test tool home page */
.brand-in-a-box .template-row {
  display: inherit;
  float: left;
  margin-bottom: 3rem;

  overflow-x: scroll;
  white-space: nowrap;
}
.brand-in-a-box .template-row div.col-md-temp {
  flex: none;
  /* align-self: stretch; */
  align-self: unset;
  /* grow | shrink | basis */
  /* default: 0 | default: 1; | space around each item: 0 = 0, auto = something */
  /* flex: 0 1 auto; */

  margin-right: 1rem;
  display: inline-block;
}
.brand-in-a-box .canvas-container canvas {
  position: relative !important;
}
.col-md-temp a {
  text-decoration: none;
  opacity: 1;
  /* duration | function | delay  */
  transition:         opacity .3s ease 0s;
  -webkit-transition: opacity .3s ease 0s;
  /* ensure full stretch both ways */
  float: left;
  width: 100%;
  height: 100%;
  align-self: stretch;
}
.brand-in-a-box .col-md-temp a {
  width: auto;
}
.col-md-temp a.fit-content {
  width: max-content;
}
.col-md-temp .lm-box-link.fakelink {
  /* duration | function | delay  */
  transition:         opacity .3s ease 0s;
  -webkit-transition: opacity .3s ease 0s;
}
.col-md-temp a:hover,
.col-md-temp a:focus,
.col-md-temp .lm-box-link.fakelink:hover,
.col-md-temp .lm-box-link.fakelink:focus {
  opacity: .6;
}
.templates-categories {
  background: rgba(0,0,0,.16);
  margin-bottom: 2rem;
}
/* reset */
.templates-categories .template-row,
.templates-categories .template-row h2 {
  margin-bottom: 0;
  gap: 0;
}
.templates-categories .template-row .col-md-temp.tab-active {
  background-color: rgb(242,242,242);
}
.templates-categories .template-row .col-md-temp a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 2px solid rgb(242,242,242);
  padding: 1rem 1rem;
  color: #fff;
}
.templates-categories .template-row h2 {
  /* font-size: calc(.5rem + 0.65vw); */
  font-size: calc(.3rem + 0.65vw);
  /* text-align: center; */
  /* vertical-align: middle; */
  padding: 0;
  color: rgba(0,0,0,.7);
  font-weight: 400;
  text-decoration: underline;
}
.template-row div.col-md-temp img,
.template-row div.col-md-temp .canvas-container {
  /* bring back */
  /* width: 100% !important; */
  /* ensure full height for link */
  /* float: left; */
}
.template-row div.col-md-temp .canvas-container {
  /* bring back */
  /* height: 100% !important; */
  /* float: left; */
  /* width: 100%; */
}
.template-caption {
  display: flex;
  gap: .2rem;
  /* hack to keep float below */
  border: 1px solid transparent;
  /* if no tags, customize btn will stay right */
  justify-content: flex-end;
  align-items: baseline;
}
.personal-templates-canvas-container .canvas-container {
  overflow: hidden;
}
.template-tags {
  font-size: calc(6px + .3rem);
  transform: translateY(-3px);
  color: rgba(0,0,0,.3);
  line-height: 1.1;
  font-weight: 400;
}
.go-to-template-link a,
.go-to-template-category a,
.go-to-template-link,
.delete-template {
  font-size: .6rem;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  float: right;
  /* background: rgba(255,255,255,.8); */
  background-color: rgba(0,0,0,.5);
  line-height: 1;
  margin: .3rem 0 0;
  text-decoration: none;
  padding: .4rem 1.5rem;
  border-radius: 1rem;
  font-weight: 420;
  letter-spacing: .03rem;
  -webkit-transition: all .5s ease .1s;
}
.go-to-template-link a:hover,
.go-to-template-link a:focus,
.go-to-template-category a:hover,
.go-to-template-category a:focus,
.go-to-template-link:hover,
.go-to-template-link:focus,
.delete-template:hover {
  /* background: rgba(255,255,255,1); */
  background-color: rgba(0,0,0,.08);
  color: rgba(0,0,0,.8);
}

.delete-template {
  cursor: pointer;
}
.go-to-template-category a {
  position: absolute;
  top: .4rem;
  right: 15px;
}

/* arrow */
.go-to-template-link span,
.go-to-template-category span {
  display: inline-block;
  transform: translate(.13rem, -.05rem);
}
/* instead of flexbox grid row */
.template-row-grid {
  height: 200px;
}
.col-md-temp-grid {
  height: 100%;
  float: left;
  margin-right: 1rem;
}
.col-md-temp-grid img {
  width: 100%;
  height: 100%;
}

/* phone: inconsistent 599 vs 1024 */
@media (max-width: 599px) {
  .template-row {
    margin-bottom: calc(1.1rem - .5vw);
    gap: .4rem;
    /* homepage */
    overflow-x: auto;
    padding-bottom: .8rem;
  }
  .mobile-row-scroll {
    overflow-x: scroll;
    /* for scrollbar space */
    padding-bottom: .7rem;
  }
  /* category nav */
  .templates-categories .template-row .col-md-temp a {
    padding: 1rem .4rem;
  }
  .templates-categories .template-row h2 {
    font-size: calc(.5rem + 0.65vw);
  }
  .go-to-template-link a,
  .go-to-template-category a,
  .go-to-template-link {
    padding: .4rem .5rem .14rem;
    width: 100%;
    text-align: center;
  }
  .mo-version-4 .templates .go-to-template-link {
    width: auto;
  }
  .go-to-template-category a {
    width: auto;
  }
  .template-caption {
    gap: 0;
    flex-direction: column;
    align-items: start;
    padding-top: .3rem;
  }
}

/* ---------------------- logos section */
/* overwrite style.css */
.col-md a.lm-box-link {
    float: none;
    line-height: inherit;
    outline: inherit;
}
/* box linked */
.lm-box-link {
    opacity: 1;
    -webkit-transition: opacity 2s ease .2s;
    transition: opacity 2s ease .2s;
    background: white;
}
.lm-box-link:hover {
    opacity: 1;
    -webkit-transition: opacity 2s ease .2s;
    transition: opacity 2s ease .2s;
}
.lm-box-link .lmcontinue {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: 0;
    left: 0;
}
.lmcontinue em {
    position: absolute;
    bottom: 0.7rem;
    right: 0.6rem;
    font-style: normal;
    font-size: calc((1.3 - 1.3) * 1.2vw + 1rem);
    font-weight: 400;
    line-height: 1.2;
    padding: 0.3rem 0.5rem 0.1rem 0.8rem;

    -webkit-transition: color .3s ease, background-color .3s ease;
    transition: color .3s ease, background-color .3s ease;

    color: #c8c8c8;
    border: 2px solid;
    /* background: #fff; */
    display: inline-block;
    border-radius: 5rem;
}
.lmcontinue em span {
  font-size: .7rem;
  line-height: .8;
  padding-left: .1rem;
  transform: translateY(-1px);
  display: inline-block;
}
.lm-box-link:hover .lmcontinue,
.lm-box-link:focus .lmcontinue {
    cursor: pointer;
}
.lm-box-link:hover .lmcontinue em,
.lm-box-link:focus .lmcontinue em {
    color: rgba(255,255,255,1);
    background-color: #6800ff;
    cursor: pointer;
}
.logo-boxes-more {
    display: block;
    border: 2px solid black;
}
/* ---------------------- logo edit section */

.logo-preview-container {
  height: 100%;
  /* more testing: but for short 2-line logo, logo box editor extends too far vertically */
  /* max-height: 80vh; */
  position: relative;
  background: white;
  /* center top logo in presentation view */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .6rem 0 0 .6rem;
}
.bg-paper {
  background-color: #ffffff;
  opacity: 1;
  background-image:  linear-gradient(#e1e1e1 1.8px, transparent 1.8px), linear-gradient(90deg, #e1e1e1 1.8px, transparent 1.8px), linear-gradient(#e1e1e1 0.9px, transparent 0.9px), linear-gradient(90deg, #e1e1e1 0.9px, #ffffff 0.9px);
  background-size: 45px 45px, 45px 45px, 9px 9px, 9px 9px;
  background-position: -1.8px -1.8px, -1.8px -1.8px, -0.9px -0.9px, -0.9px -0.9px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
  border-radius: .6rem 0 0 .6rem;
}

.bg-paper.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Grid Slider Styles */
.grid-slider {
  -webkit-appearance: none;
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background: #ddd;
  outline: none;
  margin: 0 10px;
  vertical-align: middle;
}

.grid-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #333;
  cursor: pointer;
  transition: background 0.2s;
}

.grid-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #333;
  cursor: pointer;
  border: none;
}

/* Toggle Button Styles */
.toggle-btn {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  width: 36px;
  height: 36px;
}

.toggle-btn:hover {
  background-color: #f8f8f8;
  border-color: #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.toggle-btn:active {
  background-color: #f0f0f0;
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Add a subtle pulsing animation to the grid icon when grid is hidden */
.bg-paper.hidden + .bg-on-off .toggle-btn svg {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
}

.toggle-btn svg {
  display: block;
  color: #333;
}
.bg-on-off {
  position: absolute;
  bottom: 10px;
  left: 11px;
  background: white;
  border-radius: 0.3rem;
  padding: 0.5em;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 20; /* Higher than the grid */
  transition: all 0.3s ease;
}

/* Grid controls container */
.grid-controls {
  width: 100px;
  height: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

/* Hide slider when grid is hidden */
.bg-paper.hidden + .bg-on-off .grid-controls {
  width: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Show slider when grid is visible */
.bg-paper:not(.hidden) + .bg-on-off .grid-controls {
  opacity: 1;
  /* margin-left: 8px; */
}

/* Ensure the slider input fits within its container */
.grid-controls input[type="range"] {
  width: 100%;
  margin: 0;
  padding: 0;
}
.mojo .bg-on-off label {
  padding-bottom: initial;
  padding-top: 2px;
  /* give label less than 50% width space */
  flex-shrink: 3;
}

/* both home & app */
.logo-box {
  width: 100%;
  /* padding: 5vh 6vw; too big logos on home */
  padding: 5vh 7vw;
  /* default */
  min-height: 136px;
  height: 27vh;
  position: relative;
}
/* home logo row */
.brand-in-a-box .logo-box {
  height: auto;
}
.lm-edit-section .logo-box {
  /* padding: 8vw 18vw; logo in edit box too small */
  padding: 10vw 13vw;

  /* test browser width folding w small and big logos before changing these values: the bigger the %, the later it folds  */
  /* % arent working as well as vw above */
  /* padding-left: calc(20%);
  padding-right: calc(20%); */

  /* full logo box incl editing area */
  /* for presentation view top logo */
  max-width: 75vw;

  min-height: 36vw;
  /* too long when logo is short */
  height: 100%;

  /* same as gray sidebar, for vertical logo stacking */
  max-height: 83vh;

  /* scrollbar for large tracking */
  overflow: auto;
  /* show daughter glyphs when overlapping */
  overflow: initial;

  position: relative;
  z-index: 4;

  display: flex;
  align-items: center;
  justify-content: center;
}
/* reset values from editor for presentation / iframe view */
.page-app .lm-edit-section.viewonly .logo-box,
.page-app.iframe .lm-edit-section .logo-box {
  width: 100%;
  max-width: 100vw;
  min-height: initial;
  height: auto;
  max-height: none;

  /* needs to be same as .page-app .file-box large and medium */
  padding: 20%;
  aspect-ratio: 5 / 3;
}
.lm-edit-section.viewonly .lmlogo {
  border: 0;
}
.lm-edit-section.viewonly .lmlogo::after {
  display: none;
}

/* prevent logo or letter to fly off > except for top edit section > would dropdown to get cut off */
.logo-item,
.bizcard-box-top {
  overflow: hidden;
}
/* use for print and scale fixing */
/* .logo-item {
  border: 5px solid red !important;
}
.logo-item .logo-glyph {
  border: 1px solid green !important;
}
.logo-item .logo-glyph svg {
  border: 1px solid blue !important;
} */
/* both home & app */
.lmlogo {
  font-size: 2em;
  font-size: calc(3px + 3.4vw);
  text-align: center;
  display: flex;
}
.page-logo-maker .lmlogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* direct box around logo */
.lm-edit-section .lmlogo {
  /* safari cuts off */
  padding-top: 10px;
  /* padding for approx simulation of crop for eventualities like rotation */
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
  /* border: 2px dashed rgba(0,0,0,.04); */
  position: relative;
}
.lm-edit-section .lmlogo::after {
  /* content: "Logo crop box"; */
  font-size: .65rem;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  transform: translate(-0.2rem,0.7rem);
  margin-right: 0.3rem;
  font-weight: 400;
  color: rgba(0,0,0,.07);
  font-family: 'BauhausMosyTextGX';
  letter-spacing: 0;
}
/* custom glyphs */
.lm-instruction {
  position: absolute;
  background: rgba(119,119,119,1);
  padding: 9px 26px 5px 11px;
  border-radius: 15px;
  /* text-transform: uppercase; */
  font-size: calc(6px + .5vw);
  line-height: 1;
  /* letter-spacing: .02em; */
  cursor: pointer;

  box-shadow: 2px 2px 30px 1px rgb(0 0 0 / 60%);
  background: rgba(50,50,50,1);
  border-radius: .5em;
  color: white;
  font-size: calc(8px + .5vw);
  line-height: 1.3;
  font-weight: 340;
  padding: 11px 26px 9px 13px;
}
/* x */
.lm-instruction em {
    font-style: normal;
    font-size: 18px;
    line-height: .8;

    right: 10px;
    top: 51%;
    -webkit-transform: translateX(-50%);
    transform: translateY(-50%);
    position: absolute;
}
.lm-instruction::after {
    font-family: 'BauhausSansExGX';
    content: "⭣";
    font-size: 20px;
    position: absolute;
    z-index: 1;
    bottom: -17px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* color: rgba(119,119,119,1); */
    color: rgba(50,50,50,1);
}
.lm-export-page .lm-instruction {
    display: none;
}
.lmlogo .mother-glyph {
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;

    /* show kerning; equal to display inline
    makes custom child options jump */
    /* display: contents; */

    /* so that custom child options position below */
    position: relative;
    user-select: none;
}
.mother-glyph {
  /* in test mode to see if M in Sway/Swav font stays in row in brand kit otherwise width too wide, folds */
  width: auto !important;
}
/* big element in first phone story, Swav prevent overflow */
.story .mother-glyph {
  overflow: hidden;
}
/*.lmlogo .mother-glyph:hover {
  opacity: .9;
}
*/
.one-oh-one .lmlogo .mother-glyph:hover {
  opacity: 1;
}
.mother-glyph-arrow {
    font-style: normal;
    font-family: 'BauhausSansExGX';
    font-size: 11px;
    position: absolute;
    z-index: 1;
    top: -4px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: rgb(175,175,175);
    opacity: .5;
    /* hidden for now / disappears for new scroll box */
    display: none;
}
.lm-export-page .lmlogo .mother-glyph {
    /* remove all hover effects */
    pointer-events: none;
}
.custom-char-container {
  float: left;
  width: 100%;
}
/* popups: custom glyphs and symbol */
.lmlogo div.custom-glyphs,
.custom-glyphs.customize-symbol {
  position: absolute;
  z-index: 1000;
  /* looks weird when single row is not fully filled */
  /* box-shadow: 4px 4px 5px 0px rgb(0 0 0 / 15%); */
  background: white;
  /* minimal overlap w letter g but also no hiding of glyphs when short brand name */
  top: 120%;
  /* neighboring hover not working if too high */
  /* top: 70%; */

  line-height: .7;
  width: 36vw;
  /* smaller when fewer alt glyphs */
  max-height: 34vh;
  overflow-y: scroll;
  overflow-x: hidden;
  /* ensure non-application for dropdown alt glyphs */
  font-feature-settings: normal;
  font-size: calc((2.8 - 1.3) * 1.2vw + 1rem);
  border-radius: 3px;
  box-shadow: 0 0 16px -10px rgb(0 0 0 / 75%);
}
.lmlogo div.custom-glyphs::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}
.lmlogo div.custom-glyphs::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: rgba(0,0,0,.1);
  border: 2px solid white;
}
/* single glyphs dropdown color options */

.logo-brand-color-container {
  display: flex;
}
.logo-color-picker:first-of-type {
  border-radius: 3px 0 0 3px;
}
.logo-color-picker:last-of-type {
  border-radius: 0 3px 3px 0;
}
.lmlogo div.custom-glyphs .letter-controls {
  width:  100%;
  text-align: left;
}
.logo-color-picker {
  cursor: pointer;
}
.logo-color-picker,
.letter-color-picker,
.lmlogo div.custom-glyphs .letter-color-picker,
.lmlogo div.custom-glyphs .letter-color-picker-control {
  width: 12%;
  height: 30px;
  display: inline-block;
  margin-bottom: 5px;
}
.lmlogo div.custom-glyphs .letter-color-picker {
  margin-bottom: 0;
}
.lmlogo div.custom-glyphs .control-container {
  /* needed, otherwise takes on wordmark font */
  font-family: 'BauhausMosyTextGX';
  font-size: calc(.65rem + .2vw);
  color: #333;
  font-weight: 470;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height:  1.2;
  /* for numbers, use monospace numbers */
  font-variant-numeric: tabular-nums;
  /* needed for 2 alt letter designs like Ä, otherwise color options float next to letter options */
  /* float: left; */
}
.lmlogo div.custom-glyphs .individual-row,
.lmlogo div.custom-glyphs .individual-half,
.custom-glyphs.customize-symbol .individual-row,
.custom-glyphs.customize-symbol .individual-half {
  width: 100%;
  background: #f8f8f8;
  float: left;
  border: 2px solid white;
  border-bottom: 0;
  padding: 1rem;
}
.lmlogo div.custom-glyphs .individual-row.half {
  /* width: 50%; */
  border-right: 0;
}
.lmlogo div.custom-glyphs .individual-row.tip {
  letter-spacing: 0;
  font-size: calc(.55rem + .2vw);
  text-transform: none;
  text-align: left;
  font-weight: 400;
  line-height: 1.2;
}

.lmlogo div.custom-glyphs input[type=number] {
  /*font-size: 14px;*/
}

.select-as-logomark {
  font-family: 'BauhausMosyTextGX';
  font-style: normal;
  padding: 0.7rem 0.6rem;
  line-height: 1;
  border: 0;
  margin-bottom: 3px;
}

.individual-font-size-value,
.individual-font-weight-value {
  /* forced values to ensure no overriding by individ slider settings */
  font-family: 'BauhausMosyTextGX';
  font-style: normal;
  font-weight: 420;
  letter-spacing: 0;

  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: initial;
  position: relative;
  left: -9px;
  text-align: center;
  margin-top: 6px;

}
.lmlogo div.custom-glyphs .brand-color-row::before {
  width: 100%;
}
.lmlogo div.custom-glyphs .custom-color-row input[type="color"],
.customize-symbol .letter-color-picker-control {
  width: 100%;
  /* height: 100%; */
  /* padding: 0; */
  border-radius: 0;
  border: 0;
  min-height: 65px;
  border-color: transparent;
  outline: none;
  -webkit-appearance: none;
}

.lm-export-page .lmlogo div.custom-glyphs {
  display: none;
}
/* alt options */
.lmlogo div.custom-glyphs .custom-chars {
  /* lighter for light brand colors */
  background-color: rgba(0,0,0,.05);
  padding: .25em .07em;
  text-align: center;
  cursor: pointer;
  /* test lighter yellow as main color */
  background-color: #f8f8f8;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease;

  float: left;
  width: 20%;
  width: calc(20% - 2px);
  /* gutter */
  margin-left: 2px;
  margin-top: 2px;
  /* long underscore CVs */
  overflow: hidden;
}

.lmlogo div.custom-glyphs .custom-menu,
.customize-symbol .custom-menu {
  line-height: 1;
  font-size: 14px;
  color: #d1d1d1;
  text-align: right;
  font-family: 'BauhausMosyTextGX';
  position: sticky;
  top: 0;
  background: white;
  padding-top: 2px;
  padding-right: 6px;
  border-bottom: 1px solid rgba(0,0,0,.06);

  cursor: move;
  /* Make sure it's above other elements */
  position: relative;
  z-index: 1;
}
.lmlogo div.custom-glyphs div.custom-chars:hover,
.lmlogo div.custom-glyphs div.custom-chars:focus {
    /* no rgba > see through app color strip */
    background-color: #e8e8e8;
}
.customize-symbol {
  z-index: 10000 !important;
}

@media only screen and (min-width: 1441px){
  .logo-box {
    padding: 5vw 5.5vw;
  }
}
@media only screen and (min-width: 2000px){
    .logo-box {
		padding: 1vw 5vw;
    }
}
/* phone big */
@media (max-width: 768px) {
  .lmlogo div.custom-glyphs {
    width: calc(100vw - 46px);
    left: 23px !important;
    transform: translateX(0%);
    position: fixed;
    /* too small */
    /* max-height: 22vh; */
    /* height of editor */
    /* important needed to override js for desktop */
    top: 22vh !important;
  }
  .logo-preview-container {
    height: auto;
    /* color presets open */
    z-index: 10;
    width: calc(100vw - 47px);
    border-radius: .5rem .5rem 0 0;
  }
  /* iframe and brand presentation: very specific browser width: top logo on view to be max container size */
  .page-app .viewonly .logo-preview-container {
    width: auto;
  }
  .logo-preview-container.logobox-fixed {
    top: 0;
    position: fixed;
  }
  .page-app .fade-in-top {
    /* known bug with css-transform: otherwise fixed pos not working */
    transform: none !important;
  }
}


/* ---------------------------------------- tool sidebar general for both logo maker and templates */
.lm-sidebar {
  background: rgba(119,119,119,.1);
  /* grid padding */
  margin-left: -15px;
  /* desktop cuts off when under;
  used to be 74
  cut off for very wide desktops > agency users */
  height: 83vh;
  /* catch for above's too short for stretched small screens */
  min-height: 600px;

  overflow-x: auto;
  overflow-y: scroll;
  border-radius: 0 .6rem .6rem 0;
}
.lm-sidebar::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
  margin-top: 20px;
}
.lm-sidebar::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: rgba(0,0,0,.1);
  border: 2px solid #e5e5e5;
}
.lm-sidebar::-webkit-scrollbar-track {
  /* needed for rounded corners sidebar */
  margin-top: 20px;
  margin-bottom: 20px;
}
/* sidebar template editor */
.page-image-editor .lm-sidebar {
  margin-left: 0;
  min-height: 80vh;

  /* same as #outerCanvas: */
  /* max-height: calc(100vh - 90px); */

  overflow-y: scroll;
  position: relative;
  /* reset from .lm-sidebar */
  height: auto;
}
.box-white .lm-sidebar {
    background: rgba(119,119,119,.4);
}
.lm-sidebar .lm-row-settings {
  border-bottom: 2px solid #f2f2f2;
}
@media (min-width: 768px) {
  .lm-sidebar .lm-row-settings:first-of-type {
    padding: 0.6rem 0;
    background: #e5e5e5;
    z-index: 100;
    width: calc(100% + 30px);
    position: sticky;
    top: 0px;
  }
  /* not yet for templates fixed */
  .page-image-editor .lm-sidebar .lm-row-settings:first-of-type {
    position: relative;
    width: auto;
  }
  .lm-sidebar .sidebar-pushdown {
    /* give space to fixed button bar on top */
    /* only needed w position fixed but not working in safari */
    /* margin-top: 67px; */
  }
}
/* .lm-sidebar .lm-row-settings:nth-last-of-type(2) */
.lm-sidebar .lm-row-settings:last-of-type {
  border-bottom: none;
  padding-bottom: .6rem;
}
.lm-sidebar .lm-row-settings.row-nolabel,
.lm-sidebar .menu-content.row-nolabel {
  padding-top: .7rem;
}
.lm-sidebar-section {
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
}
.lm-sidebar .lm-download-links .lm-prepare-lowres {
  margin-bottom: 0;
}
.page-brandkit-custom .link-group {
  position: fixed;
  z-index: 2;
  bottom: 0;
  background: rgba(255,255,255,.8);
  display: flex;
  justify-content: flex-end;

  border-top: 1px solid rgba(0,0,0,.04);
  width: 100%;
  left: 0;
  padding: 1rem 1rem 1.3rem;
}
.page-brandkit-custom .link-group .cta-pill {
  margin: 0 .5rem;
}
/* align with chat app */
.page-app .lm-download-links {
  padding: 0px;
}
.page-app .lm-download-links {
  display: flex;
  gap: 5px;
}
.page-app .lm-download-links .split {
  width: 50%;
}
.page-app .lm-download-links .split .lm-prepare-lowres,
.page-app .lm-download-links .split .lm-download-lowres,
.page-app .lm-download-links .split .cta-pill {
  padding: 0.5rem .3rem 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* chat button offset */
.page-app .lm-download-links .cta-pill:last-of-type {
  /* margin-right: 180px; */
}
.openButton {
  height: 35px !important;
  right: 20px !important;
}
/* larger phone, used to be 1024 */
@media (max-width: 767px) {
  .lm-download-links {
    padding: 0.6rem 1rem 0.8rem;
    /* flex-direction: column; */
  }
  .page-app .lm-download-links .cta-pill {
    font-size: calc(9px + .5vw);
    padding: 0.5rem 1rem;
    /* chat box */
    /* margin: 0 0.2rem; */
    height: 35px;
  }
  .openButton {
    bottom: 0.8rem !important;
  }
  .lm-sidebar-section {
    padding-bottom: 0;
  }
  .page-app .lm-download-links .split {
    width: 100%;
  }
}
/* mojo labels overwrite to brand strategy templates */
.mojo label,
.modal label,
.label {
  margin-bottom: 0;
  text-transform: uppercase;
  font-size: calc(.45rem + .2vw);
  /* tight toolbar line height of 1 when 2 lines label */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .09em;
  width: 100%;
  padding-bottom: 5px;
}
.mojo label.space {
  padding-top: 10px;
}
.mojo label.toggle-menu {
  cursor: pointer;
  /* caused jumpiness on close */
  /* float: left; */
  padding: .6rem 1.1rem .6rem;
  font-weight: 470;
  font-size: calc(.65rem + .2vw);
}
.mojo label .info {
  color: rgba(0,0,0,.4);
  text-align: right;
  float: right;
  text-transform: initial;
  letter-spacing: 0;
  font-weight: 400;
}
.menu-content {
  padding: .2rem 1rem .4rem;
  /* sets spacing for entire sidebar, if not set, space between labels and slider too wide */
  line-height: 1.1;
}
/* up down left right */
.position-options input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* remove inner shadow iphone */
  background-clip: padding-box;
  width: 100%;
  background: transparent;
  border: 3px solid rgba(119,119,119,.3);
  border-radius: 0;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  padding: 4px 1px 1px 5px;
}
/* always show arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}
/* on click inside *//* arrows */
.position-options input::-webkit-outer-spin-button,
.position-options input::-webkit-inner-spin-button {
   font-size: 20px;
   margin-top: -3px;
}
.box-white .position-options input {
    border-color: rgba(216,216,216,.3);
}
.position-options [class*='col']:not(:last-of-type) {
    padding-right: 7px;
}
.position-options input::placeholder {
    color: rgba(0,0,0,.6);
}
.box-white .position-options input::placeholder {
    color: rgba(216,216,216,.7);
}
.pick-input {
  display: flex;
  width: 100%;
  align-items: stretch;
  gap: 3px;
}
.pick-input div {
  flex-grow: 1;
  /* same width */
  flex: 1 1 0;
}
.pick-input input {
  background: #f7f7f7;
  width: 100%;
  border: none;
}
.pick-input div.btn-lm-gen {
  text-align: center;

  /* border-left: 1px solid rgba(246,246,246,1); */

  margin: 4px 0;
  padding: 1em .2em .8em;
  font-size: .75em;
  line-height: 1;
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: .02em;

  background-color: rgba(26,26,26,.1);
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
  cursor: pointer;
}
/* sidebar sections */
.menu-minus::after,
.menu-plus::after {
  content: '⭡';
  color: #333;
  position: absolute;
  right: 20px;
}
.menu-plus::after {
  content: ' ⭣ ';
}
/* larger phone, used to be 1024 */
@media (max-width: 767px) {
  .menu-content {
    padding-bottom: .8rem;
  }
  .menu-content:first-of-type {
    padding-top: .7rem;
  }
  .lm-sidebar {
    margin-left: 15px;
    margin-right: 15px;
    min-height: auto;
    height: auto;
    border-radius: 0 0 .5rem .5rem;
    padding-bottom: 10px;
  }
  .lm-sidebar-section .dropdown-menu.show {
    background: white;
    width: 100%;
  }
  .slider-input::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
  }
}
@media (max-width: 599px) {
  .page-image-editor .lm-sidebar {
    min-height: auto;
  }
  .lm-sidebar .lm-row-settings:last-of-type {
    padding-bottom: 0;
  }
  .slider-input  {
  }
  .mojo label {
    font-size: calc(7px + .5vw);
  }
}
/* end .lm-sidebar */
/* ---------------------- mockup section old, now only comp and phone */
.mockup-section h2,
.lm-download-section h2,
.mojo-content h2.section-hed,
h2.section-head,
.font-family-name {
  font-size: .75rem;
  /* folds on mobile */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-top: 1px solid #1a1a1a;
  padding-top: .7rem;
}
.font-family-name {
  font-family: 'BauhausMosyTextGX';
  font-style: normal;
  font-weight: 450;
  border-top: 0;
}
h2.section-head.incl-hr {
  margin-top: 3.6rem;
  margin-bottom: 3rem;
}
h2.section-head.excl-hr {
  border-top: none;
  padding-bottom: 2rem;
}
.mockup-section h2.lm-hed-integrated,
.lm-download-section h2.lm-hed-integrated {
  position: absolute;
  color: #fff;
  top: 5px;
  left: 15px;
  border-top: 2px;
}
/* 2 mockup rows equal height */
.mockup-section .row.no-gutters {
  /* min-height: 34vw; */
  aspect-ratio: 5 / 2;
}
/* 01. comp */
.mockup-comp {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: flex-end;
  overflow: hidden;
}
.comp-box {
  border: .35rem solid white;
  border-radius: 10px;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  width: 82%;
  height: 63%;
  box-shadow: -4px 11px 35px rgb(0 0 0 / 50%);
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.comp-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .7rem 1rem;
}
.vertical-layout .comp-top-bar {
  align-items: flex-start;
}
.comp-box-logo {
  font-size: calc(.5rem + .6vw);
  line-height: 1.4;
}
.comp-box-nav {
  /* too big on big screens */
  /* font-size: calc(.2rem + .6vw); */
  font-size: calc(.4rem + .15vw);
}
.comp-box-nav span {
  padding-left: .8rem;
}
.comp-box-head {
  /* test with Sway bold */
  font-size: calc(1.6rem + .15vw);
  line-height: 1.1;
  color: #fff;
  padding: 0.7rem 1rem;
  align-self: flex-start;
}
.mockup-comp-cta {
  font-family: 'BauhausMosyTextGX';
  font-feature-settings: normal;
  background: gray;
  font-size: calc(.6rem + .15vw);
  padding: 0.25rem 0.9rem;
  border-radius: 20rem;
  letter-spacing: .05em;
}
.comp-box-banner {
  font-size: calc(.6rem + .1vw);
  line-height: 1.2;
  background: gray;
  padding: 0.9rem 4rem 1.3rem 1rem;
}
/* 02. phone */
.mockup-phone {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}
.phone-box {
  border: .2rem solid white;
  border-radius: 13px;
  width: 27%;
  height: 63%;
  box-shadow: -4px 11px 35px rgb(0 0 0 / 50%);
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-content: center;
}
.phone-box-logo-icon {
  font-size: calc(3rem + .6vw);
}
.phone-box-logo-icon .logo-glyph {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  min-width: 1em; 
  min-height: 1em; 
  margin: 0px auto;
  max-width: 80%;
}
.phone-box-company-name {
  font-size: calc(.6rem + .15vw);
  line-height: 1.2;
  position: absolute;
  bottom: .5rem;
  padding: .3rem;
  width: 100%;

  display: flex;
  justify-content: center;
}
.phone-box-company-name .lmlogo {
  white-space: initial;
}
.phone-box-company-name .lmlogo div.logo-glyph {
  display: none;
}
/* 03. compare to .lmlogo */
.mainlogo-box {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(3px + 3.4vw);
  text-align: center;
}
.mockup-box.mockup-logo {
  padding: 0 1rem;
}

/* 04. biz card */
.mockup-biz {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;

  position: relative;
  overflow: hidden;
}
.bizcard-box {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  text-align: center;
  align-content: center;

  position: absolute;
  bottom: -1vw;
  width: 23vw;
}
.bizcard-box-3d {
  background-size: 29px;
  background-image: url("https://www.transparenttextures.com/patterns/groovepaper.png");
}
.bizcard-box-3d div.bizcard-box-top {
  box-shadow: 0.1rem 0.1rem 0.4rem rgb(0 0 0 / 34%);
  padding: 1rem 1.5rem;
  height: 12vw;
  width: 100%;
  align-items: start;
  transform: rotate(-45deg) scale(5.2) translate(-2rem, -1rem);
  transform-origin: top left;
  background-size: 29px;
  background-image: url(https://www.transparenttextures.com/patterns/paper-2.png);
  background-image: url(https://www.transparenttextures.com/patterns/groovepaper.png);
}
.bizcard-box .bizcard-box-top,
.bizcard-box .bizcard-box-bottom {
  box-shadow: -4px 11px 30px rgb(0 0 0 / 34%);
  padding: 1rem;
  /* used to be 12vw > not for big screens */
  height: 10rem;
  width: 17rem;
}
.bizcard-box-top {
  color: #fff;
  font-size: calc(1.6rem + .7vw);
  line-height: 1.2;
  margin-bottom: .5vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bizcard-box-top .layout {
  margin-bottom: 0em!important;
}
.bizcard-box-top .lmlogo {
  white-space: initial;
  line-height: 1.1;
}
.bizcard-box-bottom {
  color: #fff;
  text-align: left;
  font-size: calc(.4rem + .4vw);
  line-height: 1.4;
}
/* Stories */
.phone-stories {
  background: black;
  padding: 3rem;
}
.story {
  border-radius: 0.4rem;
  border: 1px solid rgba(255,255,255,.15);
  overflow: hidden;
  background: e6e7e8;
  background-size: contain;
  background-repeat: no-repeat;

  background-image: 
    url('/assets/images/brand-kit/stories-top.png'),
    url('/assets/images/brand-kit/stories-top.png');
  background-blend-mode: multiply, normal;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  /* ensure stories not getting too long or different in height size */
  aspect-ratio: .5 / 1;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.story div.headline {
  margin-bottom: 1rem;
  line-height: 1;
}
.story div.para {
  /* test with extrabold font */
  /* use em not rem to be relative to parent / when 2 stories are shown not 4 */
  font-size: .6em;
  line-height: 1.4;
  font-weight: 300;
  margin-bottom: 1rem;
}
.story div.para.small {
  font-size: .4em;
  margin-top: 1rem;
}
/* reset */
.page-app .brand-pres .story .file-box {
  min-height: auto;
  /* positions icon in square / circle */
  padding-top: 0.3rem;
  /* font metrics set to 1000 */
  padding: 0.1rem 0;
  aspect-ratio: 1 / 1;
}
.story-1 .logomark-in-secondary {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  /* extra space for ausladende letter symbols */
  padding: 20%;
}
.story-2 .story-head {
  font-size: 2rem;
  line-height: 1;
  /* border: 1px solid green; */
  display: flex;
  align-items: center;
  padding: 13%;
  /* flip without using rotate which is not responsive enough, easier to handle than absolute pos */
  writing-mode: vertical-rl;
  transform: scale(-1, -1);
  height: 70%;
}
/* top section */
.story-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transform: translate(10px, 18px);
  margin-bottom: 1rem;
  /* have long names go on next line not overflow */
  max-width: 90%;
}
.page-app .story-icon .logo-item {
  font-size: 1rem !important;
  /* may be needed for old font symbols but messes up alignment for svg */
  /* height: 30px; */
  /* make square instead */
  aspect-ratio: 1 / 1;
  min-height: auto;
  width: 30px;
  border-radius: 50%;
  margin-right: 7px;
  border: 1px solid rgba(255, 255, 255, .2);
}
.story-icon .handle {
  font-family: Helvetica, Arial;
  /* test in all widths so it looks okay on embed */
  font-size: calc(.3rem + .3rem);
  /* for long names */
  line-height: 1.2;
}
/* text */
.story-content {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  flex-direction: column;
  /* % works best on all sizes */
  padding: 10%;
}
.story-content p {
  font-size: calc(.4rem + .4vw);
  max-height: 25vw;
  overflow: hidden;
}
/* 05. Type */
.mockup-type {
  height: 100%;
}
.type-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  text-align: left;
  align-content: center;
}.type-box-letters {
  font-size: calc(9rem + 5.4vw);
  line-height: .6;
  padding: 0 0 0 2rem;
}
.mockup-caption {
  font-size: calc(.7rem + .4vw);
  line-height: 1.2;
  padding: 1rem 2.2rem 1.3rem;
}
/* 06. Colors */

/* additional 4-col grid in 3-col width */
.mockup-colors-box {
  display: flex;
  height: 100%;
  justify-content: flex-end;
  text-align: left;
  align-content: center;
}
.mockup-colors {
  /* color boxes horizontal spread evenly */
  flex: 1 1 0;
}
.mockup-colors div {
  display: flex;
  width: 100%;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
}.gray-box div:first-child {
  background: #282f2e;
}
.gray-box div:nth-child(2) {
  background: #808080;
}
.gray-box div:nth-child(3) {
  background: #c4c4c4;
}
.gray-box div:nth-child(4) {
  background: #eaeaea;
}
.gray-box .mockup-caption:first-child {
  /* grow shrink basis */
  flex: 2 .2 auto;
}
.color-box-icon {
  flex: 2 .2 auto;
  font-size: calc(30px + 2.4vw);
  line-height: 1.5;
  text-align: center;
}
.color-box-icon span {
  transform: translateY(-17%);
}
.lm-color-pickers .caption {
  font-size: calc(.3rem + .4vw);
  line-height: 1.2;
  padding: .5rem .7rem;
  position: absolute;
  bottom: 0;
}
.lm-color-pickers .caption .code {
  text-transform: uppercase;
}
/*resets for mockup section*/
.mockup-section .lmlogo .mother-glyph {
  padding:  0;
}
@media only screen and (min-width: 1281px) {
  .story div.para {
    /* test sway bold */
    font-size: .75em;
  }
}
/* when stories fold into 2x2 */
@media only screen and (max-width: 991px) {
  .story div.para {
    font-size: .35em;
  }
  .story div.para.small {
    font-size: .35em;
    margin-top: .1rem;
  }
}
/* phone big */
@media only screen and (max-width: 768px) {
  .mockup-section {
    margin-bottom: 5vw;
  }
  .mockup-section .mockup-box {
    /* check middle icon position in colors */
    min-height: 50vw;
  }
  .mockup-section h2,
  .lm-download-section h2,
  .mojo-content h2.section-hed {
    font-size: calc(7px + .7vw);
    margin-bottom: 8vw;
  }
  .comp-box {
    border: 4px solid white;
    width: 62%;
    height: 67%;
  }
  .comp-box-nav {
    font-size: 4px;
  }
  .comp-top-bar {
    padding: .55rem .7rem;
  }
  .comp-box-head {
    font-size: calc(13px + .4vw);
    padding: .7rem;
  }
  .mockup-comp-cta {
    padding-top: 0.25rem;
    padding-bottom: 0.15rem;
    margin-top: 0.3rem;
    float: left;
    font-size: .4rem;
  }
  .comp-box-banner {
    padding: .7rem;
  }
  .phone-box {
    border: 2px solid white;
    height: 70%;
    width: 20%;
  }
  .phone-box-logo-icon {
    font-size: calc(1.3rem + .6vw);
  }
  .bizcard-box-3d,
  .mockup-biz {
    min-height: 50vw;
  }
  .bizcard-box-3d div.bizcard-box-top {
    transform: rotate(-45deg) scale(5.2) translate(-2rem, 0.2rem);
  }
  .mainlogo-box {
    font-size: calc(9px + 3.4vw);
  }
  .bizcard-box {
    width: 39%;
  }
  .bizcard-box .bizcard-box-top,
  .bizcard-box .bizcard-box-bottom {
    height: 5rem;
    width: 10rem;
    padding: 0.5rem;
  }
  .bizcard-box .bizcard-box-top {
    font-size: calc(1rem + .7vw);
  }
  .bizcard-box-bottom {
    font-size: calc(5px + .4vw);
    padding: 0.5rem;
  }
  .mockup-caption {
    font-size: calc(5px + .3vw);
    padding: .3rem .2rem .3rem .4rem;
  }
  .type-box-letters {
    font-size: calc(30px + 17.4vw);
  }
  .story-content {
    padding: 1rem;
  }
  .story-2 .story-head {
    bottom: 7rem;
    left: 8.4rem;
    font-size: 1.8rem;
  }
  .story div.para {
    /* font-size: .4rem; */
  }
  .phone-stories .mb-30px,
  .phone-stories .p-5 {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}
/* ---------------------- type fonts & color mixins */

/* .uw100 { font-family: 'UnwindFlex-Thin';}
.uw200 { font-family: 'UnwindFlex-ExtraLight';}
.uw300 { font-family: 'UnwindFlex-Light';}
.uw400 { font-family: 'UnwindFlex-Regular';}
.uw500 { font-family: 'UnwindFlex-Medium';}
.uw600 { font-family: 'UnwindFlex-SemiBold';}
.uw700 { font-family: 'UnwindFlex-Bold';}
.uw800 { font-family: 'UnwindFlex-ExtraBold';}
.uw900 { font-family: 'UnwindFlex-Black';}

.bhr100 { font-family: 'BauhausRound-Thin';}
.bhr200 { font-family: 'BauhausRound-ExtraLight';}
.bhr300 { font-family: 'BauhausRound-Light';}
.bhr400 { font-family: 'BauhausRound-Regular';}
.bhr500 { font-family: 'BauhausRound-Medium';}
.bhr600 { font-family: 'BauhausRound-SemiBold';}
.bhr700 { font-family: 'BauhausRound-Bold';}
.bhr800 { font-family: 'BauhausRound-ExtraBold';}
.bhr900 { font-family: 'BauhausRound-Black';} */

/* .bhsgx  { font-family: 'BauhausSansExGX';}
.bhrgx  { font-family: 'BauhausRoundGX';}
.bhcgx  { font-family: 'BauhausCutGX';}
.bhbgx  { font-family: 'BauhausBubbleGX';}
.bhfgx  { font-family: 'BauhausSerifExGX';} */

.bhlgx     { font-family: 'BauhausLogoExVF'} /* can be removed soon */
.bhlgx-dl  { font-family: 'BauhausLogoExSeriesDLVF'}
.bhlgx-dl-2  { font-family: 'BauhausLogoExSeriesDL02VF'}
.bhlgx-dlr  { font-family: 'BauhausLogoExSeriesDLRVF'}
.bhlgx-dlr-2  { font-family: 'BauhausLogoExSeriesDLR02VF'}
.bhlgx-t   { font-family: 'BauhausLogoExSeriesTVF'}
.bhlgx-sw  { font-family: 'BauhausLogoExSeriesSWVF'}
.bhlgx-jool {font-family: 'BauhausLogoSymbolJOOL01VF'}
.bhlgx-yoga {font-family: 'BauhausLogoSymbolYOGA01VF'}
.bhlgx-pop {font-family: 'BauhausLogoSymbolPOP01VF'}
.bhlgx-pop-2 {font-family: 'BauhausLogoSymbolPOP02VF'}

.bhlgx-appa {font-family: 'BauhausLogoSymbolAPPA01VF'}
.bhlgx-educ {font-family: 'BauhausLogoSymbolEDUC01VF'}
.bhlgx-tech {font-family: 'BauhausLogoSymbolTECH01VF'}

.bhlgx-cube   { font-family: 'BauhausLogoExSeriesCUBEVF'}
.bhlgx-pizza   { font-family: 'BauhausLogoExSeriesPIZZAVF'}

.bhlgx-symbol   { font-family: 'BauhausLogoSymbolAAVF'}
.bhlgx-symbol-2  { font-family: 'BauhausLogoSymbolAA02VF'}


/* new font classes: add to remove in js under //cut */

.bhsgx-ss01  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss01';
}
.bhsgx-ss02  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss02';
}
.bhsgx-ss03  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss03';
}
.bhsgx-ss04  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss04';
}
.bhsgx-ss05  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss05';
}
.bhsgx-ss08  {
  /* font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss08'; */
}
.bhsgx-ss09  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss09';
}
.bhsgx-ss10  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss10';
}
.bhsgx-ss11  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss11';
}
.bhsgx-ss12  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss12';
}
.bhsgx-ss14  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss14';
}
.bhsgx-ss15  {
  font-family: 'BauhausSansExGX';
  font-feature-settings: 'ss15';
}
/* test */
/* .bhsansgeoneu-cv01  {
  font-family: 'BauhausSansGeoNeuVF';
  font-feature-settings: 'cv01';
} */
.bhsansgeoneu  {
  font-family: 'BauhausSansGeoNeuVF';
}
.bhapexgx { font-family: 'BauhausApexDisplayGX';}
.bhacmegx { font-family: 'BauhausAcmeDisplayGX';}
.bhankygx { font-family: 'BauhausAnkyDisplayGX';}
.bhbaugx  { font-family: 'BauhausBauDisplayGX';}
.bhboolgx { font-family: 'BauhausBoolDisplayGX';}
.bhcutgx  { font-family: 'BauhausCutDisplayGX';}
.bhslyegx { font-family: 'BauhausSlyeDisplayGX';}
.bhvolegx { font-family: 'BauhausVoleDisplayGX';}
.bhnanogx { font-family: 'BauhausNanoDisplayGX';}
.bhquingx { font-family: 'BauhausQuinDisplayGX';}
.bhquilgx { font-family: 'BauhausQuilDisplayGX';}
.bhgojigx { font-family: 'BauhausGojiDisplayGX';}
.bhlocogx { font-family: 'BauhausLocoDisplayGX';}
.bhlacegx { font-family: 'BauhausLaceDisplayGX';}
.bhlacrgx { font-family: 'BauhausLaceRndDisplayGX';}
.bhpoutgx { font-family: 'BauhausPoutDisplayGX';}
.bhskaygx { font-family: 'BauhausSkayDisplayGX';}
.bhbyrlgx { font-family: 'BauhausByrlDisplayGX';}
.bhkijsgx { font-family: 'BauhausKijsDisplayGX';}
.bhdeskgx { font-family: 'BauhausDeskDisplayGX';}
.bhmosygx { font-family: 'BauhausMosyDisplayGX';}
.bhrozigx { font-family: 'BauhausRoziDisplayGX';}
.bheddegx { font-family: 'BauhausEddeDisplayGX';}
.bhscalgx { font-family: 'BauhausScalDisplayGX';}
.bhslimgx { font-family: 'BauhausSlimDisplayGX';}
.bhswaygx { font-family: 'BauhausSwayDisplayGX';}
.bhswavgx { font-family: 'BauhausSwavDisplayGX';}
.bhsoyagx { font-family: 'BauhausSoyaDisplayGX';}
.bhquikgx { font-family: 'BauhausQuikDisplayGX';}
.bhmioxgx { font-family: 'BauhausMioxDisplayGX';}
.bhmodgx { font-family: 'BauhausModDisplayGX';}
.bhquesgx { font-family: 'BauhausQuesDisplayGX';}
.bhratigx { font-family: 'BauhausRatiDisplayGX';}
.bhchezgx { font-family: 'BauhausChezDisplayGX';}
.bhsoftgx { font-family: 'BauhausSoftDisplayGX';}
.bhcestygx { font-family: 'BauhausCestyDisplayGX';}
.bhplocgx { font-family: 'BauhausPlocDisplayGX';}
.bhromagx { font-family: 'BauhausRomaDisplayGX';}
.bhrailgx { font-family: 'BauhausRailDisplayGX';}
.bhgeogx { font-family: 'BauhausGeoDisplayGX';}

/* bhaus display Geo */
.bhdisplaygeogx  { font-family: 'BauhausDisplaySansGeoVF';}

/* bh2 */
.bhfgx-ss01  {
  font-family: 'BauhausSerifExGX';
  font-feature-settings: 'ss01';
}
.bhfgx-ss02  {
  font-family: 'BauhausSerifExGX';
  font-feature-settings: 'ss02';
}
.bhfgx-ss03  {
  font-family: 'BauhausSerifExGX';
  font-feature-settings: 'ss03';
}
.bhfgx-ss04  {
  font-family: 'BauhausSerifExGX';
  font-feature-settings: 'ss04';
}
/* roma > now its own font */
.bhfgx-ss05,
.bhromagx  {
  /* font-family: 'BauhausSerifExGX';
  font-feature-settings: 'ss05';
  font-feature-settings: 'normal'; */
}
.bhfgx-ss06,
.bhchezgx  {
  /* font-family: 'BauhausChezDisplayGX';
  font-feature-settings: 'normal'; */
}
.bhfgx-ss10  {
  font-family: 'BauhausSerifExGX';
  font-feature-settings: 'ss10';
}
.bhfgx-ss11  {
  font-family: 'BauhausSerifExGX';
  font-feature-settings: 'ss11';
}
.bhfgx-ss15  {
  font-family: 'BauhausSerifExGX';
  font-feature-settings: 'ss15';
}
.bhfgx-ss16  {
  font-family: 'BauhausSerifExGX';
  font-feature-settings: 'ss16';
}

.bhlgx  {
  font-family: 'BauhausLogoExVF';
}
.bhlgx-ss02  {
  font-family: 'BauhausLogoExVF';
  font-feature-settings: 'ss02';
}
.bhlgx-ss03  {
  font-family: 'BauhausLogoExVF';
  font-feature-settings: 'ss03';
}
.bhlgx-ss04  {
  font-family: 'BauhausLogoExVF';
  font-feature-settings: 'ss04';
}

.bauhausgeoexvf {
  font-family: 'BauhausGeoExVF';
}
.bauhausacmeexvf {
  /* font-family: 'BauhausAcmeExVF'; */
}
.bauhausdeskexvf {
  font-family: 'BauhausDeskDisplayVF';
}
.bauhausboolxvf {
  font-family: 'BauhausBoolExVF';
}
.bauhausmodexvf {
  font-family: 'BauhausModExVF';
}
.bauhausslyexvf {
  font-family: 'BauhausSlyeExVF';
}

/* bh logo */
.bhlgx-ss02  {
  font-family: 'BauhausLogoExVF';
  font-feature-settings: 'ss02';
}

.lm-wgt100 { font-weight: 100;}
.lm-wgt200 { font-weight: 200;}
.lm-wgt300 { font-weight: 300;}
.lm-wgt400 { font-weight: 400;}
.lm-wgt500 { font-weight: 500;}
.lm-wgt600 { font-weight: 600;}
.lm-wgt700 { font-weight: 700;}
.lm-wgt800 { font-weight: 780;}
/* keep f open */
.lm-wgt900 { font-weight: 810;}

.lm-asi { text-transform: none; }
.lm-tit { text-transform: capitalize; }
.lm-cap { text-transform: uppercase; }
.lm-low { text-transform: lowercase; }

.lm-kern-10 { letter-spacing: -.1em;  }
.lm-kern-07 { letter-spacing: -.07em; }
.lm-kern-05 { letter-spacing: -.05em; }
.lm-kern00  { letter-spacing:   0;    }
.lm-kern05  { letter-spacing: .05em;  }
.lm-kern10  { letter-spacing:  .1em;  }
.lm-kern20  { letter-spacing:  .17em; }
.lm-kern30  { letter-spacing:  .23em; }

/* colors landing page only */

.page-logo-maker .color-pre-a02 { background-color: #e5012c; }
.page-logo-maker .color-pre-a02 .lmlogo { color: #ededed; }
.page-logo-maker .color-pre-a03 { background-color: #F40658; }
.page-logo-maker .color-pre-a03 .lmlogo { color: #F0D53D; }
.page-logo-maker .color-pre-a04 { background-color: #af0f78; }
.page-logo-maker .color-pre-a04 .lmlogo { color: #E4E2D8; }
.page-logo-maker .color-pre-a05 { background-color: #691b99; }
.page-logo-maker .color-pre-a05 .lmlogo { color: #CCCFFA; }

.page-logo-maker .color-pre-a02 { background-color: #ededed; }
.page-logo-maker .color-pre-a02 .lmlogo { color: #e5012c; }
/* .page-logo-maker .color-pre-a03 { background-color: #F0D53D; }
.page-logo-maker .color-pre-a03 .lmlogo { color: #F40658; } */
.page-logo-maker .color-pre-a04 { background-color: #E4E2D8; }
.page-logo-maker .color-pre-a04 .lmlogo { color: #af0f78; }
/* .page-logo-maker .color-pre-a05 { background-color: #CCCFFA; }
.page-logo-maker .color-pre-a05 .lmlogo { color: #691b99; } */


/* logo symbols */

.page-logo-maker .lm-var-none .logo-glyph-container .logo-glyph {
  display: none;
}

.page-logo-maker .lm-var-dl-01 .logo-glyph-container .logo-glyph {
  font-variation-settings: "LENG" 100, "MORP" 100;
  font-weight: 500;
}
.page-logo-maker .lm-var-dl-02 .logo-glyph-container .logo-glyph {
  font-variation-settings: "LENG" 0, "MORP" 0;
}
.page-logo-maker .lm-var-dl-03 .logo-glyph-container .logo-glyph {
  font-variation-settings: "LENG" 0, "MORP" 100;
}
.page-logo-maker .lm-var-dl-04 .logo-glyph-container .logo-glyph {
  font-variation-settings: "LENG" 100, "MORP" 0;
  font-weight: 400;
}

.page-logo-maker .lm-var-dlr-01 .logo-glyph-container .logo-glyph {
  font-family: 'BauhausLogoExSeriesDLR02VF';
  font-variation-settings: "LENG" 100, "MORP" 100;
}
.page-logo-maker .lm-var-dlr-02 .logo-glyph-container .logo-glyph {
  font-family: 'BauhausLogoExSeriesDLR02VF';
  font-variation-settings: "LENG" 0, "MORP" 0;
}
.page-logo-maker .lm-var-dlr-03 .logo-glyph-container .logo-glyph {
  font-family: 'BauhausLogoExSeriesDLR02VF';
  font-variation-settings: "LENG" 0, "MORP" 100;
}
.page-logo-maker .lm-var-dlr-04 .logo-glyph-container .logo-glyph {
  font-family: 'BauhausLogoExSeriesDLR02VF';
  font-variation-settings: "LENG" 100, "MORP" 0;
}

.page-logo-maker .lm-var-t-01 .logo-glyph-container .logo-glyph {
  font-family: 'BauhausLogoExSeriesTVF';
  font-variation-settings: "LENG" 100, "MORP" 100;
}
.page-logo-maker .lm-var-t-02 .logo-glyph-container .logo-glyph {
  font-family: 'BauhausLogoExSeriesTVF';
  font-variation-settings: "LENG" 0, "MORP" 0;
  font-weight: 700;
}
.page-logo-maker .lm-var-t-03 .logo-glyph-container .logo-glyph {
  font-family: 'BauhausLogoExSeriesTVF';
  font-variation-settings: "LENG" 0, "MORP" 100;
}
.page-logo-maker .lm-var-t-04 .logo-glyph-container .logo-glyph {
  font-family: 'BauhausLogoExSeriesTVF';
  font-variation-settings: "LENG" 100, "MORP" 0;
}

/** IF NEW CLASSES ARE ADDED to this section, PLEASE UPDATE JAVASCRIPT TOO **/




/* image editor */
#content {
  padding-right: 0;
}
.big-container {
  display: flex;
  justify-content: center;
  background-color: gray;
  /* padding-top: 2rem; */
  height: 100%;
}
#outerCanvas {
  position: relative;
  width: 100%;
  overflow: scroll;

  /* can't see/ scroll to top of artboard when large and zoomed in */
  /* max-height: calc(100vh - 90px); */

  display: flex;
  /* hori align  */
  justify-content: center;
  /* vertical align  */
  align-items: center;
}.canvas-container  canvas {
}

/* BOOTSTRAP overwrites */

.container-fluid,
.container-lg,
.container {
  padding-left: 3vw;
  padding-right: 3vw;
}
.table td,
.table th {
  /* padding right makes table more than 100% width */
  padding: .45rem 0 .2rem 0;
  font-weight: 440;
  border-top: 1px solid rgba(0,0,0,.15);
  /* account page */
  font-size: calc(.5rem + .5vw);
  line-height: 1.2;
}
.table td {
  color: rgba(0, 0, 0, 0.7);
  font-weight: 340;
  /* font-size: calc(1.3rem - .4vw); */
}
.alert {
  margin-bottom: 2rem;
  font-weight: 340;
}
.alert-info {
  color: rgba(0,0,0,.8);
  background-color: rgba(255,255,255,1);
  border-color: transparent;
}
.mt-30px {
  margin-top: 30px;
}
.mt-40px {
  margin-top: 40px;
}
.mb-30px {
  margin-bottom: 30px;
}
.mb-40px {
  margin-bottom: 40px;
}
.mt-6 {
  margin-top: 6rem;
}
.mb-6 {
  margin-bottom: 6rem;
}
.mt-10 {
  margin-top: 10rem;
}
.mb-10 {
  margin-bottom: 10rem;
}

@media only screen and (max-width: 768px) {
  #outerCanvas {
    max-height: calc(30vh);
  }
  .page-image-editor #content {
    padding-right: 15px;
  }
  .big-container {
    /* phone artboard as short as possible */
    /* padding-bottom: 2rem; */
    height: auto;
  }
  .page-image-editor .lm-sidebar {
    margin-left: 15px;
    margin-bottom: 15px;
  }
  .lm-sidebar .lm-row-settings {
    /* margin-left: 0; */
  }
  /* screen width to be confirmed */
  .container-fluid,
  .container-lg,
  .container {
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .mt-5, .my-5 {
    /* instead of 3 for mobile */
    margin-top: 1rem!important;
  }
  .page-account .table td,
  .page-account .table th{
    font-size: calc(.6rem + .35vw);
    padding: .35rem .2rem .2rem 0;
  }
}
/* ---------------------- brandkit styleguide page, logo maker page */.row.mb-30,
.lm-edit-section.mb-30 {
  margin-bottom: 30px;
}
@media only screen and (max-width: 768px) {
  .row.mb-30 {
    margin-bottom: 0;
  }
  .page-app h3.bk
  .mbmobile-30,
  .row.mb-30.mbmobile-30 {
    margin-bottom: 20px;
  }
  .mbmobile-30 {
    margin-bottom: 20px;
  }
}
.card-option {
  background: white;
  padding: 1rem 1.3rem .1rem;
  margin-bottom: 2rem;
  border-radius: .3rem;
}
.page-brand-kit .card-option h2,
.card-option h2 a {
  border-top: 0;
  font-size: calc(16px + .9vw);
}
.page-app h2.bk,
.page-brand-kit h2,
.lm-tocbar-section {
  border-top: 2px solid rgba(0,0,0,.04);
  margin-top: 40px;
  margin-bottom: 15px;
}
.page-app h2.bk,
.page-brand-kit h2 {
  padding: .4rem 0;
}
.pos-rel {
  position: relative;
}
.lm-tocbar-section.brands,
.lm-tocbar-section.account {
  margin-top: 0;
  border-top: 0;
}
.lm-tocbar-section.account .section-head {
  /* align w brand list */
  margin-bottom: 19px;
}
.lm-tocbar-section a.cta-arrow {
  padding: .5rem 1.3rem .35rem;
}
.lm-tocbar-section a.cta-arrow:hover,
.lm-tocbar-section a.cta-arrow:focus,
.affiliate-feature a.cta-arrow:hover,
.affiliate-feature a.cta-arrow:focus {
  border-bottom: 2px solid rgba(0,0,0,.2);
}
.affiliate-feature {
  background: white;
  border-radius: .3rem;
  padding: 2rem 1rem 1rem;
  margin: 2rem 0;
}
.affiliate-feature h4 {
  font-size: calc((1.2 - 1) * 1.2vw + 1rem);
}
.affiliate-feature p {
  font-size: calc(5px + .57vw);
}
@media only screen and (max-width: 768px) {
  .affiliate-feature p {
    font-size: calc(12px + .57vw);
  }
}
.page-brand-kit input#brandname.mm-form-input {
  font-size: calc(7px + .9vw);
  font-weight: 400;
  letter-spacing: 0;
  border-radius: 2px;
  background: transparent;
  padding: .3rem 0;
}
.fade-into {
  /* duration | function | delay  */
  animation: fadeinto .8s cubic-bezier(0.270, -0.020, 0.355, 0.925) 0s both;
}
@keyframes fadeinto {
  0% {
    transform: translateY(-10vh);
  }
  80% {
    transform: translateY(0);
  }
}
.lm-tocbar-section a {
  text-decoration: none;
  display: block;
  padding: .3rem 0;
}
.page-app h3.bk,
.page-brand-kit .brand-kit h3,
.page-brand-kit .brand-kit h4 {
  border-top: 2px solid rgba(0,0,0,.04);
  padding: .6rem 0;
  color: rgba(0,0,0,.9);
  font-size: calc(.8rem + .2vw);
  line-height: 1;
  font-weight: 450;
  margin-top: 15px;
  margin-bottom: 2rem;
}
.page-brand-kit .template-row div.col-md-temp img {
  float: none;
}
.page-app .logo-in-white.file-box,
.page-app .logomark-in-white.file-box,
.page-app .wordmark-in-white.file-box {
  background-color:  black;
}
.page-app .file-box {
  background: white;
  aspect-ratio: 5 / 3;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: .6rem;
}
/* not to small, they fold in diff browser widths otherwise */
/* bit more bottom padding for middle alignment optically */
.page-app .file-box.medium,
.page-app .file-box.large {
  padding: 15% 20% 17%;
}

.page-app .vertical-layout .file-box.medium,
.page-app .vertical-layout .file-box.large {
  aspect-ratio: 1 / 1;
} 

/* avatar */
.page-app .avatar-container div[class*='logomark-'].file-box {
  /* new fonts 1000 metrics padding top 0 */
  /* padding-top: 3.3vw;
  padding-top: 0;
  padding-bottom: 0; */
  padding-left: 1vw;
  padding-right: 1vw;
  /* overflow hidden adds trans px on download */
  /* overflow: hidden; */

  /* same height as width */
  aspect-ratio: 1 / 1;
}
.page-app .avatar-container div[class*='logomark-'].file-box span,
.page-app .avatar-container div[class*='logomark-'].file-box div {
  font-size: 12vw;
  line-height: 1;
}
.page-app .symbol-logo .logo-glyph,
.page-app .story-1 .logo-glyph {
  font-size: inherit !important;
}
.page-app .phone-stories .file-box {
  padding: 0vw;
}
.page-app .story .story-icon .logo-glyph {
  font-size: 1em !important;
}
.page-app div[class*='logomark-'].file-box {
  /* new fonts 1000 metrics padding top 0 */
  /* padding-top: 2.2vw;
  padding-top: 0;
  padding-bottom: 0; */
}

.page-app div[class*='logomark-'].file-box:has(.bhlgx-symbol-2),
.page-app div[class*='logomark-'].file-box:has(.bhlgx-jool),
.page-app div[class*='logomark-'].file-box:has(.bhlgx-yoga),
.page-app div[class*='logomark-'].file-box:has(.bhlgx-dlr-2),
.page-app div[class*='logomark-'].file-box:has(.bhlgx-pop-2),
.page-app div[class*='logomark-'].file-box:has(.bhlgx-appa),
.page-app div[class*='logomark-'].file-box:has(.bhlgx-educ),
.page-app div[class*='logomark-'].file-box:has(.bhlgx-tech),
.page-app div[class*='logomark-'].file-box:has(.bhlgx-dl-2) {
  /* padding-top: 0px; */
}


/* avatar */
.page-app .avatar-container {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.page-app .avatar-container .file-box {
  /* new square via aspect-ratio */
  width: 18vw;
  /* center within square */
  display: flex;
  align-items: center;
}
.page-app .avatar-container .file-box:nth-of-type(2) {
  border-radius: 10%;
}
.page-app .avatar-container .file-box:nth-of-type(3) {
  border-radius: 50%;
}
.avatar-container .logo-item svg {
  margin-top: -0.1125rem;
}
/* end avatar */

.page-brand-kit .template-caption,
.page-app .template-caption {
  display: flex;
  gap: .2rem;
  /* hack to keep float below */
  border: 1px solid transparent;
  /* if no tags, customize btn will stay right */
  justify-content: space-between;
  align-items: baseline;

  gap: 0;
  flex-direction: column;
  align-items: start;
  padding-top: .3rem;
}
/* all captions */
.page-brand-kit .caption-title,
.page-app .caption-title {
  font-size: .8rem;
  line-height: 1.4;
  font-weight: 300;
  margin-bottom: 0.6rem;
  /* border: 1px solid yellow; */
}
.page-app .type-02 .download-logo-kit.cta-pill {
  margin-right: 1.2rem;
}
/* captions on top of file box not below */
.page-app .template-caption.type-02 {
  position: absolute;
  bottom: 1.5vw;
  bottom: 15px;
  z-index: 10000;
  width: calc(100% - 30px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-end;
  flex-direction: row;
}
.page-app .template-caption.type-02.template-caption-0 {
  margin-left: 1.2rem;
}
.page-brand-kit .type-02 .caption-title,
.page-app .type-02 .caption-title {
  max-width: 30%;
  margin-bottom: 0;
  margin-left: 1.2rem;
}
.page-app .type-02.template-caption-1 .caption-title {
  max-width: 175px;
}
.page-app.guestLogo .cta-pill,
.page-app.guestLogo .cta-pill.small {
  position: relative;
  /* added space to main green btn and some others
  padding-left: 2rem; */
  /* font-size: 120%; */
  line-height: 1.2;
}
.page-app.guestLogo .brand-pres .cta-pill,
.page-app.guestLogo .brand-pres .cta-pill.small  {
  padding-left: 2rem;
}
.page-app.guestLogo .brand-pres .cta-pill::before {
  content: "\E070";
  font-size: 12px;
  line-height: 1;
  position: absolute;
  display: inline-block;
  bottom: 8px;
  left: 15px;
  font-weight: 400;
  color: #fff;
  border-radius: 50px;
}
/* –––––––––––––––––––––– logo maker app FAQ */
.faq {
  border-top: 2px solid;
  width: 80%;
  margin: 0 auto;
}
.faq details {
  border-top: 1px solid rgba(0, 0, 0, .8);
  padding-top: .5rem;
  margin-top: .5rem;
}
/* question */
.faq summary {
  font-weight: 460;
  letter-spacing: -.01rem;
  cursor: pointer;
  list-style: none; /* Removes default disclosure triangle in some browsers */
  /* same as p for answer */
  font-size: calc(7px + .57vw);
}
.faq summary::marker {
  display: none; /* Hides the default marker in browsers that support ::marker */
}
.faq summary::before {
  content: '+';
  margin-right: 10px;
  width: 10px;
  display: inline-block;
}
.faq details[open] summary::before {
  content: '–';
}
.faq p {
  margin-top: 10px;
  padding-left: 20px;
  font-weight: 340;
  letter-spacing: -.01rem;
}
@media only screen and (min-width: 1281px) {
  .page-brand-kit .caption-title,
  .page-app .caption-title {
    font-size: .8rem;
    line-height: 1.4;
    font-weight: 300;
    margin-bottom: 0.6rem;
  }
  .page-app .type-02.template-caption-1 .caption-title,
  .page-app .type-02 .caption-title {
  }
}
@media only screen and (max-width: 768px) {
  .page-app .template-caption {
    margin-bottom: 30px;
  }
  .page-app .template-caption.type-02 {
    position: absolute;
    bottom: -1rem;
  }
  .page-brand-kit .caption-title,
  .page-app .caption-title,
  .page-app .type-02 .caption-title {
    margin-bottom: 0.5rem;
    padding-right: 0;

    font-size: .6rem;
  }
  .page-app .type-02.template-caption-1 .caption-title,
  .page-app .type-02 .caption-title {
    max-width: 30%;
  }
  .page-app .avatar-container {
    /* left align and smaller gap */
    justify-content: flex-start;
    gap: 1rem;
  }
}
.page-brand-kit .bk-color-box,
.page-account .bk-color-box {
  position: relative;
  min-height: 100px;
}
.page-brand-kit .bk-color-box input[type="color"],
.page-app .pick-option input[type="color"] {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  border: 0;
  /* min-height: 200px; */
  /* min-height: 20vh; */
  border-color: transparent;
  outline: none;
  -webkit-appearance: none;
}
.lm-sidebar .page-app .pick-option input[type="color"] {
  min-height: 30px;
  border: 1px solid rgb(209,209,209);
}
/* remove default border */
.page-brand-kit input[type="color"]::-webkit-color-swatch-wrapper,
.page-app input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
.page-brand-kit input[type="color"]::-webkit-color-swatch,
.page-app input[type="color"]::-webkit-color-swatch {
	border: none;
}
.page-brand-kit .bk-color-box span,
.page-account .bk-color-box span {
  font-size: calc(6px + .4vw);
}
.page-brand-kit .bk-color-box input + span,
.page-account .bk-color-box span {
  position: absolute;
  font-size: calc(6px + .4vw);
  line-height: 1.2;
  padding: .3rem .7rem .1rem .6rem;
  background: rgba(255,255,255,.7);
  bottom: .4rem;
  left: .4rem;
  border-radius: 3px;
}
.page-brand-kit .explainer {
  color: rgba(0,0,0,.8);
  margin-bottom: 2rem;
  font-weight: 400;
  background: lightyellow;
  border-radius: .2rem;
  padding: 2rem;
}
.bk-font-preview {
  /* don’t add ligatures to preview, eg. st */
  font-variant-ligatures: none;
  /* phone sway swav font */
  overflow: hidden;
}
.font-preview-big {
  font-size: calc((6.6 - 1.5) * 2.2vw + .2rem);
  line-height: 1;
  /* prevent cut off AaBb > test w BH Lace */
  padding-top: 2rem;
  padding-left: .7rem;
}
.font-preview-small {
  font-size: calc((1.6 - .5) * 1.2vw + .3rem);
  line-height: 1.2;
  /* align left w big preview, depends on font; big needs some padding on left */
  padding-left: 1.4rem;
  padding-left: 11px;
}
.page-brand-kit table {
  width: 100%;
}
.page-brand-kit table.bk-border-top,
.page-brand-kit div.bk-border-top {
  border-top: 1px solid rgba(0,0,0,.4);
  padding: .8rem 0;
}
.adding-row label {
  margin-bottom: 0;
  font-size: calc(.45rem + .2vw);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
  width: 100%;
}
.adding-row input {
  width: 100%;
  background-color: rgba(255,255,255,.9);
  text-transform: initial;
  font-size: calc(.9rem + .2vw);
  font-weight: 380;
  line-height: 1.4;
  border: 0;
  border-radius: 0;
  letter-spacing: 0;
  padding: .32rem .5rem .2rem .6rem;
  background-position: right .55rem center;
  margin-bottom: 4px;
}
.page-brand-kit .cta-pill,
.page-account .cta-pill {
  margin-bottom: 4px;
  /* amounts to approx height from input */
  padding: .7rem 1.3rem .6rem;
}
.adding-row .small {
  color: rgba(0,0,0,.45);
  font-weight: 320;
}
@media only screen and (max-width: 768px) {
  .lm-tocbar-section.brands,
  .lm-tocbar-section.account {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .card-option h2 a {
    font-size: calc(13px + .9vw);
  }
  .card-option p {
    font-size: calc(9px + .55vw);
  }
  .font-preview-big {
    font-size: calc(5rem + 2vw);
    margin-top: 1rem;
    padding-left: 3px;
  }
  .font-preview-small {
    font-size: calc(.8rem + .1vw);
    padding-left: 3px;
  }
  .cta-pill.big {
    /* font-size: calc((2 - 1) * 1.2vw + .6rem); */
  }
  .page-brand-kit .cta-pill,
  .page-account .cta-pill {
    padding: .4rem 1.3rem .2rem;
  }
  .adding-row label {
    line-height: 1.2;
  }
  .adding-row .small {
    line-height: 1.1;
    font-size: 64%;
  }
}
/* brand kit v3 – brand in context section | brand presentation | mockup */

.page-app .brand-pres .file-box {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(119, 119, 119, .1);
}
.page-app .brand-pres .bg-wasser {
  height: 100%;
  position: absolute;
  top: 0;
  width: calc(100% - 30px);

  background-color: #ffffff;
  opacity: .15;
  background-image:  repeating-linear-gradient(45deg, #7b7b7b 25%, transparent 25%, transparent 75%, #7b7b7b 75%, #7b7b7b), repeating-linear-gradient(45deg, #7b7b7b 25%, #ffffff 25%, #ffffff 75%, #7b7b7b 75%, #7b7b7b);
  background-position: 0 0, 9px 9px;
  background-size: 18px 18px;

  display: none;
}
@media only screen and (max-width: 768px) {
  .symbol-logo .logo-item span {
    transform: scale(2);
  }
  .logo-item.file-box.small,
  .story .logo-item:nth-child(2) {
    font-size: 14vw !important;
  }
}
/* –––––––––––––––––––––––––––––––––––––––––– logo ideas CSS, now logo inspo inspiration */

.input-search {
  border-radius: 5em;
  outline: none;
  border: 0;
  padding: 0 1.4em;
  width: 70%;
  font-size: calc((1.6 - 1.15) * 1.1vw + .8rem);
  line-height: 3;
  font-weight: 260;
  color: #333;
}
input:focus,
input:focus-visible {
  outline: none;
}
/* logo ideas */
.search-row {
  transform: translateY(0rem);
  animation: init-slidein .8s cubic-bezier(.19,1,.22,1) 0s both;

  height: 30vh;
  align-items: center;
  left: 0;

  transition-delay: 0s;
  transition-duration: .6s;
  transition-timing-function: cubic-bezier(.19,1,.22,1);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  /* -webkit-transform: translateZ(0); */
  /* transform: translateZ(0); */
  /* transform: translateY(-100%); */
  /* transform: translateY(0%); */
}
.search-row.active {
  height: 20vh;
  bottom: 20px;
  position: fixed;
  z-index: 100;
  width: 100%;
}
.search-row.active .input-search {
  /* box-shadow: -6px 16px 51px 20px rgba(0,0,0,0.39); */
}

@keyframes shrinkrow {
  from {
    height: 30vh;
  }

  to {
    height: 20vh;
  }
}.col-brand-kitty {
  position: relative;
}
.brand-kit-item {
  opacity: 0;
  align-items: center;
  justify-content: center;
  display: flex;

  margin-bottom: 30px;
  height: 44vh;
  font-size: calc(4em + 1.2vw);
  /* TEXT FIT SIZING */
  padding: 140px;
  padding: 7vw;
}
.brand-kit-item.active {
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-name: brandrise;
  animation-fill-mode: forwards;
}
@keyframes brandrise {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.page-inspo h1 {
  padding: 0;
  padding-bottom: 2rem;
  font-size: calc(1rem + 2vw);
  line-height: .8;
  font-weight: 530;
  letter-spacing: -.06rem;
}
.active h1 {
  display: none;
}
.color-palette-preview {
  position: absolute;
  left: 2rem;
  bottom: 3.3rem;
}
.color-palette-preview span {
  height: 4vw;
  width: 4vw;
  display: inline-block;
  border-radius: 50%;
  margin-left: 1rem;
}
.logo_idea_customize.fakelink {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  -webkit-transform: translateY(-55%);
  transform: translateY(-55%);
}
.buy_now.fakelink {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  -webkit-transform: translateY(-55%);
  transform: translateY(-55%);
}
/* font inspo inspiration page */
.page-inspo .brands-container .row .col-md {
  max-width: 50%;
}
@media only screen and (max-width: 768px) {
  .search-row {
    /* height: 65vh; */
    left: 3vw;
  }
  .page-inspo h1 {
    font-size: calc((2) * 1.2vw + 2rem);
    line-height: 1.1;
    /* font-weight: 700; */
    letter-spacing: -.05rem;
  }
  .input-search {
    width: 94%;
    /* box-shadow: 0px 0px 200px 2px rgb(0 0 0 / 69%); */
  }
  .brand-kit-item {
    font-size: calc(3rem + 1.2vw);
    height: 50vh;
    margin-bottom: 25px;
  }
  .color-palette-preview {
    bottom: 3rem;
  }
  .color-palette-preview span {
    margin-left: .5rem;
  }
  .logo_idea_customize.fakelink {
    right: 2rem;
    bottom: 1.4rem;
    font-size: .8rem;
    padding: 0.6rem 1.3rem 0.5rem;
  }
  .buy_now.fakelink {
    position: absolute;
    right: 3rem;
    top: 3rem;
    -webkit-transform: translateY(-55%);
    transform: translateY(-55%);
  }
}

/* –––––––––––––––––––––––––––––––––––––––––– Subscriber / Account CSS */.page-account h2.section-head {
  padding-right: 0;
}
.page-account h3.section-head {
  font-size: .8rem;
  font-weight: 470;
  color: rgba(0,0,0,.6);
  border-bottom: 2px solid rgba(0,0,0,.4);
  padding-bottom: .3rem;
  text-transform: uppercase;
  letter-spacing: .03rem;
  margin-bottom: .1rem;
}
/* no custom templates yet */
.page-account .alert-info {
  padding-top: 1.5rem;
}
.page-account .page-sidebar {
  background: rgba(255,255,255,.8);
  padding: 2rem 1.4rem 1.4rem;
  border-radius: 3px;
}
.page-sidebar p {
  margin: 0;
  padding: 0;
}
.page-sidebar p.alert {
  line-height: 1.02;
  font-size: .8rem;
  background: rgba(0,0,0,.06);
  border-radius: 3px;
  padding: .5rem .4rem .4rem 1rem;
}
/* –––––––––––––––––––––––––––––––––––––––––– Subscriber / Brands list overview */
.page-brands-overview .content,
.page-add-brand .content,
.page-brandkit-custom .content {
  min-height: 44vh;
}
.page-brands-overview .brand-row {
  border-bottom: 2px solid rgba(0,0,0,.2);
  padding: 1.4rem 0 2rem 0;
}
.created-on {
  font-size: calc((1.1 - 1) * 1.2vw + .8rem);
  font-weight: 340;
}
.brand-row .brand-thumb {
  background: white;
  border-radius: .3rem;
  padding: 0.5rem 1rem 1rem 0.5rem;
  margin: 0.5rem 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* for single payments with only 2 cols in brand overview, not 3 */
  min-height: 80px;
}
.cta-pill .fakelink {
  text-decoration: none;
}
.cta-text.gray a,
.cta-text.gray span.fakelink {
  color: rgba(0,0,0,.3);
}
.cta-text a,
.cta-text span.fakelink {
  text-decoration: none;
  font-size: calc((1.1 - 1) * 1.2vw + .8rem);
  font-weight: 370;
  line-height: 1.2;
  border-bottom: 1px solid rgba(0,0,0,.2);
  display: block;
  padding: 0.4rem 0;
  letter-spacing: .01rem;
}
.cta-text:first-of-type {
  border-top: 2px solid rgba(0,0,0,.2);
  margin-top: 10px;
}
/* –––––––––––––––––––––––––––––––––––––––––– Client Agency Testing */
.client-bar img {
  float: right;
}
.client-bar p {
  font-size: calc(7px + .57vw);
  margin: 0;
  padding: 0;
  margin-bottom: 0.1rem;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: .01rem;
}/* –––––––––––––––––––––––––––––––––––––––––– font shop */
ul.fontbuy-table {
  padding: 0;
  border-bottom: 1px solid;
  margin-top: 2rem;
}
.fontbuy-table li {
  list-style: none;
  border-top: 1px solid;
  padding: 1rem 0 .3rem;
}
.fontbuy-table li div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 0.5rem; */
}
.fontbuy-table li .font-preview img {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .fontbuy-table li div {
    flex-direction: column;
    align-items: flex-start;
  }
  .fontbuy-table li .font-preview img {
    margin: 10px 0;
  }
}