/* styles/_variables.scss */


/* styles/_typography.scss */
html {
  font: 10px "Avenir Next", "Avenir Next Pro", "Avenir";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, blockquote, cite, p {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  margin: 0;
  font-size: 1em;
  overflow-wrap: break-word;
  word-break: break-word;
}
.text.editable {
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-modify: read-write;
}
.text.editable > .ql-editor {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-modify: read-write;
}
.text.editable h1,
.text.editable h2,
.text.editable h3,
.text.editable h4,
.text.editable h5,
.text.editable h6,
.text.editable blockquote,
.text.editable cite,
.text.editable p { white-space: pre-wrap; }
.blockTemplate .text {
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-modify: read-write;
}
.blockTemplate .text h1,
.blockTemplate .text h2,
.blockTemplate .text h3,
.blockTemplate .text h4,
.blockTemplate .text h5,
.blockTemplate .text h6,
.blockTemplate .text blockquote,
.blockTemplate .text cite,
.blockTemplate .text p { white-space: pre-wrap; }
strong { font-weight: 600; }
.fitty {
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}
.fitty h1 {
  overflow-wrap: unset;
  word-break: unset;
  white-space: nowrap !important;
}
.fitty.empty { min-width: 100px; }

/* styles/_base.scss */
html, body {
  padding: 0;
  margin: 0;
  background: #eef0f4;
  color: #0e0e0e;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body { transform: translateY(0); }
a:link,
a:visited {
  color: inherit;
  text-decoration: none;
}
ol, ul {
  padding: 0;
  margin: 0;
}
ul, li { list-style: none; }
img, video {
  padding: 0;
  margin: 0;
  border: 0;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  vertical-align: top;
}
iframe {
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}
carbon-container { position: relative; }
carbon-audio, carbon-container, carbon-embed, carbon-image, carbon-video, carbon-cover { display: block; }
.no-padding { min-height: 40px; }

/* styles/_controls.scss */
.enumControl .options .option.selected {
  opacity: 1;
  font-weight: bold;
}
.enumControl .options .option {
  cursor: pointer;
  opacity: 0.8;
}
.enumControl .options {
  margin-top: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.textControl {
  margin-bottom: 10px;
  border: none !important;
}
.textControl label { cursor: text; }
.textControl:hover .field::after { transform: scaleX(1); }
.textControl .field input:hover,
.textControl .field input:focus { opacity: 1; }
.textControl .field input {
  background: transparent;
  color: #fff;
  font-size: 14px;
  width: 100%;
  border-bottom: none;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
.textControl .field::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  background: rgba(255, 255, 255, 0.3);
}
.textControl .field.invalid::after { display: none; }
.textControl .field.invalid { border-color: red; }
.textControl .field {
  border-bottom: 1px solid #363636;
  padding-bottom: 10px;
}
.tinyFieldBlock .savingGuts {
  font-size: 12px;
  line-height: 24px;
  display: none;
}
.tinyFieldBlock.sendingbutton,
.tinyFieldBlock.saved button { display: none; }
.tinyFieldBlock.sending.savingGuts,
.tinyFieldBlock.saved .savingGuts { display: inline-block; }
.tinyFieldBlock .message {
  top: 10px !important;
  display: none;
}
.tinyFieldBlock .field.prefixed .prefix {
  display: inline-block;
  font-size: 16px;
  padding-right: 3px;
}
.tinyFieldBlock .field.prefixed {
  display: flex;
  flex-flow: row;
}
.tinyFieldBlock .actions button {
  --height: 24px;
  height: 24px;
  line-height: 25px;
  padding: 0 10px;
  display: none;
  color: #9568af;
  margin: 0;
  border: 1px solid #9568af;
  border-radius: 24px;
  font-weight: 500;
}
.tinyFieldBlock .actions { margin-top: 10px; }
.tinyFieldBlock input { border-bottom: 1px solid #363636; }
.tinyFieldBlock.editing button { display: unset; }
.sidebar .control label.full {
  font: 10px / 12px "Helvetica Neue", Helvetica, Arial;
  color: #5A5C5E;
  letter-spacing: 1px;
  padding: 8px 0;
  text-transform: uppercase;
  width: 100%;
}
.nestedControl { position: relative; }
.nestedControl label { cursor: pointer; }
.nestedControl .arrow { opacity: 0.5; }
.nestedControl:hover .arrow { opacity: 1; }
.control { width: 100%; }
.control label {
  flex-basis: 100%;
  line-height: 30px;
  -webkit-user-select: none;
  user-select: none;
}
.control .guts {
  display: flex;
  justify-content: flex-end;
  flex-basis: 30%;
}
.control .reset .icon { margin: 5px; }
.control .reset:hover { opacity: 0.8; }
.control .reset {
  display: none;
  margin-right: 5px;
  cursor: pointer;
  background: #000;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  opacity: 0.4;
}
.control.resettable .reset { display: block; }

/* styles/_forms.scss */
textarea, input, button, fieldset {
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}
.field.valid .message { display: none; }
.field input.rounded::placeholder { color: rgba(0, 0, 0, 0.2); }
.field input.rounded {
  --height: 50px;
  height: var(--height);
  padding: 0 20px;
  background: #fff;
  color: #000;
  border: 0;
  border-radius: calc(var(--height) / 2);
  box-sizing: border-box;
  font-size: 20px;
}
:focus { outline: 0; }
.field { position: relative; }
.field > .input {
  display: block;
  font-size: 1em;
  width: 100%;
  line-height: 2;
  margin: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  color: #fff;
  border-bottom: 1px solid #353535;
}
.field > textarea.input {
  font-size: 0.9em;
  line-height: 1.2;
  height: 6.2em;
  max-height: 10em;
  font-weight: 400;
  margin: 0.4em 0 0;
}
.field > .message {
  opacity: 0;
  visibility: hidden;
  display: block;
  position: absolute;
  top: 68%;
  right: auto;
  bottom: auto;
  left: 100%;
  width: auto;
  height: auto;
  max-width: 310px;
  margin: 0;
  font-size: 0.89em;
  line-height: 1;
  color: #F70000;
  white-space: nowrap;
  font-style: normal;
  transform: translate(-100%, -50%);
  z-index: 10;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.field .eg {
  padding: 5px 0 0;
  color: #999;
}
.field.invalid > .input { border-color: rgba(255, 255, 255, 0.4); }
.field.invalid > .message {
  display: block;
  opacity: 1;
  visibility: visible;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* styles/_layouts.scss */
carbon-item.floating {
  width: 100%;
  height: 100%;
}
carbon-item p {
  line-height: 50px;
  font-size: 24px;
}
carbon-item .item {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: center;
}

/* styles/_browser.scss */
:root {
  --ui-width: 380px;
  --cover-height: calc(100vh - 80px - 26px);
  --cover-width: calc(100vw - var(--ui-width));
  --site-gutter: 60px;
  --site-margin: 0 60px;
  --sidenav-width: 300px;
  --container-width: var(--grid-width);
  --container-height: 800px;
}
.phone .device { display: none; }
.device {
  z-index: 2;
  position: absolute;
  box-shadow: 0 0 11px rgba(231, 198, 198, 0.11);
  transform: translate3d(0, 0, 0);
}
.device.desktop {
  left: 350px;
  top: 80px;
  height: calc(100vh - 80px - 26px);
  width: 0;
  transition: left 200ms ease-out, bottom 200ms ease-out, height 200ms ease-out;
}
body.full-width .device .browser {
  transition: all 200ms ease-out;
  width: 100% !important;
}
body.full-width .device .browser .bar { display: none; }
body.full-width .device {
  --cover-width: 100vw;
  --cover-height: 100vh;
  --ui-width: 0px;
  height: 100vh !important;
  width: 100vw !important;
  top: auto;
  left: 0;
  bottom: 0;
  transform: unset !important;
}
.phoneWrapper {
  display: none;
  position: fixed;
  box-shadow: 0 0 11px rgba(0, 0, 0, 0.11);
  right: 30px;
  right: calc(100vw / 2 - 185px);
  top: calc(100vh / 2 - 360px);
  width: 370px;
  height: 720px;
  max-width: 370px;
  padding: 40px 10px 10px;
  border-radius: 16px;
  background: #fff;
}
.phoneWrapper:before {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  content: '';
  height: 3px;
  width: 60px;
  background: #C4C4C4;
  z-index: 2;
}
body.phone .phoneWrapper { display: block; }
body.phone .device { display: none; }
.browser {
  width: calc(100vw - var(--ui-width));
  height: 100%;
  box-sizing: border-box;
  z-index: 2;
}
.browser > .shield {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: calc(100% + 26px);
  display: block;
  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background-color: #000;
  opacity: 0;
  pointer-events: none;
}
.browser > .bar .dots {
  position: absolute;
  left: 10px;
  top: 8px;
}
.browser > .bar .address {
  position: relative;
  max-width: 580px;
  width: 100%;
  background: #fff;
  text-align: center;
  height: 20px;
  line-height: 20px;
  border-radius: 100px;
}
.browser > .bar .value:before {
  position: absolute;
  display: inline-block;
  content: '';
  width: 19px;
  height: 20px;
  left: 0;
  background: left 5px no-repeat url('../icons/eye.svg');
  background-size: 15px;
}
.browser > .bar .value {
  display: inline-block;
  position: relative;
  padding: 0 0 0 20px;
}
.browser > .bar .messagePublishedSuccess:before {
  position: absolute;
  content: '';
  display: inline-block;
  top: 1px;
  left: 3px;
  width: 35px;
  height: 35px;
  background: #9974BA;
  -webkit-mask: url('../icons/checkmark.svg') center / cover no-repeat;
  mask: url('../icons/checkmark.svg') center / cover no-repeat;
}
.browser > .bar .messagePublishedSuccess:after {
  position: absolute;
  bottom: -9px;
  left: 50%;
  margin-left: -8px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 8px 0 8px;
  border-color: #fff transparent transparent transparent;
}
.browser > .bar .messagePublishedSuccess.show {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -100%);
}
.browser > .bar .messagePublishedSuccess {
  position: absolute;
  top: -20px;
  transform: translate(0, -80%);
  background: #fff;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  padding: 7px 25px 7px 40px;
  color: #000;
  box-shadow: inset 0 0px 0px rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
  opacity: 0;
  visibility: hidden;
}
.browser > .bar .hint {
  position: absolute;
  right: 10px;
  top: 0;
  color: #9974ba;
}
.browser > .bar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d5d3d3;
  background-image: linear-gradient(to bottom, #d4d2d2 0%, #e0e0e0 100%);
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.15), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.43);
  height: 30px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  position: relative;
  font-size: 12px;
  letter-spacing: -0.02em;
}
.browser > .scrollable > .viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.browser > .scrollable > .scrollbar > .handle { margin-right: 16px; }
.browser > .scrollable > .scrollbar {
  height: calc(100% - 10px);
  margin-right: -30px;
  width: 30px;
  z-index: 1;
}
.phoneHint {
  position: fixed;
  right: 0;
  top: 100px;
  left: calc(50vw + 185px);
  padding: 0 20px;
  height: calc(100vh - 100px);
  display: flex;
  flex-flow: column;
  justify-content: center;
  visibility: hidden;
  align-items: center;
}
.phoneHint h1 {
  font-size: 29px;
  line-height: 31px;
  text-align: center;
  max-width: 290px;
  letter-spacing: -0.05em;
  padding: 100px 20px 18px;
  background: 30px top no-repeat url('../icons/sorting_hint.svg');
}
.phoneHint p {
  font: 20px / 22px "Avenir Next", "Avenir Next Pro", "Avenir";
  font-style: normal;
  font-weight: normal;
  text-align: center;
  color: #747474;
  margin-bottom: 18px;
  max-width: 270px;
}
.phoneHint .pill {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 34.5px;
  font: 20px / 22px "Avenir Next", "Avenir Next Pro", "Avenir";
  font-weight: 300;
  padding: 20px 40px;
  text-align: center;
  letter-spacing: -0.05em;
  color: #000000;
}

/* styles/_emptyPage.scss */
.page.empty .ghost { visibility: hidden; }
.page.empty .guts > .project-nav { display: none; }
.page.empty .guts > footer { display: none; }
.startPointLabel {
  font: 20px / 24px Helvetica Neue;
  margin: 20px 0;
}
.template-choices {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.template-choices .option { padding: 20px; }
.template-choices .name {
  margin-top: 20px;
  display: block;
  font-size: 18px;
  line-height: 120%;
}
.templateIcon {
  background: var(--color);
  -webkit-mask-size: cover;
  mask-size: cover;
  width: 160px;
  height: 165px;
  opacity: 0.3;
  transition: transform 50ms ease-out, opacity 50ms ease-out;
  transform: translateY(0) scale(1);
}
.sidenaved .template-choices .templateIcon {
  width: 128px;
  height: 132px;
}
.templateIcon:hover {
  transform: translateY(-10px) scale(1.1);
  opacity: 1;
}
.templateIcon.slideshow {
  -webkit-mask-image: url('../images/templates/slideshow.svg');
  mask-image: url('../images/templates/slideshow.svg');
}
.templateIcon.fullscreen {
  -webkit-mask-image: url('../images/templates/fullscreen.svg');
  mask-image: url('../images/templates/fullscreen.svg');
}
.templateIcon.gallery-grid {
  -webkit-mask-image: url('../images/templates/grid.svg');
  mask-image: url('../images/templates/grid.svg');
}
.templateIcon.editorial {
  -webkit-mask-image: url('../images/templates/editorial.svg');
  mask-image: url('../images/templates/editorial.svg');
}
.placeholderBlock {
  display: flex !important;
  position: absolute !important;
  top: 0;
  width: var(--cover-width);
  height: var(--cover-height);
  --surface-color: transparent;
  align-items: center;
  text-align: center;
  flex-flow: row wrap;
}
.placeholderBlock h1,
.placeholderBlock h2,
.placeholderBlock h3,
.placeholderBlock p {
  -webkit-user-select: none;
  user-select: none;
}
.placeholderBlock h1 {
  text-align: center;
  font-size: 4em;
  max-width: 600px;
  margin: 0 auto 30px auto;
}
.placeholderBlock h2 { font-size: 1.5em; }
.placeholderBlock h3 {
  font-size: 4em;
  display: none;
}
.placeholderBlock .actions { margin-bottom: 20px; }
.tutorial-video { margin-top: 30px; }
.tutorial-toggle {
  display: flex;
  align-items: center;
  background: transparent;
  color: var(--color);
  padding: 0;
  margin: 0 auto;
  cursor: pointer;
}
.tutorial-toggle:hover .tutorial-icon { transform: translateX(-30%); }
.tutorial-toggle:hover .tutorial-title { transform: scale(1.2); }
.tutorial-icon {
  display: block;
  position: relative;
  overflow: hidden;
  background: #9974ba;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  will-change: transform;
  transition: transform 0.25s ease;
  transform-origin: center;
}
.tutorial-icon .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-30%, -50%);
}
.tutorial-title {
  font-size: 15px;
  line-height: 1.2;
  margin-left: 10px;
  will-change: transform;
  transition: transform 0.25s ease;
  transform-origin: center;
}

/* styles/behaviors/animations.scss */
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}
@keyframes bounce {
  0%,
20%,
53%,
80%,
100% { transform: translate3d(0, 0, 0); }
  40%,
43% { transform: translate3d(0, -30px, 0); }
  70% { transform: translate3d(0, -15px, 0); }
  90% { transform: translate3d(0, -4px, 0); }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

/* styles/behaviors/expandable.scss */
.expandable {
  height: 0;
  overflow: hidden;
  transition: height 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* styles/behaviors/scrollable.scss */
.scrollable { position: relative; }
.scrollable .cutoff .gradient {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 45px;
  width: 100%;
  background: linear-gradient(180deg, rgba(37, 38, 40, 0) 0%, var(--background-color) 100%);
}
.scrollable .cutoff {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0px;
  height: 45px;
  pointer-events: none;
  width: 100%;
}
.scrollable.overflowing .cutoff { display: block; }
.scrollable > .content {
  overflow: hidden !important;
  height: 100%;
}
.scrollable > .scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 20px;
  opacity: 0.3;
  transition: opacity 250ms ease-out;
}
.scrollable > .scrollbar.hidden { opacity: 0; }
.scrollable > .scrollbar.dragging { opacity: 0.7; }
.scrollable > .scrollbar:hover {
  opacity: 0.7;
  transition: none;
}
.scrollable > .scrollbar > .handle {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 6px;
  background-color: #fff;
  min-height: 10px;
  width: 6px;
}
.scrollable > .scrollbar > .handle.dark { background-color: #000; }

/* styles/behaviors/sorting.scss */
.grid .dragging { opacity: 1 !important; }
.dragging, .chosen { cursor: grabbing !important; }
.dragging .projectControls { cursor: grabbing !important; }
.blockTemplates {
  -webkit-user-select: none;
  user-select: none;
  overflow: none;
}
.blockTemplate {
  box-sizing: border-box;
  position: relative;
  cursor: grab;
  margin-bottom: 10px;
}
.blockTemplate .block { font-size: 10px !important; }
.blockTemplate > .viewport {
  background-color: var(--background-color, #fff);
  font-size: 30px;
}
.blockTemplate .block.cover { --cover-width: 1280px; }
.blockTemplate .empty-state { display: none !important; }
.blockTemplate .flipbook .flipper.left { left: -150px; }
.blockTemplate .flipbook .flipper.right { right: -150px; }
.blockTemplate .flipbook {
  --container-width: 900px;
  --container-height: 700px;
  max-width: 900px !important;
}
.blockTemplate .attribution { display: none; }
.blockTemplate.dragging {
  width: 100%;
  opacity: 1 !important;
}
.blockTemplate .viewport > .content { transform-origin: 0 0; }
.blockTemplate .viewport { overflow: hidden; }
.blockTemplate .description span.name {
  display: inline-flex;
  align-items: center;
  color: #fff;
  background: #000;
  font-size: 12px;
  border-radius: 24px;
  padding: 6px 20px;
}
.blockTemplate .description .icons .icon { padding-left: 3px; }
.blockTemplate .description .icons {
  padding-left: 10px;
  margin-top: 2px;
}
.blockTemplate .description {
  visibility: hidden;
  position: absolute;
  text-align: center;
  width: 100%;
  left: 0;
  opacity: 0;
  transform: scale(0.95);
  transition: visibility 0.2s ease-out, opacity 0.2s ease-out, transform 0.15s ease-out;
  bottom: 10px;
  margin: auto;
}
.blockTemplate:hover .description {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.dropZone {
  display: none;
  height: 70px;
  transition: height 200ms linear, background 200ms linear;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 70px;
  top: -35px;
  z-index: 100;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.dropZone .line {
  background: rgb(0, 203, 227);
  height: 4px;
  width: 100%;
  position: absolute;
  top: 34px;
  z-index: 1;
}
.dropZone .bubble {
  position: relative;
  text-align: center;
  font-size: 14px;
  border-radius: 17px;
  background-color: rgb(0, 203, 227);
  width: 193px;
  height: 34px;
  color: #fff;
  line-height: 34px;
  z-index: 2;
  margin: 18px auto;
}
.ghost:not(.block) .dropZone { display: block; }
.ghost:not(.block) .viewport,
.ghost:not(.block) .description { display: none; }
.blockTemplates .blockTemplate {
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out;
}
.blockTemplates .blockTemplate:hover { opacity: 1; }
.blockTemplates .ghost { opacity: 0 !important; }
.blockTemplates .ghost .viewport { display: block !important; }
.blockTemplates .ghost .dropZone { display: none; }
.blocks .ghost { margin-bottom: 0 !important; }
.site .block.placeholder .paddingControl { display: none; }
.site .block.placeholder { min-height: 500px; }
.restoreBlockControl {
  z-index: 50;
  position: fixed;
  bottom: 30px;
  right: 60px;
  height: 60px;
  line-height: 60px;
  pointer-events: none;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 300ms ease-out, transform 300ms ease-out;
  border-radius: 30px;
  transform: translateY(30px);
  background: #000;
  padding-left: 10px;
  padding-right: 10px;
}
.restoreBlockControl .text {
  font-weight: 400;
  color: #fff;
  font-size: 16px;
  padding-left: 20px;
  padding-right: 20px;
}
.restoreBlockControl .action :hover { transform: scale(1.1); }
.restoreBlockControl .action {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  color: #000;
  background: #fff;
  font-size: 10px;
  border-radius: 20px;
}
.restoreBlockControl.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* styles/behaviors/uploading.scss */
.progress circle {
  stroke: #00CBE3;
  transition: stroke-dashoffset 0.2s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  z-index: 2;
  fill: transparent;
}
.progress circle.background {
  z-index: 1;
  stroke: #000;
}
.dragOver .cloud { visibility: visible !important; }
.dragOver .cloud .progress { display: none; }
.dragOver .content { visibility: hidden; }
.cloud .progress { display: none; }
.cloud .description { display: none; }
.cloud .centered .outline circle { fill: rgba(0, 0, 0, 0.3); }
.cloud .centered .description {
  position: absolute;
  margin-top: 50px;
}
.cloud .centered {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.uploading .cloud .progress,
.processing .cloud .progress { display: block; }
.uploading .cloud .icon,
.processing .cloud .icon { display: none; }
.uploading .cloud,
.processing .cloud { visibility: visible !important; }
.processing .posterPlay { display: none; }
.processing .cloud .description {
  display: block;
  font: 12px / 2em "Avenir Next", "Avenir Next Pro", "Avenir";
  text-transform: uppercase;
  color: #fff;
  width: 100%;
  text-align: center;
}
.dragOver .outline rect { stroke: #fff !important; }
.dragOver .icon {
  transform: scale(1.2);
  background: #fff !important;
}
.cloud .icon {
  width: 30px;
  height: 30px;
  -webkit-mask: url('../icons/upload.svg');
  mask: url('../icons/upload.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: #00CBE3;
}
.cloud { cursor: pointer; }
.cloud .outline {
  transition: transform 500ms ease-out, opacity 500ms ease-out;
  opacity: 1;
  transform: scale(1);
  display: none;
}
.cloud .icon {
  transition: opacity 500ms ease-out;
  opacity: 1;
}
.block .cloud,
.item .cloud,
.project .cloud {
  visibility: hidden;
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1000;
}
.processing-wrapper { position: relative; }

/* styles/behaviors/captioning.scss */
.flipbook .add-caption-wrapper { display: none; }
.flipbook.captionable .add-caption-wrapper { display: flex; }
.flipbook.captioning .add-caption-wrapper { display: none; }
.flipbook.captioning .swiper-pagination {
  opacity: 0.1;
  pointer-events: none;
}
.flipbook.captioning .swiper-button {
  opacity: 0.1;
  pointer-events: none;
}
.slide.captioning .caption-wrapper { display: block !important; }
.flipbook.captioned .add-caption-wrapper { display: none; }
.add-caption-wrapper {
  display: flex;
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  padding-top: 10%;
  padding-bottom: 10px;
}
.add-caption-wrapper .add-caption-button:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.add-caption-wrapper .add-caption-button {
  background: #000;
  color: #fff;
  font-size: 14px;
  padding: 10px 5px;
  border-radius: 20px;
  width: 130px;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 100ms linear, transform 100ms linear;
}
.add-caption-wrapper:hover .add-caption-button {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}
.has-dots:not(.single) .add-caption-wrapper { bottom: 15px; }

/* styles/components/button.scss */
.button {
  --height: 40px;
  cursor: pointer;
  border-radius: calc(var(--height) / 2);
  box-sizing: border-box;
  background: transparent;
  letter-spacing: 1px;
  height: var(--height);
  font: 12px / var(--height) "Avenir Next", "Avenir Next Pro", "Avenir";
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  border: none;
  padding: 0 20px;
}
.button:link {
  color: inherit;
  text-decoration: none;
}
.button.big {
  --height: 50px;
  line-height: 50px;
  font-size: 14px;
  padding: 0 30px;
}
.button.small {
  --height: 30px;
  line-height: 29px;
  font-size: 10px;
}
.button.full {
  display: inline-block;
  width: 100%;
}
.button.outline:hover {
  background-color: #9874b8;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transform: translate3d(0, -2px, 0);
}
.button.outline {
  border: 1px solid #9874b8;
  color: #9874b8;
  transition: box-shadow 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), background-color 250ms ease-in-out, color 250ms ease-in-out;
}
.button.cancel:hover { color: #fff; }
.button.cancel {
  cursor: pointer;
  color: #535456;
  font-weight: 500;
  letter-spacing: 0.2em;
  transition: color 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.button.solid:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transform: translate3d(0, -2px, 0);
}
.button.solid {
  font-family: "Helvetica Neue", Helvetica, Arial;
  background-color: #9974ba;
  color: #fff;
  letter-spacing: 0.2em;
  transition: box-shadow 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), background-color 250ms ease-in-out, color 250ms ease-in-out;
}
.button.solid.white {
  background-color: #fff;
  color: #000;
}
.button.danger {
  background-color: #E32253;
  color: #fff;
}
.button.green {
  background: #29CC87;
  color: #fff;
}
.button.solid:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.button.back .icon {
  position: absolute;
  left: -5px;
  top: 0;
}
.button.back {
  --height: 30px;
  position: relative;
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  padding-left: 30px;
  color: #9DA4AD;
}
.button.back.bubble:hover { opacity: 1; }
.button.back.bubble .icon {
  left: 5px;
  top: 5px;
}
.button.back.bubble {
  height: 40px;
  background: #fff;
  color: #000;
  padding: 0 20px;
  line-height: 40px;
  padding-left: 35px;
  opacity: 0.8;
}
.button.big.solid {
  display: inline-block;
  min-width: 175px;
}
.button.big.back .icon {
  left: 0;
  top: 9px;
}
.button.big.back {
  color: #69737F;
  padding: 0 30px;
}
form.sending .button.big,
form.sent .button.big {
  width: 0px;
  min-width: 0px;
  padding: 0 35px;
  color: transparent;
  overflow: hidden;
  background: #43c1be center no-repeat url('../images/bounce.gif');
  transition: width 0.2s ease-in-out;
  font-size: 0;
  cursor: default;
}
.button.outline.tiny {
  --height: 24px;
  height: 24px;
  line-height: 25px;
  padding: 0 10px;
  color: #9568af;
  margin: 0;
  border: 1px solid #9568af;
  border-radius: 24px;
  font-weight: 500;
}

/* styles/components/tooltip.scss */
[tooltip] { position: relative; }
[tooltip]::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px 6px 0 6px;
  border-style: solid;
  color: #fff;
  border-color: #fff transparent transparent transparent;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  background: transparent;
}
[tooltip]::after {
  font: 8px "Avenir Next", "Avenir Next Pro", "Avenir";
  font-weight: 400;
  content: attr(tooltip);
  white-space: nowrap;
  padding: 5px;
  position: absolute;
  left: 50%;
  top: -6px;
  transform: translateX(-50%) translateY(-100%);
  background: #fff;
  text-align: center;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
}
[tooltip]:hover::after,
[tooltip]:hover::before { opacity: 1; }
.tooltip-left:before {
  top: unset !important;
  left: auto !important;
  right: 100% !important;
  bottom: 14px;
  transform: translateX(-13px);
}
.tooltip-left:after {
  top: unset;
  bottom: 10px;
  left: auto !important;
  right: 100% !important;
  transform: translateX(-12px);
}
.tooltip-big:after {
  border-radius: 2px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding-left: 8px;
  padding-right: 8px;
}
.tooltip-big.edit:before { bottom: 18px; }
.tooltip-big.edit:after { bottom: 12px; }
.tooltip-left:before {
  border: 6px solid transparent;
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #fff;
  border-left-color: #fff;
}
.slider [tooltip]::after {
  text-transform: lowercase;
  border-radius: 2px;
}
.siteControls [tooltip]::before,
.siteControls [tooltip]::after {
  top: auto;
  bottom: -9px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.siteControls [tooltip]::before {
  border-width: 0 6px 4px;
  border-color: transparent;
  border-bottom-color: #fff;
}
.siteControls [tooltip]::after {
  transform: translateX(-50%) translateY(70%);
  letter-spacing: 0.1em;
  font-size: 10px;
  padding-left: 15px;
  padding-right: 15px;
}
.siteControls [tooltip]:hover::after { transform: translateX(-50%) translateY(100%); }
.supported-file-types [tooltip]::before,
.supported-file-types [tooltip]::after {
  top: auto;
  bottom: -9px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.supported-file-types [tooltip]::before {
  border-width: 0 6px 4px;
  border-color: transparent;
  border-bottom-color: #fff;
}
.supported-file-types [tooltip]::after {
  transform: translateX(-50%) translateY(70%);
  letter-spacing: 0.1em;
}
.supported-file-types [tooltip]:hover::after { transform: translateX(-50%) translateY(100%); }

/* styles/components/popout.scss */
.popout {
  position: fixed;
  width: 260px;
  visibility: hidden;
  opacity: 0;
  transition: visibility 100ms ease-in, opacity 100ms ease-out, transform 100ms ease-out;
  z-index: 10;
  background: #252628;
  color: #fff;
  border-radius: 5px;
  box-shadow: 6px 7px 40px 0px rgba(0, 0, 0, 0.75);
  -webkit-user-select: none;
  user-select: none;
}
.popout > .guts { overflow: hidden; }
.popout.left { transform: translateX(-20px); }
.popout.right { transform: translateX(20px); }
.popout.open {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}
.popout h3 {
  text-align: center;
  font-size: 18px;
  color: #fff;
  margin: 20px 0 15px;
  font-weight: 500;
}
.popout label { font: 500 14px / 20px "Helvetica Neue", Helvetica, Arial; }
.popout .imageControl .emptyGuts .text { display: none; }
.popout .pane.default { padding: 0 0 10px; }
.popout .pane > .back {
  position: absolute;
  top: -4px;
  left: 10px;
}
.popout .pane > .actions .button { min-width: 140px; }
.popout .pane > .actions {
  padding-top: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
}
.popout .pane .controls > .control {
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 20px;
  margin-right: 20px;
  border-top: 1px solid #363636;
  box-sizing: border-box;
  cursor: pointer;
}
.popout .pane .controls {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
  padding: 0;
}
.popout .pane {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  opacity: 1;
  transform: scale(1);
}
.popout .splitLayout .control label {
  display: block;
  text-align: left;
  width: 100%;
  margin-bottom: 7px;
  text-transform: uppercase;
  font: 500 11px / 20px "Helvetica Neue", Helvetica, Arial;
  letter-spacing: 0.1em;
  flex-basis: 20px;
}
.popout .splitLayout .control {
  flex-flow: column;
  align-items: start;
  margin-bottom: 0;
}
.popout .splitLayout .numberControl .guts {
  position: relative;
  cursor: ns-resize;
}
.popout .splitLayout .numberControl input,
.popout .splitLayout .numberControl .unit {
  font-size: 35px;
  font-weight: 300;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: ns-resize;
  color: rgba(255, 255, 255, 0.5);
}
.popout .splitLayout .numberControl input {
  width: 100%;
  padding-right: 20px;
  text-align: center;
}
.popout .splitLayout .numberControl .unit {
  font-size: 35px;
  line-height: 1.5;
  position: absolute;
  top: 1px;
  right: 20px;
  width: 10px;
}
.popout .splitLayout > .control {
  flex: 0 0 43%;
  border-bottom: none;
  border-top: none;
  padding-top: 12px;
}
.popout .splitLayout > .divider > div {
  background-color: #363636;
  width: 1px;
  height: 100%;
  margin: auto;
}
.popout .splitLayout > .divider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.popout .splitLayout.dual { margin-bottom: 20px; }
.popout .splitLayout {
  position: relative;
  margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
.popout { --arrow-top: 50%; }
.popout.right:after {
  left: 100%;
  top: var(--arrow-top, 50%);
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(36, 38, 40, 0);
  border-left-color: #242628;
  border-width: 15px;
  margin-top: -15px;
}
.popout.left:after {
  right: 100%;
  top: var(--arrow-top);
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(36, 38, 40, 0);
  border-right-color: #242628;
  border-width: 15px;
  margin-top: -15px;
}
.overflow-faded:before,
.overflow-faded:after {
  position: absolute;
  content: '';
  display: block;
  height: 40px;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}
.overflow-faded-top:before {
  top: 0;
  border-radius: 5px 5px 0 0;
  background-image: linear-gradient(0deg, rgba(37, 38, 39, 0) 0, #252627 100%);
}
.overflow-faded-bottom:after {
  bottom: 0;
  background-image: linear-gradient(180deg, rgba(37, 38, 39, 0) 0, #252627 100%);
}
.layoutChooser {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: 40px;
  position: relative;
  height: 332px;
}
.layoutChooser > div {
  flex-basis: 50%;
  margin-bottom: 14px;
}
.layoutChooser span {
  color: #717273;
  font-size: 12px;
  font-weight: 500;
  display: block;
  text-align: center;
  margin: 10px 0;
}
.layoutChooser carbon-grid { margin: auto; }
.layoutChooser .divider > div {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0), rgba(100, 100, 100, 0.5), rgba(100, 100, 100, 0));
  width: 2px;
  height: 100%;
  margin: auto;
}
.layoutChooser .divider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.gridPreview {
  display: inline-block;
  cursor: pointer;
  transform: scale(1);
  position: relative;
}
.gridPreview svg.placeholder { width: 100%; }
.gridPreview .proBadge {
  width: 64px;
  height: 64px;
  position: absolute;
  top: -45px;
  right: -5px;
  opacity: 1;
  z-index: 100;
}
.gridPreview:hover carbon-grid {
  transform: scale(1.11);
  transform-origin: center;
  opacity: 1;
}
.gridPreview carbon-grid carbon-item {
  border-radius: 2px;
  display: block;
  border: 1px solid #fff;
  box-sizing: border-box;
}
.gridPreview carbon-grid {
  opacity: 0.5;
  transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
}
.gridPreview.selected carbon-grid { opacity: 1; }
.splitLayout .numberControl {
  pointer-events: none;
  opacity: 0.1;
}
.splitLayout.hasBackground .numberControl {
  pointer-events: unset;
  opacity: 1;
}

/* styles/components/icon.scss */
.icon {
  display: inline-block;
  background-repeat: no-repeat;
}

/* styles/components/cropper.scss */
.cropperControl { background: none; }
.cropper {
  transform-origin: 0 0;
  transform: scale(1);
}
.cropper > .viewport > .content {
  position: relative;
  top: 0;
  left: 0;
}
.cropper > .viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: move;
}
.cropper.stretched .zoomer,
.cropper.stretched .minus,
.cropper.stretched .plus { visibility: hidden; }
.cropper .actions {
  display: flex;
  margin-top: 20px;
  font-size: 10px;
  flex-flow: row;
  align-items: center;
}
.cropper .actions .buttonWrapper { margin-left: 10px; }
.cropper .actions .done {
  padding: 0;
  line-height: 27px;
  width: 70px;
  height: 27px;
}
.cropperControl {
  width: unset;
  height: unset;
}
.cropper .zoomer .track {
  display: block;
  position: relative;
  width: 100%;
  top: 7px;
  background-color: #202020;
  height: 4px;
  border-radius: 3px;
  width: 100%;
}
.cropper .zoomer .handle:hover,
.cropper .zoomer .handle:active { transform: scale(1.2) translate3d(0, -50%, 0); }
.cropper .zoomer .handle {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  transform: translate3d(0, -50%, 0);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.63);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  background: #fff;
  cursor: pointer;
}
.cropper .zoomer {
  display: block;
  width: calc(100% - 100px);
  height: 20px;
  margin-left: 15px;
  margin-right: 15px;
}

/* styles/components/deviceControl.scss */
.siteControls {
  display: flex;
  flex-flow: row;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  box-sizing: border-box;
  justify-content: flex-end;
  -webkit-user-select: none;
  user-select: none;
  opacity: 1;
  transition: opacity 0.25s ease-in-out, transform 200ms ease-out;
  height: 80px;
  align-items: center;
  padding-right: 30px;
}
body.full-width .siteControls {
  opacity: 0;
  transform: translateY(-100px);
}
.siteControls .bubble { margin-right: 10px; }
.siteControls .action:hover .icon { opacity: 1; }
.siteControls .action {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.siteControls .icon { opacity: 0.5; }
.onboarding .siteControls,
.upgrading .siteControls,
.celebrating .siteControls,
.sideApping .siteControls,
.managing-projects .siteControls {
  pointer-events: none;
  opacity: 0;
}
.onboarding .app-switcher .toggle-full,
.upgrading .app-switcher .toggle-full,
.celebrating .app-switcher .toggle-full,
.sideApping .app-switcher .toggle-full,
.managing-projects .app-switcher .toggle-full { display: none; }
body.phone .app-switcher,
body.phone .sidebar { display: none; }
.exitSortMode, .exitPhoneMode {
  display: none;
  min-width: 140px;
}
.personaSwitcher {
  display: flex;
  margin-right: 40px;
  align-items: center;
}
body.sorting .sortSwitcher,
body.sorting .publishControl,
body.sorting .deviceControl,
body.sorting .personaSwitcher,
body.sorting .exitSortMode { display: none; }
body.sorting .exitSortMode { display: block; }
body.phone .siteControls {
  width: 100%;
  left: 0px;
}
body.phone .phoneHint { visibility: visible; }
body.phone .publishControl,
body.phone .reorderControl,
body.phone .personaSwitcher,
body.phone .exitSortMode { display: none; }
body.phone .exitPhoneMode .icon {
  position: absolute;
  left: 16px;
  top: 8px;
  opacity: 1;
}
body.phone .exitPhoneMode {
  display: block;
  position: relative;
  padding-left: 60px;
}
body.phone .deviceControl .desktop { display: none; }
body:not(.phone) .deviceControl .phone { display: none; }
.go-live-container { position: relative; }
.go-live-container:hover .go-live-credit-message {
  opacity: 1;
  transform: translateY(0px);
}
.go-live-credit-message {
  opacity: 0;
  pointer-events: none;
  width: 234px;
  display: inline-block;
  padding: 10px 10px;
  position: absolute;
  top: 55px;
  right: -10px;
  transform: translateY(20px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  background: #9974BA;
  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.22);
  font-family: Helvetica Neue;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: #FFFFFF;
  box-sizing: border-box;
  box-shadow: inset 0.321033px 0px 0px rgba(255, 255, 255, 0.25);
  border-radius: 5px;
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
}
.go-live-credit-message:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #9974BA;
  border-width: 5px;
  margin-left: 30px;
}

/* styles/components/appSwitcher.scss */
.app-switcher .edge {
  border-left: 1px solid #313234;
  position: absolute;
  top: 0;
  left: 60px;
  height: 100vh;
}
.app-switcher .dot .count {
  color: #fff;
  padding: 3px;
  line-height: 16px;
}
.app-switcher .dot {
  position: absolute;
  display: none;
  right: 13px;
  top: -4px;
  background: #a26fbf;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transform-origin: 50% 50%;
  z-index: 12;
}
.app-switcher.has-notifications .logo-container { opacity: 1; }
.logo-container {
  position: absolute;
  display: block;
  width: 60px;
  height: 300px;
  top: 20px;
  left: 0;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.1s ease-out;
  opacity: 0.5;
}
.logo-container .logo {
  margin-top: 10px;
  display: inline-block;
  background: center/contain url('../images/identity/carbon_logo_r90.svg') no-repeat;
  width: 22px;
  height: 130px;
}
.logo-container div {
  width: 100%;
  text-align: center;
  pointer-events: none;
}
.logo-container .icon {
  width: 30px;
  height: 30px;
}
.logo-container:hover { opacity: 1; }
.dotContainer:hover .dot { transform: scale(1.1); }
.pulse-container {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-block;
}
.pulse-container > .icon {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 1 !important;
  width: 30px;
  height: 30px;
  background: #000;
  -webkit-mask: url('../icons/m.svg') center / 17px 9px no-repeat;
  mask: url('../icons/m.svg') center / 17px 9px no-repeat;
}
.pulse-container > .emitter {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background: #fff;
  z-index: 2;
}
.pulse-container > .pulse {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
}
.has-notifications .dotContainer .dot { display: inline-block; }
.has-notifications .dotContainer .pulse {
  animation: pulse 2.5s ease-in-out;
  animation-iteration-count: infinite;
}
.has-notifications .dotContainer { opacity: 1; }
.pulse.pulse-delay { animation-delay: 0.7s; }
.app-switcher {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 60px;
  background: #161416;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #000;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  transform: translateX(0);
}
body.full-width .app-switcher .toggle-full span { opacity: 1; }
body.full-width .app-switcher .toggle-full {
  position: fixed;
  bottom: 20px;
  left: 120px;
  padding: 10px;
  padding-top: 14px;
  padding-bottom: 6px;
  border-radius: 50%;
  transform: none;
  transition: none;
  background: #000;
}
body.full-width .app-switcher {
  transition: transform 200ms ease-out;
  transform: translateX(-100px);
}
.app-switcher ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  height: 180px;
  padding: 0;
}
.app-switcher li a {
  position: relative;
  display: block;
  height: 40px;
  width: 60px;
  z-index: 1;
}
.app-switcher li .icon {
  position: absolute;
  opacity: 0.4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background-size: contain;
  z-index: 3;
}
.app-switcher li .hint:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 20px;
  background: #9974ba;
  width: 40px;
  left: 0;
  height: 40px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  z-index: 1;
}
.app-switcher li .hint .text {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease-out 0.2s, visibility 0.1s ease-out 0.2s;
  position: relative;
  z-index: 4;
}
.app-switcher li .hint {
  display: block;
  position: fixed;
  left: 7px;
  height: 40px;
  padding: 0 0 0 50px;
  width: 0;
  color: #fff;
  z-index: 2;
  text-align: left;
  font: 10px / 40px "Helvetica Neue", Helvetica, Arial;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity 0.1s linear;
  opacity: 0;
  overflow: hidden;
}
.app-switcher li:hover .icon { opacity: 1; }
.app-switcher li:hover .hint:before {
  opacity: 1;
  width: 100%;
}
.app-switcher li:hover .hint .text {
  visibility: visible;
  opacity: 1;
}
.app-switcher li:hover .hint {
  padding-right: 12px;
  opacity: 1;
  width: auto;
  overflow: visible;
}
.app-switcher li.active .icon { opacity: 1; }
.app-switcher li {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  text-align: center;
}
.app-switcher .bottom span:hover { opacity: 1; }
.app-switcher .bottom span {
  display: inline-block;
  width: 25px;
  height: 25px;
  opacity: 0.4;
}
.app-switcher .bottom {
  position: absolute;
  bottom: 20px;
}

/* styles/components/sidebar.scss */
.navigationEditor h3 {
  font-size: 14px !important;
  text-transform: uppercase;
  color: rgb(152, 155, 160);
  margin-bottom: 0 !important;
}
.pageGuts { position: relative; }
.pageGuts .pageControls { margin-top: 10px; }
.pageGuts .scrollable > .content { height: calc(100vh - 140px); }
.pageGuts .pageSettings .imageControl .emptyGuts .text { display: none; }
.pageGuts .pageSettings { opacity: 0; }
.pageGuts.settings .pageSettings { visibility: visible; }
.pageGuts.design .pageBlocks { visibility: visible; }
.backbar {
  height: 80px;
  margin-bottom: 20px;
  border-bottom: 1px solid #363636;
  display: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.backbar h1 {
  font: 16px "Avenir Next", "Avenir Next Pro", "Avenir";
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #fff;
}
.backbar .back {
  position: absolute;
  left: 0;
}
.sidebar {
  color: #727880;
  padding-left: 60px;
  position: absolute;
  top: 0;
  width: 330px;
  height: 100vh;
}
body.full-width .sidebar {
  transition: transform 200ms ease-out;
  transform: translateX(-150%);
}
.sidebar select { background: #252628; }
.sidebar > .content > .guts { display: none; }
.sidebar > .content .icon.pro:before {
  display: block;
  width: 100%;
  content: 'pro';
  font-size: 6px;
  line-height: 34px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.25);
}
.sidebar > .content .icon.pro:hover { transform: scale(1.1); }
.sidebar > .content .icon.pro {
  position: absolute;
  right: -5px;
  transform-origin: 50% 50%;
  cursor: pointer;
}
.sidebar > .content {
  height: 100vw;
  border: 0;
  margin-right: calc(40px + 30px);
  margin-left: 30px;
}
.sidebar .scrollbar { margin-right: -18px; }
.sidebar.main .mainGuts { display: block; }
.sidebar.pages .pagesGuts { display: block; }
.sidebar.design .designGuts { display: block; }
.sidebar.page .pageGuts { display: block; }
.sidebar.nested .nestedGuts {
  display: block;
  transform: translate3d(0, 0, 0);
}
.sidebar section.open header { margin-bottom: 10px; }
.sidebar section { margin-bottom: 10px; }
.sidebar .control label {
  font-size: 14px;
  color: #fff;
}
.sidebar .control .guts {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.sidebar .control.sliderControl .slider { margin-bottom: 7px; }
.sidebar .control {
  padding-bottom: 3px;
  margin-bottom: 5px;
  border-bottom: 1px solid #363636;
}
.sidebar .imageControl label { width: 100%; }
.sidebar .imageControl .box { height: 80px; }
.sidebar .navPresetLabel {
  font: 10px / 12px "Helvetica Neue", Helvetica, Arial;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #989BA0;
  width: 100%;
  z-index: 1;
}
.sidebar .navPresetControl label {
  font: 10px / 12px "Helvetica Neue", Helvetica, Arial;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 9px;
  color: #989BA0;
  width: 100%;
  z-index: 1;
}
.sidebar .navPresetControl > a:before {
  font: 12px / 33px "Helvetica Neue", Helvetica, Arial;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: 'Change Navigation';
  background: #000;
  height: 31px;
  color: #fff;
  text-align: center;
  width: 170px;
  z-index: 3;
  border-radius: 60px;
  pointer-events: none;
  transition: opacity 0.25s ease;
  opacity: 0;
}
.sidebar .navPresetControl > a:hover:before { opacity: 1; }
.sidebar .navPresetControl > a:hover { opacity: 1; }
.sidebar .navPresetControl > a {
  display: block;
  position: relative;
  transition: opacity 0.25s ease;
  opacity: 0.5;
}
.sidebar > .dropshadow {
  width: 70px;
  background: linear-gradient(to right, transparent 0%, #0e0e0e 100%);
  position: absolute;
  right: 0;
  height: 100%;
  top: 0;
}
.sidebar section header .toggle {
  position: absolute;
  top: 0;
  right: -4px;
}
.sidebar section header { position: relative; }
.sidebar header h3 {
  font-size: 20px;
  font-weight: 500;
  color: rgb(255, 255, 255);
  line-height: 40px;
}
.sidebar header {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.sidebar label {
  width: 100px;
  display: inline-block;
}
.sidebar .pages li {
  display: block;
  line-height: 40px;
}
.sidebar .pages {
  display: block;
  font-size: 18px;
  font-weight: 300;
}
.imageControl.empty + .sliderControl { display: none; }
.imageControl.empty + .toggleControl { display: none; }
.accordion .scrollable { display: none; }
.accordion h3 { transition: color 100ms ease-out; }
.accordion .arrow {
  margin-top: 4px;
  transition: background-color 100ms ease-out;
  -webkit-mask: url('../icons/arrow.svg');
  mask: url('../icons/arrow.svg');
  background: #fff;
  width: 30px;
  height: 30px;
}
.accordion > header:hover h3 { color: #8769a4; }
.accordion > header:hover .arrow { background-color: #8769a4 !important; }
.accordion.open header h3 { color: #8769a4; }
.accordion.open .arrow { background-color: #8769a4 !important; }
.accordion.open .scrollable { display: block; }
.personalityControl { font-size: 14px; }
.personalityControl ul li { line-height: 20px; }
.personalityControl .selected {
  font-weight: bold;
  color: #fff;
}
nav.tabs {
  position: relative;
  margin-bottom: 20px;
  -webkit-user-select: none;
  user-select: none;
}
nav.tabs ul li.active { opacity: 1; }
nav.tabs ul li {
  width: 50%;
  font: 15px / normal "Helvetica Neue", Helvetica, Arial;
  padding-bottom: 5px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  opacity: 0.5;
}
nav.tabs ul {
  display: flex;
  flex-flow: row;
  border-bottom: 1px solid #363636;
}
nav.tabs .underline {
  background: #9974BA;
  border-radius: 2px;
  width: 115px;
  height: 3px;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.design .imageControl .cloud .icon { margin-top: -7px; }
.design .imageControl .emptyGuts .text {
  transform: translate(0, -15px);
  opacity: 0.5;
}

/* styles/components/editBubble.scss */
.optionSet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.optionSet > div { width: 50%; }
.optionSet label {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.editBubble {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  display: flex;
  align-items: center;
  right: 30px;
  top: 300px;
  width: 50px;
  height: 100px;
  transform: translateX(20px);
  transition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  z-index: 3;
  padding: 40px 30px;
}
body.full-width .editBubble {
  opacity: 0;
  pointer-events: none;
}
.editBubble.open [tooltip]::before,
.editBubble.open [tooltip]::after { display: none !important; }
.editBubble > span .icon {
  background-size: 24px 24px;
  opacity: 0.5;
}
.editBubble > span:hover .icon { opacity: 1; }
.editBubble > span {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 50px;
  width: 50px;
  background-color: #242527;
  border: solid 1px #000;
  border-radius: 100%;
  cursor: pointer;
  transition: opacity 0.1s ease-out, visibility 0.1s ease-out, transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.editBubble .clone,
.editBubble .delete,
.editBubble .reorder,
.editBubble .sort {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -20px;
  width: 40px;
  height: 40px;
  transform-origin: 50% 50%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}
.editBubble .clone { transform: translate(0, 100%); }
.editBubble .sort {
  transform: translate(0, -100%);
  display: none;
}
.editBubble .reorder { transform: translate(0, -100%); }
.editBubble .delete { transform: translate(0, 100%); }
.editBubble:hover .reorder { transform: translate(0, -140%); }
.editBubble:hover .clone { transform: translate(0, 140%); }
.editBubble:hover .delete { transform: translate(0, 260%); }
.editBubble:hover .clone,
.editBubble:hover .reorder,
.editBubble:hover .delete,
.editBubble:hover .reorder {
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in, transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
  opacity: 1;
  visibility: visible;
}
.editBubble.open .reorder { transform: translate(0, -140%); }
.editBubble.open .clone { transform: translate(0, 140%); }
.editBubble.open .delete { transform: translate(0, 260%); }
.editBubble.open .clone,
.editBubble.open .delete,
.editBubble.open .reorder {
  opacity: 1;
  visibility: visible;
}
.editBubble [tooltip]::before {
  right: auto !important;
  left: 0 !important;
  transform: translateX(-100%);
  transition: opacity 0.15s ease;
  will-change: opacity;
}
.editBubble [tooltip]::after {
  right: auto !important;
  left: -11px !important;
  transform: translateX(-90%);
  transition: opacity 0.15s ease, transform 0.25s ease;
  will-change: opacity, transform;
}
.editBubble [tooltip]:hover::after { transform: translateX(-100%); }
.editBubble.show, .editBubble.open {
  transform: translateX(0px);
  visibility: visible;
  opacity: 1;
}
.itemBubble {
  top: 0;
  visibility: hidden;
  position: absolute;
  z-index: 100;
}
.itemBubble.show > .action {
  scale: 1;
  opacity: 1;
}
.itemBubble > .action > .icon {
  opacity: 0.6;
  background-color: #fff;
}
.itemBubble > .action.active > .icon { background-color: #fff; }
.itemBubble > .action.active {
  background-color: #9974ba;
  border: solid 1px #9974ba;
}
.itemBubble > .action.link.invalid .link-editor > input { border: 2px solid red; }
.itemBubble > .action.link.is-shown .hint {
  visibility: hidden;
  opacity: 0;
}
.itemBubble > .action.link.is-shown .link-editor {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.itemBubble > .action .link-editor:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 4px;
  margin-top: -5px;
  width: 13px;
  height: 13px;
  background: #252628;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 5px;
}
.itemBubble > .action .link-editor > input {
  border-radius: 50px;
  background-color: #252628;
  box-shadow: inset 0px 1.5px 0px rgba(255, 255, 255, 0.22);
  padding-right: 50px;
}
.itemBubble > .action .link-editor {
  display: block;
  width: 210px;
  height: 42px;
  position: absolute;
  top: -5px;
  left: 45px;
  opacity: 0;
  transform: translateX(-25px);
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.itemBubble > .action {
  display: block;
  width: 15px;
  height: 15px;
  margin-bottom: 10px;
  background-color: #242527;
  border: solid 1px #000;
  border-radius: 50%;
  box-sizing: content-box;
  position: relative;
  padding: 10px;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  scale: 0.2;
  transition: scale cubic-bezier(0.25, 0.59, 0.42, 1.63) 200ms, opacity ease-out 200ms, background-color 200ms ease-out;
  will-change: background-color, opacity, scale;
}
.itemBubble .action:hover > .icon { opacity: 1; }
.itemBubble .action.thumbnail > .file { visibility: hidden; }
.itemBubble input.file {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0;
  display: block;
  width: 202px;
  height: 26px;
  font-size: 40px;
  z-index: 102;
  cursor: pointer;
}
.itemBubble.show { visibility: visible; }
.action.autoplay .icon { transform: scale(1.2); }
.action.attribution { position: relative; }
.action.attribution .editGuts input {
  width: 200px;
  margin-bottom: 10px;
}
.action.attribution .editGuts {
  display: none;
  padding: 10px;
}
.action.attribution.editing .icon { display: none; }
.action.attribution.editing .editGuts { display: block; }
.action.attribution.editing {
  width: unset;
  height: unset;
  border-radius: 15px;
}
.itemBubble > .action > .hint {
  visibility: hidden;
  opacity: 0;
  display: block;
  position: absolute;
  top: 6px;
  left: 47px;
  height: 26px;
  padding: 0 8px;
  line-height: 26px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  background: #333;
  color: #fff;
  text-transform: uppercase;
  border-radius: 3px;
  transition: opacity 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}
.itemBubble > .action > .hint:before {
  position: absolute;
  content: ' ';
  top: 50%;
  left: -5px;
  margin-top: -5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 5px 0;
  border-color: transparent #333 transparent transparent;
  z-index: 3002;
}
.itemBubble > .action:hover .hint {
  visibility: visible;
  opacity: 1;
}
.layoutOption .icon { opacity: 0.3; }
.layoutOption.selected .icon { opacity: 1; }

/* styles/components/toggleSwitch.scss */
.toggle.switch {
  display: block;
  width: 40px;
  height: 20px;
  border-radius: 30px;
  border: 1px solid rgb(157, 164, 173);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  box-sizing: border-box;
  position: relative;
}
.toggle.switch:hover { background: rgba(157, 164, 173, 0.1); }
.toggle.switch > .handle {
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
  top: 1px;
  left: 1px;
  border-radius: 50px;
  background: rgb(157, 164, 173);
  transition: all 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.toggle.switch:active > .handle { width: 22px; }
.toggle.switch.big > .handle {
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  transition: all 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.toggle.switch.big:active > .handle { width: 30px; }
.toggle.switch.big {
  width: 60px;
  height: 30px;
  border-radius: 37.5px;
}
.toggle.switch.on {
  border: 1px solid #9874b9;
  background: rgba(152, 116, 185, 0.3);
}
.toggle.switch.on:hover { background: rgba(152, 116, 185, 0.2); }
.toggle.switch.on > .handle {
  background: #9874b9;
  right: 1px;
  left: auto;
}
.toggleControl {
  display: flex;
  width: 100%;
  align-items: center;
}
.toggleControl label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faviconControl {
  display: flex;
  width: 100%;
  align-items: center;
}
.faviconControl input {
  visibility: hidden;
  position: absolute;
  top: 0;
  right: 0;
}
.faviconControl .previewGuts {
  width: 16px;
  height: 16px;
}
.faviconControl .tiny-cloud {
  display: none;
  background-size: cover;
  width: 30px;
  height: 30px;
  background-image: url('../icons/favicon-cloud.svg');
}
.faviconControl.empty .previewGuts { visibility: hidden; }
.faviconControl.empty .tiny-cloud { display: inline-block; }

/* styles/components/imageControl.scss */
.imageControl {
  position: relative;
  border-bottom: none !important;
}
.imageControl .box {
  border-radius: 7px;
  overflow: hidden;
  box-sizing: border-box;
  cursor: default;
  transition: border 0.4s ease-in-out;
  background-color: #232325;
  height: 140px;
  min-height: 60px;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.imageControl.tiny .box { height: 60px; }
.imageControl .cloud .icon {
  position: absolute;
  top: 50%;
  transform: translate(0, -15px);
  opacity: 0.2;
  background: rgba(255, 255, 255, 0.8);
  transition: transform 0.25s ease-in-out 0.1s, color 0.2s ease-in-out 0.1s;
}
.imageControl .cloud {
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.imageControl:hover .cloud .icon { background: rgba(255, 255, 255, 1); }
.imageControl .emptyGuts { display: none; }
.imageControl .previewGuts img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-sizing: border-box;
  padding: 5px;
}
.imageControl .previewGuts {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.imageControl .emptyGuts > input,
.imageControl .previewGuts > input {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  font-size: 5000px;
  opacity: 0;
  cursor: pointer;
}
.imageControl .previewGuts {
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
  transition: transform 0.2s ease-in 0.12s, opacity 1s ease;
}
.imageControl .controls .replace:hover { color: rgba(255, 255, 255, 0.7); }
.imageControl .controls .replace > input {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 24px;
  font-size: 500px;
  z-index: 112;
  opacity: 0;
  cursor: pointer;
}
.imageControl .controls .replace {
  position: relative;
  width: 50%;
  overflow: hidden;
  transition: color 0.15s ease-in-out, opacity 0.15s ease-in;
  cursor: pointer;
}
.imageControl .controls .replace .icon,
.imageControl .controls .destroy .icon {
  opacity: 0.3;
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}
.imageControl .controls .replace:hover .icon,
.imageControl .controls .destroy:hover .icon { opacity: 0.6; }
.imageControl .controls .replace,
.imageControl .controls .destroy {
  width: 50%;
  transition: color 0.15s ease-in-out, opacity 0.15s ease-in;
  cursor: pointer;
}
.imageControl .controls {
  display: flex;
  position: absolute;
  bottom: 11px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 56px;
  height: 24px;
  padding: 0;
  color: rgba(255, 255, 255, 0.3);
  z-index: 1;
  font-size: 0;
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s ease-out 0.11s;
}
.imageControl:hover .cloud .icon { transform: translate(0, -18px); }
.imageControl:hover .previewGuts {
  transform: translate(0, -36px);
  transition: transform 0.28s ease-out 0.07s;
}
.imageControl:hover .controls {
  z-index: 1112;
  opacity: 1;
  transition: opacity 0.2s ease 0.1s;
}
.imageControl:hover { border-color: rgba(255, 255, 255, 0.1); }
.imageControl .emptyGuts .text {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #CFD2D7;
  font-weight: 500;
  letter-spacing: 0.2em;
  pointer-events: none;
  font: 11px "Avenir Next", "Avenir Next Pro", "Avenir";
  text-transform: uppercase;
}
.imageControl .emptyGuts .hint {
  display: block;
  position: absolute;
  left: 0;
  top: 102px;
  right: 0;
  margin: 0 auto;
  text-align: center;
  font: 11px / 14px "Helvetica Neue", Helvetica, Arial;
  font-weight: 500;
  color: #66686C;
  pointer-events: none;
}
.imageControl.empty .box { border: 1px dashed rgba(255, 255, 255, 0.2); }
.imageControl.empty .cloud { visibility: visible; }
.imageControl.empty .emptyGuts {
  display: block;
  width: 100%;
  height: 100%;
}
.imageControl.empty:hover { border-color: rgba(255, 255, 255, 0.4); }
.imageControl.empty .previewGuts,
.imageControl.empty .controls { display: none; }
.imageControl.empty {
  background-image: none;
  cursor: pointer;
}
.imageControl.dragOver .icon { opacity: 1; }
.imageControl.dragOver .previewGuts,
.imageControl.dragOver .controls { visibility: hidden; }
.imageControl.dragOver .cloud:before {
  color: #2ed491;
  transform: translate(0, -15px);
}
.imageControl.dragOver .cloud,
.imageControl.dragOver .emptyGuts { visibility: visible; }
.imageControl.dragOver .emptyGuts .text {
  transform: translate(0, -15px);
  opacity: 1;
}
.imageControl.dragOver { border-color: #fff; }
.imageControl.uploading .previewGuts img { display: none; }
.imageControl.uploading .emptyGuts .text { display: none !important; }
.imageControl.uploading.empty .emptyGuts { opacity: 1 !important; }
.imageControl.uploading .cloud,
.imageControl.uploading .progress { visibility: visible; }
.imageControl.uploading .cloud:before { animation: uploading 1.2s ease-out infinite forwards; }
.imageControl.uploading .controls { display: none; }
.imageControl.uploading {
  border-color: rgba(255, 255, 255, 0.2);
  cursor: default;
}
@keyframes uploading {
  0% {
    transform: translate(0, 0);
    color: rgba(255, 255, 255, 0.2);
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0);
  }
  80% {
    transform: translate(0, -14px);
    color: #2ed491;
    text-shadow: 0 0 13px #2ed491;
  }
  100% {
    transform: translate(0, 0);
    color: rgba(255, 255, 255, 0.2);
    text-shadow: 0 0 3px rgba(255, 255, 255, 0);
  }
}
@keyframes dragPulse {
  0% { background: rgba(255, 255, 255, 0.08); }
  100% { background: rgba(255, 255, 255, 0.1); }
}

/* styles/components/paintControl.scss */
.paintControl {
  display: flex;
  flex-flow: row;
  align-items: center;
  box-sizing: border-box;
}
.paintControl .guts { text-align: right; }
.colorWell {
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-clip-path: circle(48% at center);
  clip-path: circle(48% at center);
}
.colorWell .value {
  display: block;
  width: 100%;
  height: 100%;
}
.checkboard {
  background: #fff url('../images/checkerboard.svg');
  background-size: 20px;
}
.paintControl.big .guts .reset {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translate(0, -33px);
}
.paintControl.big .guts {
  position: relative;
  width: 100%;
  flex: 1;
  text-align: center;
  padding: 10px 0;
}
.paintControl.big .colorWell {
  margin: auto;
  width: 46px;
  height: 46px;
}

/* styles/components/modal.scss */
.mask {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
  background: #423a52;
  z-index: 2;
}
.mask.show {
  transition: opacity 0.35s ease-out, visibility 0.35s ease-out;
  opacity: 0.9;
  visibility: visible;
}
.mask.hide {
  transition: opacity 0.25s ease-in, visibility 0.25s ease-in;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.mask.partial {
  width: auto;
  right: 0;
  left: 360px;
}
.mask.dark { background: #1f1d24; }
.mask.opaque.show { opacity: 0.9; }
.mask.opaque { background: #fff; }
.mask.transparent.show,
.mask.transparent.hide { transition: none; }
.mask.transparent {
  background: transparent;
  transition: none;
}

/* styles/components/pageManager.scss */
.page-manager {
  padding: 10px 0 0;
  -webkit-user-select: none;
  user-select: none;
}
.page-manager header {
  position: relative;
  margin-bottom: 10px;
}
.page-manager h4 {
  font: 500 10px "Helvetica Neue", Helvetica, Arial;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 1;
  color: #989BA0;
}
.page-manager .newPage { display: block; }
.newPage {
  display: none;
  margin-top: 40px;
  font-size: 14px;
}
.newPage .urlField { display: none; }
.newPage.link .changeType { display: none; }
.newPage.link .urlField { display: block; }
.newPage h4 { margin-bottom: 10px; }
.newPage .field { margin-bottom: 10px; }
.newPage .actions { margin-top: 17px; }
.newPage .changeType {
  font-size: 10px;
  line-height: 14px;
  color: #545355;
  cursor: pointer;
}
.newPage .button { min-width: 80px; }
#pageList li:hover .icon.delete { display: block; }
#pageList li:hover .icon.visibility { display: block; }
#pageList li:hover .field:after { display: none; }
#pageList li:hover {
  background: #2F3033;
  box-shadow: 4px 4px 11px rgba(0, 0, 0, 0.44), inset 0px 1px 0px #3F3F3F;
}
#pageList li .handle:hover { opacity: 1; }
#pageList li .handle:active { cursor: grabbing; }
#pageList li .handle {
  top: 7px;
  position: absolute;
  left: -4px;
  width: 28px;
  height: 28px;
  text-align: center;
  opacity: 0.6;
  transition: opacity 0.15s ease-in-out;
  z-index: 20;
  cursor: grab;
}
#pageList li .icon:hover { opacity: 1; }
#pageList li .icon.visibility {
  display: none;
  margin: 0 10px;
  cursor: pointer;
}
#pageList li .icon.delete {
  display: none;
  margin-left: 10px;
  cursor: pointer;
}
#pageList li .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: 0.3;
  transition: opacity 0.2s ease-out;
}
#pageList li .deletedGuts > span {
  display: block;
  padding-top: 3px;
}
#pageList li .deletedGuts a {
  font: 10px "Helvetica Neue", Helvetica, Arial;
  font-weight: 500;
}
#pageList li .deletedGuts {
  display: none;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  height: 35px;
  color: #fff;
  background: rgba(208, 48, 16, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.6);
  border-radius: 3px;
  font: 9px "Avenir Next", "Avenir Next Pro", "Avenir";
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
#pageList li.deleted .deletedGuts { display: flex; }
#pageList li.deleted .handle,
#pageList li.deleted .icon,
#pageList li.deleted .previewGuts { display: none; }
#pageList li.deleted .field { display: none; }
#pageList li.deleted:hover .icon.delete,
#pageList li.deleted:hover .icon.visibility { display: none; }
#pageList li.deleted {
  background: transparent;
  box-shadow: none;
}
#pageList li.hidden { opacity: 0.5; }
#pageList li {
  background: rgba(47, 48, 51, 0.5);
  box-shadow: inset 0px 1px 0px #3F3F3F;
  border-radius: 3px;
  margin-bottom: 8px;
  line-height: 34px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#pageList .previewGuts { cursor: pointer; }
#pageList li.chosen { opacity: 0; }
#pageList li.dragging:before { opacity: 0; }
#pageList li.dragging {
  background: rgba(47, 48, 51, 0.4);
  border-radius: 0px 3px 3px 0px;
}
#pageList li.removed { display: none; }
#pageList .field:after {
  content: '';
  position: absolute;
  right: 0;
  top: -5px;
  height: 35px;
  display: block;
  height: 100%;
  width: 50px;
  background: linear-gradient(to right, rgba(42, 43, 44, 0) 0%, #2a2b2c 50%, #2a2b2c 100%);
}
#pageList .field > .input {
  padding: 0 10px 0 22px;
  font: 21px "Avenir Next", "Avenir Next Pro", "Avenir";
  color: #74787b;
  border-bottom: none;
}
#pageList .field > .input:hover { color: #fff; }
#pageList .field > .message { display: none; }
#pageList .field {
  position: relative;
  padding: 0;
  width: 100%;
  margin-top: 4px;
}
#pageList .field.invalid > .message { display: none; }

/* styles/components/colorPicker.scss */
.colorPicker {
  display: inline-block;
  width: 100%;
}
.colorPickerPopout { width: 260px; }
.colorPickerPopout header > span.selected { opacity: 1; }
.colorPickerPopout header > span label {
  flex: 1;
  font-size: 12px;
  color: rgb(239, 240, 245);
  text-transform: uppercase;
  margin-left: 10px;
  cursor: pointer;
}
.colorPickerPopout header > span .icon {
  display: block;
  flex: 1 0 0;
  width: 24px;
  height: 24px;
}
.colorPickerPopout header > span {
  display: flex;
  opacity: 0.5;
  align-items: center;
  cursor: pointer;
}
.colorPickerPopout header {
  display: flex;
  height: 65px;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
}
.colorPickerPopout .controls .gradient-direction {
  position: absolute;
  right: 20px;
}
.colorPickerPopout .controls {
  margin: 10px 0 10px 0;
  position: relative;
  z-index: 1;
}
.colorPickerPopout .transparency-toggle {
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 4px;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background: #252628 url('../images/checkerboard.svg');
}
.colorPickerPopout .actions .button { min-width: 140px; }
.colorPickerPopout .actions {
  margin: 5px 0 20px;
  text-align: center;
}
.colorPickerPopout.solidMode .transparency-toggle { display: inline-block; }
.colorPickerPopout.solidMode 
    .gradientControl { display: none; }
.colorPickerPopout.solidMode .gradient-direction { display: none; }
.colorPickerPopout.gradientMode .transparency-toggle { display: none; }
.hexField input {
  background: transparent;
  text-align: center;
  width: 100%;
  font: 18px "Avenir Next", "Avenir Next Pro", "Avenir";
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.gradient-direction { z-index: 100; }
.gradient-direction .dot {
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: calc(50% - 3px);
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  transform: rotate(90deg) translate(-6px);
}
.gradient-direction .circle {
  position: relative;
  border-width: 2px;
  border-color: rgb(255, 255, 255);
  border-style: solid;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
}
.gradientControl {
  margin: 20px;
  width: calc(100% - 40px);
  height: 20px;
  border-radius: 10px;
  position: relative;
  box-sizing: border-box;
}
.gradientControl .stop.active {
  border-width: 3px;
  box-shadow: 4px 3px 7px 0px rgba(0, 0, 0, 0.6);
}
.gradientControl .stop {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  top: 10px;
  width: 16px;
  height: 16px;
}
.colorPicker .twod,
.colorPicker .twod .bg {
  width: 100%;
  height: 190px;
}
.colorPicker .oned,
.colorPicker .oned .bg { height: 30px; }
.colorPicker .oned,
.colorPicker .oned .bg { width: 100%; }
.colorPicker .twod .bg { position: absolute; }
.colorPicker .twod .pointer {
  position: relative;
  z-index: 2;
  width: 8px;
}
.colorPicker .shape {
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgb(239, 240, 245);
  box-shadow: 4px 3px 7px 0px rgba(0, 0, 0, 0.6);
  width: 16px;
  height: 16px;
}
.colorPicker .oned .pointer .shape { margin-top: 4px; }
.colorPicker .oned .pointer {
  position: relative;
  top: 10px;
  z-index: 2;
}
.colorPicker .oned .bg { background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%); }
.colorPicker .twod .bg1 {
  z-index: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.colorPicker .twod .bg2 {
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
.gradientControl .nub { cursor: pointer; }
.gradientControl .track.dragging { cursor: grab; }
.pointer { cursor: pointer; }

/* styles/components/publishControl.scss */
.goLive {
  background: #9974ba !important;
  margin-left: 20px;
}
.goLive .button {
  line-height: 43px;
  opacity: 1;
  color: #fff;
}
.goLive a { opacity: 1 !important; }
.publishControl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 40px;
  color: #3f3f3f;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 100ms linear;
}
.publishControl .publishedGuts {
  display: none;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #fff;
  border-radius: 19px;
  width: 100%;
  height: 40px;
}
.publishControl .unpublishedGuts {
  background: #9974ba;
  border-radius: 19px;
  color: #fff;
  width: 100%;
  height: 40px;
}
.publishControl.published .unpublishedGuts { display: none; }
.publishControl.published .publishedGuts { display: block; }
.publishControl.published {
  opacity: 0.5;
  pointer-events: none;
}
.publishControl .button {
  line-height: 43px;
  opacity: 1;
  padding: 0 31px 0 32px;
}
.publishControl:hover .button { opacity: 1; }
.publishControl .status {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  border-radius: 5px;
  background: #fff;
}
.notice-bar {
  position: fixed;
  left: 390px;
  top: 20px;
  width: calc(100% - 390px - 70px);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.notice-bar .message.green { background: #29CC87; }
.notice-bar .message a {
  text-decoration: underline;
  pointer-events: all;
}
.notice-bar .message.alert { background: #E32253; }
.notice-bar .message {
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  letter-spacing: -0.02em;
  padding: 0 40px;
  border-radius: 50px;
  color: #fff;
}

/* styles/components/projectManager.scss */
.device { will-change: transform; }
.projectManager { --browser-overlap: 40px; }
.projectManager .addProjectButton {
  position: absolute;
  right: 0px;
}
.purple-banner {
  height: 90px;
  background: #9974BA;
  border-radius: 6px;
  flex-flow: row;
  align-items: center;
  display: none;
}
.purple-banner .lhs {
  padding-left: 35px;
  width: 70%;
}
.purple-banner p {
  color: #fff;
  font-size: 25px;
  line-height: 31px;
  letter-spacing: -0.02em;
}
.purple-banner .rhs .button { min-width: 140px; }
.purple-banner .rhs {
  width: 30%;
  padding-right: 25px;
  text-align: right;
}
.purple-banner .dismiss {
  font: 12px / 15px "Helvetica Neue", Helvetica, Arial;
  text-align: center;
  margin-right: 20px;
  color: #52366A;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.projectManagerContent { position: relative; }
.projectManagerContent .scrollable { height: calc(100% - 80px); }
.projectManagerContent .scrollbar > .handle { left: 0; }
.accountApp, .notificationsApp { --browser-overlap: -40px; }
.projectManager .device .browser,
.appContainer .device .browser { position: relative; }
.projectManager .device:hover,
.appContainer .device:hover { transform: translateX(15px); }
.projectManager .device,
.appContainer .device {
  position: absolute;
  transition: transform 0.25s ease-out;
  transform: translateX(0);
  left: calc(100% - var(--browser-overlap, 0px));
}
.addProjectButton.disabled {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s linear, visibility 0.1s linear;
}
.wideApp {
  position: absolute;
  top: 0;
  left: 60px;
  height: 100%;
  background: #252628;
  color: rgba(255, 255, 255, 0.212);
  padding: 0 70px 20px 30px;
  box-sizing: border-box;
  border-left: 1px solid #313234;
  width: calc(100vw - 300px);
  max-width: 1050px;
}
.projectManager { visibility: hidden; }
.projectManager .scrollbar { right: -14px; }
.projectManager ul .project:hover .thumbnail { box-shadow: 0px 4px 33px rgba(0, 0, 0, 0.61); }
.projectManager ul .project.dragOver .projectControls,
.projectManager ul .project.uploading .projectControls,
.projectManager ul .project.dragging .projectControls,
.projectManager ul .project.ghost .projectControls {
  opacity: 0;
  pointer-events: none;
}
.projectManager ul .project .status:before { content: "published"; }
.projectManager ul .project.draft .status:before { content: "draft"; }
.projectManager ul .project.draft .status .dot { background: #923614; }
.projectManager ul .project.draft .status { color: #923614; }
.projectManager ul .project .cloud,
.projectManager ul .project .deletedGuts { height: calc(100% - 60px); }
.projectManager ul .project .deletedGuts p {
  font: 17px "Avenir Next", "Avenir Next Pro", "Avenir";
  margin-bottom: 10px;
  color: #FF004D;
}
.projectManager ul .project .deletedGuts {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  color: #fff;
  z-index: 20;
  text-align: center;
  visibility: hidden;
  justify-content: center;
  align-items: center;
}
.projectManager ul .project.deleted .thumbnail { opacity: 0.5; }
.projectManager ul .project.deleted .cloud { display: none; }
.projectManager ul .project.deleted .deletedGuts { visibility: visible; }
.projectManager ul .project.deleted .info { opacity: 0.05; }
.projectManager ul .project.deleted .projectControls { display: none; }
.projectManager ul .project.ghost { visibility: hidden; }
.projectManager ul .project {
  display: block;
  position: relative;
  margin-bottom: 20px;
}
.projectManager ul .thumbnail {
  position: relative;
  z-index: 10;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background-color: #000;
  display: block;
  padding-bottom: calc(10 / 16 * 100%);
  background-size: cover;
  background-position: center;
}
.projectManager ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2rem;
  margin-top: 30px;
  -webkit-user-select: none;
  user-select: none;
}
.projectManager .info .title {
  padding: 15px 5px;
  max-width: 100%;
  font-size: 18px;
  color: #fff;
  line-height: 30px;
  display: block;
  background: transparent;
}
.projectManager .info .status .dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: rgb(86, 215, 0);
  margin-left: 5px;
}
.projectManager .info .status {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  font: 10px / 60px "Helvetica Neue", Helvetica, Arial;
  letter-spacing: 1px;
  color: rgb(86, 215, 0);
  text-transform: uppercase;
}
.projectManager .info .fadeOut {
  position: absolute;
  right: 30px;
  top: 0;
  background: linear-gradient(to right, rgba(37, 38, 40, 0) 0%, #252628 50%, #252628 100%);
  width: 180px;
  height: 100%;
  display: block;
  pointer-events: none;
}
.projectManager .info { position: relative; }
.project.dragging { opacity: 0.1; }
.project.dragging .info { display: none; }
.projectControls {
  display: flex;
  align-items: flex-end;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 60px);
  box-sizing: border-box;
  cursor: grab;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.71);
  z-index: 11;
  transition: transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  opacity: 0;
}
.projectControls:hover .projectControlsGuts { transform: scale(1); }
.projectControls:hover { opacity: 1; }
.projectControls .projectControlsGuts {
  display: flex;
  flex: 1;
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
  z-index: 12;
  transform: scale(0.95);
  transition: height 0.15s cubic-bezier(0.02, 0.01, 0.47, 1) 0.1s, opacity 0.25s linear, transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.projectControls .projectControl:hover { transform: translate(0, -5px); }
.projectControls .projectControl {
  padding: 10px;
  cursor: pointer;
  transition: transform 0.15s ease-in-out;
}
.project.dragging .action { display: none; }
.action { cursor: pointer; }
#projectThumbnailControl .box { height: 100%; }
#projectThumbnailControl.imageControl .emptyGuts .text { top: 52%; }
body:not(.managing-projects) .projectManager .cloud { display: none !important; }
.overlimitState {
  opacity: 0.5;
  display: none;
}
.overlimitState .d,
.overlimitState .h {
  display: block;
  transition: opacity 0.4s ease-in-out;
}
.overlimitState .d {
  visibility: visible;
  opacity: 1;
  color: #fff;
}
.overlimitState .h {
  visibility: hidden;
  opacity: 0;
  height: 0;
  padding-left: 10px;
}
.overlimitState:hover .h {
  visibility: visible;
  opacity: 1;
  height: 40px;
}
.overlimitState:hover .d {
  visibility: hidden;
  opacity: 0;
  height: 0;
}
.reached-project-limit .quickNav .actions { display: none; }
.reached-project-limit .projectControl.clone { display: none !important; }
.reached-project-limit .addProjectButton button { display: none; }
.reached-project-limit .project-limit-reached-upsell { display: flex; }
.reached-project-limit .overlimitState { display: block; }

/* styles/components/newProject.scss */
.newProject {
  align-items: top;
  overflow: hidden;
  transform: scale(0.95);
  transition: opacity 0.25s linear, transform 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
  height: 0;
  opacity: 0;
}
.newProject.open {
  transition: opacity 0.25s cubic-bezier(0.02, 0.01, 0.47, 1), transform 0.2s cubic-bezier(0.02, 0.01, 0.47, 1);
  height: unset;
  opacity: 1;
  transform: scale(1);
}
.newProject .guts {
  display: flex;
  padding: 60px 40px 50px;
  flex-flow: row;
  justify-content: center;
}
.newProject .actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30px;
  text-align: right;
}
.newProject .cancel:hover { color: #fff; }
.newProject .cancel { display: block; }
.newProject .imageControl .cloud .icon { transform: translate(0, -35px); }
.newProject .imageControl .box:hover .cloud .icon { transform: translate(0, -38px); }
.newProject .imageControl {
  margin-bottom: 20px;
  height: 165px;
}
.newProject h3 {
  font-size: 40px;
  line-height: 1.13;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.75em;
}
.newProject p {
  font-size: 20px;
  line-height: 1.35;
}
.newProject label {
  font-size: 10px;
  color: #989BA0;
  letter-spacing: 1px;
  padding: 8px 0 3px;
  text-transform: uppercase;
}
.newProject .field > .input { font-size: 17px; }
.newProject .field.invalid > .message { color: #989BA0; }
.newProject .left {
  flex: 0 280px;
  padding-right: 50px;
}
.newProject .right { flex: 0 430px; }

/* styles/components/paddingControl.scss */
.paddingControl {
  position: absolute;
  left: 0;
  height: 30px;
  width: 100%;
  display: none;
  text-align: center;
  z-index: 4;
}
.paddingControl .handleContainer:hover .handle { transform: scale(1.2); }
.paddingControl .handleContainer {
  padding: 20px;
  cursor: grab;
}
.paddingControl.dragging .handleContainer { cursor: grabbing; }
.paddingControl .handle .lines {
  margin-left: 16px;
  margin-top: 5px;
  width: 19px;
}
.paddingControl .handle .line {
  display: block;
  background-color: rgb(255, 255, 255);
  box-shadow: 0.454px 0.891px 0px 0px rgba(21, 138, 127, 0.42);
  width: 100%;
  height: 1px;
  margin: 2px 0;
}
.paddingControl .handle {
  text-align: center;
  transform: scale(1);
  transition: transform 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  display: inline-block;
  border-radius: 10px;
  background-color: rgb(0, 203, 227);
  width: 50px;
  height: 18px;
  z-index: 5;
}
.paddingControl.top {
  top: 0;
  transform: translateY(-7px);
}
.paddingControl.bottom {
  bottom: 0;
  transform: translateY(20px);
}
.block.active .paddingControl { display: block; }
.paddingDetails {
  display: flex;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 200ms ease-out;
}
.paddingDetails.show {
  visibility: visible;
  opacity: 1;
}
.paddingDetails .inner {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  transform: translate(170px, 65px);
}

/* styles/components/textEditor.scss */
.textEditor.popout {
  border-style: solid;
  border-width: 1px;
  border-color: rgb(0, 0, 0);
  box-shadow: 15.849px 13.777px 40px 0px rgba(0, 0, 0, 0.31), inset 0.908px 1.782px 0px 0px rgba(255, 255, 255, 0.15);
}
.text-editor-toolbar {
  position: fixed;
  display: none;
  min-width: 240px;
  border: solid 1px #000;
  background-color: #252628;
  transition: border-radius 0.15s ease-in-out;
  border-radius: 20px;
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 257, 0.22);
  border-radius: 25px;
  color: #fff;
  letter-spacing: normal;
  line-height: normal;
  transform: translateY(10px);
  z-index: 1001;
}
.text-editor-toolbar.flip { transform: translateY(-10px); }
.text-editor-toolbar.show { display: block; }
.text-editor-toolbar.expanded {
  border-radius: 5px;
  transform: translateY(10px);
}
.text-editor-toolbar-arrow { border-bottom: 6px solid #242527; }
.text-editor-toolbar.basic .expand-text-options-button { display: none; }
.ql-flip .ql-tooltip-arrow {
  border-top: 6px solid #242527 !important;
  border-bottom: none !important;
}
.link-editor { display: none; }
.link-editor input {
  height: 42px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  height: 100%;
  outline: none;
  padding: 10px 20px;
  position: absolute;
  width: 100%;
  left: 0;
}
.link-editor .done-button {
  cursor: pointer;
  display: block;
  position: absolute !important;
  right: 6px;
  background: #9974ba;
  background-image: url('../icons/checkmark.svg');
  width: 30px;
  height: 30px;
  top: 6px;
  border-radius: 100%;
  overflow: hidden;
}
.editing-link { height: 44px; }
.editing-link .link-editor { display: block; }
.editing-link .textControls div { visibility: hidden; }
.ql-toolbar button.ql-active,
.ql-toolbar button.ql-active { color: #9974ba; }
.ql-toolbar button.ql-active .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke { stroke: #9974ba; }
.ql-toolbar button.ql-active .ql-fill,
.ql-toolbar button.ql-active .ql-fill { fill: #9974ba; }
.textControls .colorPickerContainer .colorPicker .oned .bg {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.textControls .colorPickerContainer .hexField {
  display: flex;
  align-items: center;
  flex: 1;
}
.textControls .colorPickerContainer .icon {
  position: absolute;
  right: 6px;
  top: 6px;
}
.textControls .colorPickerContainer.open {
  visibility: visible;
  transform: scale(1);
}
.textControls .colorPickerContainer .controls { margin-bottom: 10px; }
.textControls .colorPickerContainer .actionBar button { margin: auto; }
.textControls .colorPickerContainer .actionBar {
  position: relative;
  margin-top: 20px;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
  display: flex;
}
.textControls .colorPickerContainer {
  position: absolute;
  top: -1px;
  width: 100%;
  background: #252628;
  border-radius: 5px;
  visibility: hidden;
}
.textControls .colorControl .colorAction::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: transform 0.25s ease;
}
.textControls .colorControl .colorAction:hover::before,
.textControls .colorControl .colorAction:focus::before { transform: scale(1.5); }
.textControls .colorControl .colorAction { position: relative; }
.textControls .colorControl .reset .icon {
  opacity: 1;
  margin: 3px;
  background: transparent;
}
.textControls .colorControl .reset:hover { opacity: 0.5; }
.textControls .colorControl .reset {
  display: none;
  position: absolute;
  top: -6px;
  left: -12px;
  width: 14px;
  height: 14px;
  background: #000;
  border-radius: 100%;
}
.textControls .colorControl.resettable .reset { display: block; }
.textControls .colorControl.resettable { margin: 0 4px 0 12px; }
.textControls .colorControl {
  position: relative;
  margin: 0 8px;
}
.textControls .actions button.expand-text-options-button .icon { opacity: 1; }
.textControls .actions button.expand-text-options-button .fontOptions {
  -webkit-mask-image: url('../icons/editor/font_settings.svg');
  mask-image: url('../icons/editor/font_settings.svg');
}
.textControls .actions button.expand-text-options-button .icon.arrow {
  position: absolute;
  right: -4px;
  top: 0;
  -webkit-mask-image: url('../icons/arrow.svg');
  mask-image: url('../icons/arrow.svg');
  background: #7E7E7E;
  transform: rotate(90deg);
  transition: transform 200ms linear;
}
.textControls .actions button.expand-text-options-button.selected .icon.arrow { transform: rotate(270deg); }
.textControls .actions button.expand-text-options-button {
  position: relative;
  padding-right: 40px;
  margin-right: 4px;
}
.textControls .row {
  padding: 0 10px;
  height: 40px;
  display: flex;
  flex-flow: row;
  align-items: center;
  box-sizing: border-box;
}
.textControls .main { margin: 10px 10px 0 10px; }
.textControls .row { border-top: 1px solid rgb(54, 54, 54); }
.textControls .actions button {
  background: transparent;
  height: 22px;
  width: 22px;
  padding: 1px 0;
  cursor: pointer;
}
.textControls .actions > button:hover,
.textControls .actions > button:focus { opacity: 0.5; }
.textControls .actions > button.ql-link.ql-active {
  -webkit-mask-image: url('../icons/editor/remove_hyperlink.svg');
  mask-image: url('../icons/editor/remove_hyperlink.svg');
  background: #9974ba;
}
.textControls .actions > button.ql-link {
  -webkit-mask-image: url('../icons/editor/link.svg');
  mask-image: url('../icons/editor/link.svg');
  background: #fff;
}
.textControls .actions > button {
  margin: 0 8px;
  transition: opacity 0.1s ease;
}
.textControls .actions .icon.active { opacity: 1; }
.textControls .actions .icon {
  width: 22px;
  height: 22px;
  background: #fff;
  opacity: 0.5;
}
.textControls .actions {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 10px;
}
.textControls .split .control { flex: 1; }
.textControls .split { display: flex; }
.textControls .control .icon { padding: 5px; }
.textControls .control.fontSizeControl .icon {
  width: 16px;
  height: 16px;
}
.textControls .control {
  display: flex;
  flex-flow: row;
  align-items: center;
  height: 40px;
}
.textControls .textOptions .icon {
  width: 15px;
  height: 15px;
}
.fontPicker { position: relative; }
.fontPicker:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(0deg, #252628 0%, rgba(37, 38, 40, 0) 100%);
  pointer-events: none;
}
.fontPicker .scrollbar { z-index: 20; }
.fontPicker { font-size: 10px; }
.fontPicker .search input {
  display: block;
  padding: 0 13px;
  height: 40px;
  background: transparent;
  font: 16px / 40px "Avenir Next", "Avenir Next Pro", "Avenir";
  color: #fff;
}
.fontPicker .search input::placeholder { color: rgba(255, 255, 255, 0.169); }
.fontPicker .search {
  background-color: rgba(0, 0, 0, 0.5);
  background-image: linear-gradient(126deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  height: 40px;
}
.fontPicker ul li.selected { color: #9974ba; }
.fontPicker ul li {
  font-size: 18px !important;
  cursor: pointer;
  font-weight: 600;
}
.fontPicker ul li:not(.selected):hover { opacity: 1; }
.fontPicker ul li:not(.selected) { opacity: 0.8; }
.fontPicker ul {
  text-align: left;
  padding: 10px 15px;
  padding-bottom: 0;
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 1.5;
  -webkit-user-select: none;
  user-select: none;
}
.slider .handle { cursor: pointer; }
.textControls .slider {
  display: flex;
  align-items: center;
  flex: 1;
  height: 20px;
  padding: 0 10px;
}
.no-global-styles .global-style-control { display: none; }
.no-global-styles .fontPicker { margin-bottom: 5px; }
.global-style-control {
  display: flex;
  flex-flow: row;
  margin: 10px 15px 0 15px;
  align-items: center;
  border-top: 1px solid #363636;
}
.global-style-control label {
  line-height: 20px;
  font-size: 11px;
  line-height: 13px;
}
.global-style-control .rhs { flex-grow: 1; }

/* styles/components/sliderControl.scss */
.sliderControl.inline label { flex: 1; }
.sliderControl.inline .guts { flex: 2; }
.sliderControl.inline { display: flex; }
.sliderControl .slider .track {
  display: block;
  position: relative;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.129);
  height: 3px;
}
.sliderControl .slider .handle:hover,
.sliderControl .slider .handle:active { transform: scale(1.2) translate(-40%, 0); }
.sliderControl .slider .handle {
  position: absolute;
  top: -5px;
  left: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform-origin: 50% 50%;
  transform: scale(1) translate(-50%, 0);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.63);
  transition: transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.sliderControl .slider.valueHandle .handle {
  background: #9974BA;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -9px;
  width: 20px;
  height: 20px;
  font-size: 11px;
  line-height: 13px;
  border-radius: 100%;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.63), -1px -1px 2px rgba(0, 0, 0, 0.25), inset 0.3px 0.3px 0px #CA99F5;
  transition: left 0.15s cubic-bezier(0.02, 0.01, 0.47, 1), transform 0.15s cubic-bezier(0.02, 0.01, 0.47, 1);
}
.sliderControl .slider.valueHandle .value {
  display: block;
  width: 100%;
  text-align: center;
  height: 20px;
  line-height: 22px;
}
.sliderControl .slider {
  position: relative;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  box-sizing: border-box;
}
.sliderControl.iconified .slider:before,
.sliderControl.iconified .slider:after {
  position: absolute;
  content: '';
  width: 15px;
  height: 20px;
  background: no-repeat;
  background-size: contain;
}
.sliderControl.iconified .slider:before {
  left: 0;
  background-position: left center;
}
.sliderControl.iconified .slider:after {
  right: 0;
  background-position: right center;
}
.sliderControl.iconified .slider { padding: 0 25px; }
.sliderControl.iconified.scale .slider:before { background-image: url('../icons/editor/font_size_min.svg'); }
.sliderControl.iconified.scale .slider:after { background-image: url('../icons/editor/font_size_max.svg'); }
.sliderControl.iconified.lineHeight .slider:before { background-image: url('../icons/editor/line_height_min.svg'); }
.sliderControl.iconified.lineHeight .slider:after { background-image: url('../icons/editor/line_height_max.svg'); }
.sliderControl.iconified.letterSpacing .slider:before { background-image: url('../icons/editor/letter_spacing_min.svg'); }
.sliderControl.iconified.letterSpacing .slider:after { background-image: url('../icons/editor/letter_spacing_max.svg'); }

/* styles/components/boxAlignmentControl.scss */
.boxAlignmentControl { width: 100px; }
.boxAlignmentControl .options { margin-left: -5px; }
.boxAlignmentControl .circle.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.boxAlignmentControl .circle .dot {
  width: 10px;
  height: 10px;
  border: 1px solid #343638;
  border-radius: 50%;
  margin-top: 0;
  display: inline-block;
}
.boxAlignmentControl .circle:hover .dot { border-color: rgba(255, 255, 255, 0.3); }
.boxAlignmentControl .circle {
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
  cursor: pointer;
}
.boxAlignmentControl .circle.selected .dot { background: #9976bb; }

/* styles/components/navPresetControl.scss */
.navPreset {
  line-height: 2em;
  text-align: center;
  margin-bottom: 10px;
}
.navPreset .name {
  display: block;
  margin-top: 5px;
  font-size: 14px;
}
.navPreset > .inner {
  position: relative;
  cursor: pointer;
  box-shadow: 4px 4px 11px rgba(0, 0, 0, 0.95);
  transition: opacity 0.25s ease;
  opacity: 0.5;
}
.navPreset .actions .action {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
}
.navPreset .actions .cancel {
  letter-spacing: 20%;
  font-size: 10px;
  color: #fff;
}
.navPreset .actions .apply {
  margin-top: 33px;
  font-weight: 500;
  font-size: 12px;
  line-height: 33px;
  text-align: center;
  letter-spacing: 0.2em;
  height: 33px;
  width: 114px;
  color: #000;
  background-color: #fff;
  margin-bottom: 0;
  border-radius: 20px;
}
.navPreset .actions {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: rgba(153, 116, 186, 0.6);
}
.navPreset .button.preview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  height: 31px;
  line-height: 33px;
  color: #fff;
  text-align: center;
  width: 170px;
  font-size: 12px;
  border-radius: 60px;
  text-transform: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  opacity: 0;
  visibility: hidden;
}
.navPreset:hover .inner { opacity: 1; }
.navPreset:hover .button.preview {
  opacity: 1;
  visibility: visible;
}
.navPreset.selected .inner { opacity: 1; }
.navPreset.selected .actions { visibility: visible; }
.navPreset.selected:hover .button.preview {
  opacity: 0;
  visibility: hidden;
}

/* styles/components/lightbox.scss */
carbon-lightbox {
  z-index: 1000 !important;
  --background-color: rgba(0, 0, 0, 0);
}
carbon-lightbox .background {
  opacity: 0;
  background-color: var(--background-color, #fff);
  transition: opacity 200ms ease, background-color 200ms linear;
}
carbon-lightbox.closing, carbon-lightbox.closed { pointer-events: none; }
carbon-lightbox.closing .background { opacity: 0 !important; }
carbon-lightbox.opening .background { opacity: 1; }
carbon-lightbox.open .background {
  background: var(--background-color, #fff);
  opacity: var(--background-opacity, 1);
}
carbon-lightbox carbon-slide .caption-wrapper {
  margin-top: 10px;
  margin-bottom: 25px;
  box-sizing: border-box;
  font-size: 16px;
  color: var(--color);
  opacity: 0;
  transition: opacity 300ms ease-in;
  transition-delay: 50ms;
}
carbon-lightbox.open carbon-slide .caption-wrapper { opacity: 1; }
carbon-lightbox carbon-slide .caption-wrapper .caption { display: none; }
carbon-lightbox carbon-slide .caption-wrapper .caption p {
  max-width: 540px;
  text-align: center;
  margin: auto;
}
carbon-lightbox carbon-slide.captioning .caption-wrapper .add-caption-button,
carbon-lightbox carbon-slide.captioned .caption-wrapper .add-caption-button { display: none; }
carbon-lightbox carbon-slide.captioned .caption-wrapper .caption,
carbon-lightbox carbon-slide.captioning .caption-wrapper .caption { display: block; }
.zoomable { cursor: zoom-in; }
carbon-lightbox.open .viewport { cursor: zoom-out !important; }

/* styles/components/checkout.scss */
.paymentOptions {
  padding: 0 34px;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  text-transform: uppercase;
  color: #989BA0;
  text-align: left;
}
.paymentOptions label {
  color: #ddd;
  cursor: auto;
}
.paymentOptions span i {
  font-style: normal;
  color: #3FA9F3;
  box-shadow: 0 1px 0 0 #3FA9F3;
}
.paymentOptions span {
  float: right;
  color: #bbb;
  cursor: pointer;
}
.checkout h1 {
  text-align: center;
  color: rgba(0, 0, 0, 0.6);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}
.checkout h2 {
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 400;
  margin: 0;
}
.checkout aside h2 sub {
  position: absolute;
  font-size: 21px;
  line-height: 21px;
  top: 14px;
  margin-left: -16px;
  color: rgba(0, 0, 0, 0.9);
}
.checkout aside h2 {
  position: relative;
  font-size: 42px;
  line-height: 60px;
  color: #000;
  font-weight: 400;
  margin: 0 10px 0 16px;
}
.checkout aside > span i { font-style: normal; }
.checkout aside > span {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  height: 60px;
  font-size: 14px;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.9);
}
.checkout aside {
  display: table;
  float: left;
  padding: 0;
  width: 280px;
}
.checkout .actions .button { float: right; }
.checkout .actions {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 10px;
  margin-top: 10px;
}
.checkout .payPal .actionBar {
  margin-top: -120px;
  opacity: 0;
  visibility: hidden;
}
.checkout .payPalAuthorized .actionBar {
  margin-top: 0;
  opacity: 1;
  visibility: visible;
}
.checkout #paymentDetails .field.invalid .cardType { opacity: 0; }
.checkout span.cvv {
  opacity: 0;
  position: absolute;
  right: 48px;
  top: 10px;
  width: 50px;
  height: 50px;
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03);
  z-index: 10;
}
.checkout #paymentDetails .field.invalid span.cvv { right: 93px; }
.checkout .focused span.cvv { box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); }
.checkout #paymentDetails p a,
.checkout #paymentDetails p a:visited,
.checkout #paymentDetails p a:link {
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: none;
}
.checkout #paymentDetails p a:hover { border-bottom: 1px solid rgba(255, 255, 255, 0.8); }
.checkout div.paymentOptions input { cursor: pointer; }
.checkout label span {
  width: 24px;
  float: left;
  height: 25px;
  margin-right: 10px;
  position: relative;
  top: -3px;
}
.checkout .payPalNote .account {
  display: block;
  font-size: 16px;
  margin-top: 10px;
}
.checkout .payPalNote #paypalButton {
  width: 70%;
  margin: 0 auto;
}
.checkout .payPalNote {
  line-height: 32px;
  font-size: 32px;
  text-align: center;
  color: #15477a;
  background: #f5f5f5;
  padding: 60px 0 63px;
  margin: 0 30px 10px;
}
.checkout fieldset.creditCard {
  transition: visibility 0.3s ease, opacity 0.3s ease, height 0.3s ease;
  visibility: visible;
  opacity: 1;
  height: auto;
}
.checkout fieldset.creditCard .field input { padding-left: 20px; }
.checkout fieldset.creditCard .field { margin-bottom: 10px; }
.checkout fieldset.creditCard .split .field.expiration {
  margin-right: 20px;
  box-sizing: border-box;
}
.checkout fieldset.creditCard .split > .field { width: 50%; }
.checkout fieldset.creditCard .split { display: flex; }
.checkout #paymentDetails input { width: 100%; }
.checkout #paymentDetails.creditCard .payPalNote {
  transition: none;
  visibility: hidden;
  opacity: 0;
  height: 0;
  padding: 0;
  margin: 0;
}
.checkout #paymentDetails.creditCard .paymentMethodType.paypal { display: block; }
.checkout #paymentDetails.creditCard .paymentMethodType.cc { display: none; }
.checkout #paymentDetails.creditCard .paymentOptions #forPP { display: none; }
.checkout #paymentDetails.payPal .paymentMethodType.paypal { display: none; }
.checkout #paymentDetails.payPal .paymentMethodType.cc { display: block; }
.checkout #paymentDetails.payPal fieldset.creditCard {
  transition: visibility 0.3s ease, opacity 0.3s ease;
  visibility: hidden;
  opacity: 0;
  height: 0;
}
.checkout #paymentDetails.payPal .payPalNote {
  transition: visibility 0.3s ease, opacity 0.3s ease;
  visibility: visible;
  opacity: 1;
}
.checkout #paymentDetails.payPal .paymentOptions #forCC { display: none; }

/* styles/components/socialLinkManager.scss */
.socialLinkManager { flex: 1; }
.socialLinkManager.hidden { display: none; }
.socialLinkManager .selector {
  border-radius: 4px;
  background: #000;
}
.socialLinkManager .search-row .icon {
  right: 10px;
  position: absolute;
}
.socialLinkManager .search-row input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.25s ease;
}
.socialLinkManager .search-row input:hover::placeholder { color: rgba(255, 255, 255, 0.8); }
.socialLinkManager .search-row input:focus::placeholder { color: rgba(255, 255, 255, 0.3); }
.socialLinkManager .search-row input {
  width: 100%;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 0;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}
.socialLinkManager .search-row .icon { padding-left: 20px; }
.socialLinkManager .search-row {
  display: flex;
  flex-flow: row;
  height: 40px;
  align-items: center;
  margin-top: 10px;
}
.socialLinkManager .options {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  padding: 8px 8px 20px 8px;
  box-sizing: border-box;
}
.socialLinkManager .circle:hover { background-color: var(--accent-color); }
.socialLinkManager .circle.populated { display: none; }
.socialLinkManager .circle.selected { background-color: var(--accent-color); }
.socialLinkManager .circle .icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #fff;
  transition: transform 0.5s ease;
}
.socialLinkManager .circle {
  margin: 5px;
  width: 27px;
  height: 27px;
  background: #363636;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.25s ease;
  will-change: background-color;
  cursor: pointer;
}
.socialLinkManager ul .icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: #fff;
}
.socialLinkManager ul { margin: 20px 0; }
.socialLinkManager li .circle {
  -webkit-user-select: none;
  user-select: none;
  margin-right: 10px !important;
  cursor: auto;
}
.socialLinkManager li .name {
  color: rgba(255, 255, 255, 0.5);
  font-size: 17px;
  line-height: 24px;
  max-width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.socialLinkManager li:last-child { margin-bottom: 20px; }
.socialLinkManager li .delete-box {
  opacity: 0;
  width: 40px;
  height: 20px;
  transition: opacity 0.25s ease;
  position: absolute;
  right: 5px;
  top: 8px;
  background: #252628;
  box-shadow: -10px 0px 20px 14px #252628;
}
.socialLinkManager li .delete:hover {
  transform: scale(1.2);
  opacity: 0.8;
  background-color: red !important;
}
.socialLinkManager li .delete {
  display: block;
  opacity: 0.6;
  transform: scale(1);
  height: 18px;
  width: 18px;
  -webkit-mask: url('../icons/delete.svg') center / contain no-repeat;
  mask: url('../icons/delete.svg') center / contain no-repeat;
  background: #fff;
  transition: background-color 50ms ease-out, transform 50ms ease-out;
}
.socialLinkManager li:hover .delete-box { opacity: 1; }
.socialLinkManager li {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 5px;
  padding: 5px 0px;
  font-family: "Helvetica Neue", Helvetica, Arial;
  height: 24px;
  display: flex;
  flex-flow: row;
  align-content: center;
}
.socialLinkManager [tooltip]::before {
  top: -7px;
  transform: translate(-50%, 0);
  transition: opacity 0.15s ease will-change: opacity;
}
.socialLinkManager [tooltip]::after {
  top: -6px;
  transform: translate(-50%, -70%);
  transition: opacity 0.15s ease, transform 0.25s ease;
  will-change: opacity, transform;
}
.socialLinkManager [tooltip]:hover::after { transform: translate(-50%, -100%); }
.socialLinkManager .form-wrap form .field input {
  color: #fff;
  width: 100%;
  background: transparent;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
}
.socialLinkManager .form-wrap form .field .message {
  top: 40%;
  background: #2D2D2D;
  padding: 5px;
  border-radius: 9px;
}
.socialLinkManager .form-wrap form .field::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  background: rgba(255, 255, 255, 0.3);
}
.socialLinkManager .form-wrap form .field:hover::after { transform: scaleX(1); }
.socialLinkManager .form-wrap form .field {
  border-bottom: 1px solid #363636;
  opacity: 0;
  transform: translateY(30%);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}
.socialLinkManager .form-wrap form .actions .save:hover { color: #fff; }
.socialLinkManager .form-wrap form .actions .cancel:hover { opacity: 1; }
.socialLinkManager .form-wrap form .actions .cancel {
  padding-left: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}
.socialLinkManager .form-wrap form .actions {
  display: flex;
  flex-flow: row;
  height: auto;
  align-items: center;
  margin-top: 15px;
  opacity: 0;
  transform: translateY(30%);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}
.socialLinkManager .form-wrap form {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  background: #2D2D2D;
  box-shadow: 11px 11px 22px rgba(0, 0, 0, 0.25), 1px 1px 1px rgba(0, 0, 0, 0.33), inset 0px 1px 0px rgba(95, 95, 95, 0.25);
  border-radius: 0px 0px 4px 4px;
  margin: 0;
}
.socialLinkManager .form-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
  will-change: max-height;
}
.socialLinkManager.adding .form-wrap {
  max-height: 200px;
  transition: max-height 0.5s ease;
}
.socialLinkManager.adding .selector { border-radius: 4px 4px 0 0; }
.socialLinkManager.adding form .field {
  opacity: 1;
  transform: translateY(0);
}
.socialLinkManager.adding form .actions {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.sidebar .socialLinkManager .options { padding: 8px 15px 20px 15px !important; }
.sidebar .socialLinkManager .circle { margin: 3px; }
.pane .socialLinkManager .selector {
  margin-left: 10px;
  margin-right: 10px;
}
.pane .socialLinkManager li {
  margin-left: 10px;
  margin-right: 10px;
}

/* styles/components/quickNav.scss */
.quickNaving .b { display: none; }
.b {
  position: absolute;
  top: 65px;
  width: 230px;
  height: calc(100vh - 80px);
}
.pageBlocks, .pageSettings {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 230px;
}
.pageBlocks.active,
.pageSettings.active { visibility: visible; }
.quickNav {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.quickNav .draft { opacity: 0.5; }
.quickNav .top:hover { box-shadow: 0px 0px 0px 1px #9974BA inset; }
.quickNav .top .divider {
  margin-top: 10px;
  background: none;
  border-bottom: 1px solid #313131;
  transition: opacity 0.2s linear;
  opacity: 0;
}
.quickNav .top {
  margin-top: 15px;
  border-radius: 4px;
  padding: 10px 20px;
  margin-bottom: 20px;
  position: relative;
  height: 50px;
  box-sizing: border-box;
  background-color: #000;
  transition: background-color 0.2s linear;
}
.quickNav label {
  font: 9px / 10px "Helvetica Neue", Helvetica, Arial;
  letter-spacing: 0.1em;
  margin-top: 2px;
  margin-bottom: 4px;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
}
.quickNav .title:after {
  content: '';
  position: absolute;
  right: -15px;
  top: -10px;
  display: block;
  height: 30px;
  width: 50px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 50%, #000 100%);
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.quickNav .title {
  position: relative;
  font: 17px / 18px "Avenir Next", "Avenir Next Pro", "Avenir";
  margin-top: -3px;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #9974BA;
  overflow: hidden;
  margin-right: 15px;
  white-space: nowrap;
}
.quickNav .arrow {
  transition: transform 0.2s ease-out;
  position: absolute;
  right: 10px;
  top: 15px;
  opacity: 0.5;
}
.quickNav .guts {
  padding: 0 20px;
  display: none;
}
.quickNav ul.projects {
  font-size: 17px;
  color: #9DA4AD;
}
.quickNav ul {
  font: 20px / 1.8em "Avenir Next", "Avenir Next Pro", "Avenir";
  color: #9DA4AD;
  margin-bottom: 20px;
}
.quickNav li:before {
  position: absolute;
  right: -7px;
  top: 50%;
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  -webkit-mask: url('../icons/arrow.svg');
  mask: url('../icons/arrow.svg');
  background: #9974ba;
  opacity: 0;
  transform: translate(-5px, -11px);
  z-index: 2;
}
.quickNav li:after {
  position: absolute;
  content: '';
  display: block;
  right: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, #252628 100%);
  z-index: 1;
}
.quickNav li a {
  display: block;
  white-space: nowrap;
  overflow: hidden;
}
.quickNav li:hover:before {
  transform: translate(0px, -11px);
  opacity: 1;
  transition: transform 0.2s ease-out;
}
.quickNav li:hover { color: #9974ba; }
.quickNav li.active { color: #9974ba; }
.quickNav li { position: relative; }
.quickNav.open .top {
  box-shadow: none;
  background: linear-gradient(180deg, #101010 0%, rgba(0, 0, 0, 0) 100%);
}
.quickNav.open .divider { opacity: 1; }
.quickNav.open .arrow { transform: rotate(90deg) !important; }
.quickNav.open .title:after { opacity: 0; }
.quickNav .scrollable > .content { height: calc(100vh - 295px); }

/* styles/components/fontControl.scss */
.fontControl {
  display: flex;
  flex-flow: row wrap;
}
.fontControl select {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  font-size: 14px;
  color: #fff;
  margin: 0 0 5px;
  cursor: pointer;
}

/* styles/components/galleryManager.scss */
.galleryManager .imageControl {
  box-sizing: border-box;
  padding: 15px;
}
.galleryManager .scrollable .content { max-height: 370px; }
.galleryItemList {
  width: 100%;
  padding: 0 5px 20px 15px;
  box-sizing: border-box;
  font-size: 0;
  -webkit-user-select: none;
  user-select: none;
}
.galleryItemList li.deleted .undoGuts { display: flex; }
.galleryItemList li.deleted .delete { display: none; }
.galleryItemList li.deleted img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.galleryItemList li .undoGuts .action {
  font-size: 10px;
  font-weight: 500px;
  text-transform: uppercase;
  background: #fff;
  color: #000;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
}
.galleryItemList li .undoGuts {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
  display: none;
}
.galleryItemList li:before {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 0 2px #00CBE3;
  opacity: 0;
  z-index: 3;
}
.galleryItemList li img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.galleryItemList li .delete:hover {
  opacity: 1;
  transform: scale(1.1);
}
.galleryItemList li .delete {
  visibility: hidden;
  position: absolute;
  bottom: 7px;
  right: 7px;
  z-index: 4;
  padding: 3px;
  cursor: pointer !important;
  opacity: 0.5;
}
.galleryItemList li.ghost { opacity: 0.4; }
.galleryItemList li:hover:before { opacity: 1; }
.galleryItemList li:hover .delete { visibility: visible; }
.galleryItemList li {
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  padding: 0;
  margin: 0 10px 10px 0;
  z-index: 1;
  cursor: grab;
}
.gallery-item.dragging .delete,
.gallery-item.dragging .undoGuts { display: none; }
.gallery-item.dragging img {
  width: 60px;
  height: 60px;
}

/* styles/components/player.scss */
@font-face {
  font-family: 'player';
  src: url('https://static.cmcdn.net/kits/106/fonts/player/player.woff');
  font-weight: normal;
  font-style: normal;
}
carbon-player {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
  font-family: 'player';
}
carbon-player.fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
carbon-player > video,
carbon-player > audio {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  top: 0;
  left: 0;
  visibility: hidden;
}
carbon-player.played > video { visibility: visible; }
video::-webkit-media-controls-panel { display: none; }
carbon-player > .posterPlay {
  position: absolute;
  width: 136px;
  height: 136px;
  top: 50%;
  left: 50%;
  margin: -68px 0 0 -68px;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  opacity: 1;
  border-radius: 50%;
  z-index: 5;
  text-align: center;
  font-size: 136px;
  line-height: 136px;
  text-indent: 2px;
  color: #fff;
  transition: background-color 0.2s, opacity 0.2s;
}
carbon-player > .posterPlay:before { content: '\e600'; }
carbon-player > .posterPlay:hover { background: rgba(0, 0, 0, 0.15); }
carbon-player:hover > .posterPlay { background: rgba(0, 0, 0, 0.15); }
carbon-player.played > .posterPlay { display: none; }
carbon-player > .poster,
carbon-player > .artwork,
carbon-player > .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
carbon-player > .poster,
carbon-player > .artwork {
  background-position: center;
  background-repeat: no-repeat;
}
carbon-player > .poster { background-size: contain; }
carbon-player > .poster {
  z-index: 1;
  cursor: pointer;
}
carbon-player.played > .poster { display: none; }
carbon-player > .overlay { background: linear-gradient(to bottom, rgba(10, 10, 10, 0.05) 40%, rgba(10, 10, 10, 0.5) 100%); }
carbon-player .control {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 50px;
  color: #fff;
  line-height: 50px;
  cursor: pointer;
  background: rgba(26, 26, 26, 0.2);
  transition: background-color 0.2s;
}
carbon-player .control:hover {
  background: var(--accent-color);
  opacity: 0.8;
}
carbon-player > carbon-controls {
  display: block;
  position: relative;
  opacity: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: opacity 0.3s;
}
carbon-player.played.hovering > carbon-controls,
carbon-player.played.scrubbing > carbon-controls { opacity: 1; }
carbon-player.played.hoverIdle > carbon-controls { opacity: 0; }
carbon-player.audio > carbon-controls,
carbon-player.audio.played.hoverIdle > carbon-controls { opacity: 1; }
carbon-player > carbon-controls .box {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  transition: opacity 0.2s;
}
carbon-player.scrubbing > carbon-controls > .box,
carbon-player.scrubbing > carbon-controls > .playToggle { opacity: 0; }
carbon-player.fullscreen > carbon-controls > .box { bottom: 9%; }
carbon-player.hoveringTrack > carbon-controls > .box,
carbon-player.hoveringTrack > carbon-controls > .playToggle { opacity: 0; }
carbon-player .playToggle {
  position: absolute;
  left: 20px;
  bottom: 20px;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
carbon-player .playToggle:before { content: '\e600'; }
carbon-player.hovering .playToggle { opacity: 1; }
carbon-player.playing .playToggle:before { content: '\e601'; }
carbon-player.audio .playToggle { opacity: 1 !important; }
carbon-player carbon-scrubber {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 12px;
  z-index: 5;
}
carbon-player carbon-scrubber > .track {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  left: 0;
  cursor: pointer;
  transition: height 0.2s;
}
carbon-player carbon-scrubber:hover > .track { height: 12px; }
carbon-player.waiting.scrubbing carbon-scrubber > .track { background: none; }
@keyframes bufferAnimation {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}
carbon-player.audio.loading .playToggle {
  animation: bufferAnimation 2s infinite;
  animation-timing-function: ease-in-out;
}
carbon-player carbon-scrubber > .track > .bufferedBar,
carbon-player carbon-scrubber > .track > .playedBar {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  height: 100%;
  bottom: 0;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  transition: border-radius 0.1s;
}
carbon-player carbon-scrubber > .track > .playedBar { background: var(--accent-color); }
carbon-player carbon-scrubber > .track > .playedBar.end,
carbon-player carbon-scrubber > .track > .bufferedBar.end {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
carbon-player time {
  position: absolute;
  color: var(--color);
  text-rendering: optimizeLegibility;
  font-size: 12px;
  cursor: default;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
  bottom: 14px;
  opacity: 0;
}
carbon-player time.total {
  right: 0;
  transition: color 0.2s;
}
carbon-player time.current {
  left: 0;
  transition: opacity 0.2s, color 10s;
}
carbon-player carbon-scrubber:hover > time.current,
carbon-player.scrubbing carbon-scrubber > time.total { opacity: 1; }
carbon-player.video time.total { display: none; }
carbon-player.audio time.current,
carbon-player.audio time.total {
  bottom: 0px;
  opacity: 1 !important;
}
carbon-player.audio time.current { left: 0 !important; }
carbon-player .muteToggle {
  display: inline-block;
  background: rgba(26, 26, 26, 0.2);
}
carbon-player .muteToggle:before { content: '\e604'; }
carbon-player.muted .muteToggle:before { content: '\e605'; }
carbon-player .fullscreenToggle {
  display: inline-block;
  display: none;
  margin-bottom: 10px;
}
carbon-player .fullscreenToggle:before { content: '\e602'; }
carbon-player.fullscreen .fullscreenToggle:before { content: '\e603'; }
carbon-player.supportsFullscreen .fullscreenToggle { display: block; }
carbon-player.hoverIdle * { cursor: none; }
carbon-waveform {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
carbon-waveform > .bar {
  position: absolute;
  bottom: 0;
  background-color: var(--color);
  transition: opacity 2s linear;
  opacity: 0.6;
}
carbon-waveform > .bar.fill { opacity: 1; }
carbon-player.hoveringTrack carbon-waveform > .bar { transition: none !important; }
carbon-player.playing carbon-waveform,
carbon-player.hoveringTrack carbon-waveform { opacity: 1; }
carbon-controls, carbon-waveform { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
carbon-player.audio .playToggle {
  background: rgba(51, 51, 51, 0.2);
  left: 3.125%;
  bottom: 30px;
  transition: background-color 0.2s;
}
carbon-player.audio carbon-scrubber {
  position: absolute;
  width: calc(93.75% - 65px);
  height: 50px;
  left: calc(3.125% + 65px);
  bottom: 25px;
  transition: opacity 0.2s;
}
carbon-waveform { bottom: 20px; }
.collapsed {
  max-height: 90px;
  height: 90px;
  width: 100%;
}
.collapsed carbon-player {
  position: relative;
  height: 90px;
}
.collapsed carbon-player.audio .playToggle { bottom: 5px; }
.collapsed carbon-player.audio carbon-scrubber { bottom: 0px; }
carbon-player.autoplay .poster { display: none; }
carbon-player.autoplay .posterPlay { display: none; }
carbon-player.autoplay carbon-controls { display: none; }

/* styles/components/thumb.scss */
.block:not(.active) .thumb .content { pointer-events: none; }
.thumb.placeholder .cloud .outline { display: block; }
.thumb.placeholder .cloud {
  visibility: visible;
  background-color: unset !important;
}
.project.placeholder .cloud .outline { display: block; }
.project.placeholder .cloud {
  visibility: visible;
  background-color: unset !important;
}

/* styles/components/videoLightbox.scss */
.video-wrap { display: none; }
.video-lightbox {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  transition: opacity 0.25s ease;
  transition-delay: 0.25s;
  will-change: opacity;
}
.video-lightbox .video-content {
  background: #fff;
  width: 70%;
  max-width: 1200px;
  will-change: opacity, transform;
  opacity: 0;
  transform: translateY(70px) scale(0.95);
  transition: transform 0.5s ease, opacity 0.25s ease;
}
.video-lightbox .video-responsive .video-embed iframe {
  width: 100%;
  height: 100%;
}
.video-lightbox .video-responsive .video-embed {
  position: absolute;
  width: 100%;
  height: 100%;
}
.video-lightbox .video-responsive {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}
.video-lightbox .video-preview.hidden {
  opacity: 0;
  pointer-events: none;
}
.video-lightbox .video-preview img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.video-lightbox .video-preview {
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  padding: 0;
  background: transparent;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.video-lightbox .video-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  cursor: zoom-out;
}
.video-lightbox .video-close:hover .video-close-icon { transform: rotate(0.375turn); }
.video-lightbox .video-close {
  display: flex;
  align-items: center;
  position: fixed;
  top: 30px;
  right: 30px;
  background: #fff;
  height: 40px;
  padding: 0 15px;
  border-radius: 20px;
  cursor: pointer;
  will-change: opacity, transform;
  opacity: 0;
  transform: translateX(20px);
  transition: transform 0.5s ease, opacity 0.25s ease;
}
.video-lightbox .video-close-title {
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #000;
  margin-left: 8px;
}
.video-lightbox .video-close-icon::before,
.video-lightbox .video-close-icon::after {
  content: '';
  display: block;
  position: absolute;
  background: #000;
  border-radius: 1px;
}
.video-lightbox .video-close-icon::before {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.video-lightbox .video-close-icon::after {
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.video-lightbox .video-close-icon {
  height: 16px;
  width: 16px;
  position: relative;
  will-change: transform;
  transform: rotate(0.125turn);
  transform-origin: center;
  transition: transform 0.25s ease;
}
.video-lightbox.open .video-close {
  opacity: 1;
  transform: translateX(0);
}
.video-lightbox.open .video-content {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.25s;
}
.video-lightbox.open {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease;
  transition-delay: 0s;
}

/* styles/components/zoe.scss */
.zoe {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 250px;
  background: #fff;
  position: fixed;
  right: 30px;
  bottom: 50px;
  border-radius: 5px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25);
  z-index: 10;
}
.zoe img,
.zoe video {
  max-width: 100%;
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
}
.zoe .tooth {
  -webkit-mask-image: url('../images/onboard/tooth.svg');
  mask-image: url('../images/onboard/tooth.svg');
  background-color: #9974BA;
  width: 22px;
  height: 15px;
  bottom: -14px;
  position: absolute;
  left: 100px;
  transition: background-color 100ms ease-out;
}
.zoe .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  background-image: url('https://carbon-media.accelerator.net/00000000001/jTaWQj3aCtFcF3qy2vyVvu;60x60/2x.png?auto=webp');
  background-size: cover;
  position: absolute;
  top: -30px;
  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.16);
}
.zoe h3 {
  font: 20px / 24px "Helvetica Neue", Helvetica, Arial;
  text-align: center;
  margin: 50px auto 10px auto;
  padding: 0 20px;
  color: #9974BA;
  max-width: 200px;
  font-weight: 400;
}
.zoe p {
  font: 16px / 22px "Helvetica Neue", Helvetica, Arial;
  text-align: center;
  padding: 0 20px;
  margin-bottom: 20px;
}
.zoe .actions {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  background: #9974BA;
  border-radius: 0px 0px 5px 5px;
  transition: background-color 100ms ease-out;
  cursor: pointer;
}
.zoe .actions:hover .tooth { background: #B893D9; }
.zoe .actions:hover { background: #B893D9; }
.zoe .actions button {
  font: 12px "Helvetica Neue", Helvetica, Arial;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  letter-spacing: 0.2em;
  color: #fff;
  text-transform: uppercase;
}
.asideMask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(21, 22, 23, 0.8);
  height: 100%;
  width: 100%;
}
.blocks-introduction { display: none; }
.introducing-blocks .blocks-introduction { display: flex; }
.introducing-blocks .asideMask { display: block; }

/* styles/components/tip.scss */
.tip { position: relative; }
.tip:hover .tip-bubble {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -100%);
}
.question-mark {
  border-radius: 50%;
  height: 16px;
  width: 16px;
  background: #373839;
  color: #fff;
  display: inline-block;
  margin-left: 6px;
  text-align: center;
  font-size: 8px;
  line-height: 16px;
  cursor: pointer;
}
.tip-bubble {
  padding: 10px;
  visibility: hidden;
  position: absolute;
  top: -3px;
  left: 14px;
  background: #9974BA;
  color: #fff;
  border: 0.443675px solid #000000;
  box-sizing: border-box;
  box-shadow: inset 0.443675px 0px 0px rgba(255, 255, 255, 0.25);
  border-radius: 2.7px;
  width: 150px;
  opacity: 0;
  transform: translate(-50%, -95%);
  transition: transform 100ms linear, opacity 100ms linear;
  z-index: 100;
}
.tip-bubble::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 5px;
  background: #9974BA;
  position: absolute;
  bottom: -4px;
  left: calc(50% - 0.5rem);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* styles/components/invoices.scss */
.invoices {
  position: relative;
  font-size: 15px;
}
.invoices:before {
  width: 100%;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.invoices__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 313px;
  height: 52px;
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 30px;
  background-color: #fff;
  box-shadow: 8px 8px 33px rgba(116, 130, 151, 0.22);
  transition: opacity 0.4s ease;
}
.invoices .invoices__button {
  color: #748297;
  font-weight: normal;
}
.invoices__button:hover { opacity: 0.7; }
.invoices__button.invoices__button--print .icon:before {
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '';
  background-color: #748297;
  -webkit-mask-image: url('./../icons/arrow-down.svg');
  mask-image: url('./../icons/arrow-down.svg');
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.invoices__button.invoices__button--print .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #f0f2f5;
}
.invoices__button.invoices__button--print {
  width: 200px;
  padding-right: 8px;
  letter-spacing: 0.05em;
}
.invoices__table {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.invoices__table tbody tr.due { background: rgba(255, 0, 0, 0.1); }
.invoices__table tbody tr td:not(:last-of-type) { width: 28%; }
.invoices__table tbody tr td:last-of-type {
  width: 15%;
  text-align: right;
}
.invoices__table tbody tr td a:hover { opacity: 0.7; }
.invoices__table tbody tr td a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0 auto;
  width: 40px;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  text-decoration: none;
  color: #748297;
  border-radius: 30px;
  background-color: #f0f2f5;
  transition: opacity 0.4s ease;
}
.invoices__table tbody tr td i {
  display: inline-block;
  width: 21px;
  height: 15px;
  position: relative;
  left: -1px;
  background-color: #0d1e38;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url('./../icons/eye.svg');
  mask-image: url('./../icons/eye.svg');
}
.invoices__table tbody tr td {
  font-size: 18px;
  color: #748297;
}
.invoices__table tbody tr {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #fff;
}
.invoices__table tbody {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
}
.invoices__card {
  box-sizing: border-box;
  width: 789px;
  margin: 0 auto;
  padding: 70px 80px 50px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 11px 11px 66px rgba(116, 130, 151, 0.38);
}
.invoices__card-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
.invoices__card-top .lhs h1 span {
  display: block;
  font-family: "Avenir Next", "Avenir Next Pro", "Avenir";
  font-size: 24px;
  letter-spacing: 0;
}
.invoices__card-top .lhs h1 {
  margin: 0 0 40px;
  font: 57px / 45px "Helvetica Neue", Helvetica, Arial;
  font-weight: 400;
  letter-spacing: -.05em;
}
.invoices__card-top .lhs address { font-style: normal; }
.invoices__card-top .lhs { width: 50%; }
.invoices__card-top .rhs img {
  width: 40px;
  margin: 0 0 45px;
}
.invoices__card-top .rhs address { font-style: normal; }
.invoices__card-top .rhs {
  width: 50%;
  text-align: right;
}
.invoices__card-body { margin-top: 80px; }
.invoices__card-subscription { margin-top: 75px; }
.invoices__card-subscription-heading {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #748297;
}
.invoices__card-subscription-heading p:last-of-type { text-align: right; }
.invoices__card-subscription-heading p {
  width: 50%;
  margin-bottom: 5px;
  font-size: 13px;
  letter-spacing: 0.225em;
}
.invoices__card-subscription-content {
  display: flex;
  flex-wrap: wrap;
  padding: 25px 0;
  border-bottom: 1px solid #748297;
}
.invoices__card-subscription-content strong:last-of-type {
  width: 20%;
  text-align: right;
  color: #9974ba;
}
.invoices__card-subscription-content strong {
  width: 80%;
  font-size: 19px;
}
.invoices__card-total {
  margin-top: 15px;
  text-align: right;
}
.invoices__card-total p {
  width: max-content;
  margin-bottom: 5px;
  margin-left: auto;
  font-size: 13px;
  letter-spacing: 0.225em;
  border-bottom: 3px double #748297;
}
.invoices__card-total strong {
  display: block;
  font-size: 27px;
  color: #9974ba;
}
.invoices__extra {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  width: 789px;
  margin: 50px auto 0;
  padding: 0 80px;
}
.invoices__extra .lhs p {
  margin: 0;
  line-height: 30px;
}
.invoices__extra .lhs {
  width: 50%;
  font-size: 26px;
  color: #748297;
}
.invoices__extra .rhs a:hover { color: #9974ba; }
.invoices__extra .rhs a:first-of-type { margin-right: 15px; }
.invoices__extra .rhs a:last-of-type { margin-left: 15px; }
.invoices__extra .rhs a {
  text-decoration: none;
  color: #748297;
  transition: color 0.4s ease;
}
.invoices__extra .rhs {
  width: 50%;
  margin-top: 5px;
  text-align: right;
  color: #748297;
}
.back {
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 20px;
  line-height: 24px;
  padding-right: 20px;
  border-radius: 100px;
  z-index: 100;
  color: #748297;
  position: fixed;
  top: 30px;
  left: 30px;
  transition: color 0.4s ease;
}
.back:hover .icon { opacity: 0.7; }
.back:hover { color: #9974ba; }
.back .icon i {
  display: inline-block;
  width: 32px;
  height: 32px;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-image: url('./../icons/back.svg');
  mask-image: url('./../icons/back.svg');
  background-color: #748297;
}
.back .icon {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  transition: opacity 0.4s ease;
}

/* styles/components/exportModal.scss */
.export-modal {
  box-sizing: border-box;
  display: flex;
  visibility: hidden;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, 0.85);
  transition: visibility 0s linear, opacity 0.2s ease, background-color 0.2s ease;
  --progress: 0%;
}
.export-modal.open .box {
  opacity: 1;
  transform: translateY(0);
}
.export-modal.open {
  display: flex;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}
.export-modal .box .step { transition: opacity 0.6s ease 0.4s; }
.export-modal .box h2 {
  margin: 0 0 15px;
  font: 400 60px / 73px Avenir;
  letter-spacing: -.03em;
}
.export-modal .box p.orange {
  padding-top: 10px;
  color: #ff5924;
}
.export-modal .box p {
  margin: 0 0 30px;
  font: 20px / 28px Avenir;
  text-align: center;
  color: #748297;
}
.export-modal .box .button {
  width: 295px;
  margin-top: 30px;
  padding: 12px 0;
  font: 15px / 18px Avenir;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 95px;
  background: #748297;
}
.export-modal .box small a { color: #748297; }
.export-modal .box small {
  display: block;
  width: 356px;
  margin: 20px auto 0;
  font: 16px / 20px Avenir;
  color: #748297;
}
.export-modal .box .actions { margin-top: 20px; }
.export-modal .box .hide {
  visibility: hidden;
  height: 0;
  opacity: 0;
}
.export-modal .box .step-1 .nevermind {
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
}
.export-modal .box .step-2 h2 { line-height: 54px; }
.export-modal .box .step-2 .progress-bar span {
  display: block;
  width: var(--progress);
  height: 5px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 33px;
  background-color: #ff5924;
}
.export-modal .box .step-2 .progress-bar {
  width: 100%;
  height: 5px;
  position: relative;
  margin-top: 80px;
  border-radius: 33px;
  background-color: #e7ecf2;
}
.export-modal .box {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 698px;
  min-height: 540px;
  margin: 50px;
  padding: 75px 112px 50px;
  text-align: center;
  opacity: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 22px 22px 44px rgba(0, 0, 0, 0.55);
  transition: transform 0.6s ease 0.4s, opacity 0.6s ease 0.4s;
  transform: translateY(50px);
  flex-flow: column;
}

/* styles/interstitials/pro.scss */
.interstitial {
  visibility: hidden;
  position: fixed;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.checkout-interstitial iframe {
  width: 100%;
  height: 100%;
  background-color: #78c896;
}
.upgrade-interstitial { background: rgba(250, 250, 250, 0.95); }
.upgrade-interstitial .back {
  position: fixed;
  top: 30px;
  left: 30px;
}
.interstitial.open {
  visibility: visible;
  opacity: 1;
  z-index: 15;
}
.pro-interstitial {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.9);
}
.pro-interstitial .inner .logo {
  -webkit-mask-image: url('../../images/onboard/logo.svg');
  mask-image: url('../../images/onboard/logo.svg');
  width: 177px;
  height: 36px;
  background: #fff;
  -webkit-mask-size: cover;
  mask-size: cover;
  margin: auto;
  margin-bottom: 20px;
}
.pro-interstitial .inner h1 {
  font: 60px / 66px "Avenir Next", "Avenir Next Pro", "Avenir";
  text-align: center;
  letter-spacing: -0.02em;
  font-weight: 500;
  max-width: 480px;
  margin: 0 auto;
}
.pro-interstitial .inner ul li:before {
  position: absolute;
  left: 0;
  top: -17px;
  display: block;
  content: '';
  width: 55px;
  height: 55px;
  -webkit-mask-image: url('../icons/checkmark.svg');
  mask-image: url('../icons/checkmark.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  background: #fff;
}
.pro-interstitial .inner ul li {
  position: relative;
  display: flex;
  flex-flow: row;
  align-items: center;
  padding: 0 0 0 50px;
  margin-bottom: 14px;
}
.pro-interstitial .inner ul {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  margin: 30px 0;
}
.pro-interstitial .inner strong {
  color: #9974ba;
  font-weight: 500;
}
.pro-interstitial .inner button {
  color: #fff;
  min-width: 230px;
}
.pro-interstitial .inner .actions .cancel { margin-top: 10px; }
.pro-interstitial .inner .actions {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.pro-interstitial .inner {
  width: 600px;
  height: 500px;
  text-align: center;
}
.migrate-subscription-interstitial {
  color: #000;
  background-color: #eff0f5;
}
.migrate-subscription-interstitial .back {
  position: fixed;
  top: 30px;
  left: 30px;
  border-radius: 20px;
}
.migrate-subscription-interstitial .computer {
  width: 520px;
  max-width: 100%;
}
.migrate-subscription-interstitial .inner .rhs { width: 50%; }
.migrate-subscription-interstitial .inner .lhs { width: 50%; }
.migrate-subscription-interstitial .inner h1 {
  font: 3.2vw / 1.1 "Avenir Next", "Avenir Next Pro", "Avenir";
  margin: 0 auto;
  margin-bottom: 20px;
}
.migrate-subscription-interstitial .inner h2 {
  font-size: 25px;
  line-height: 31px;
  letter-spacing: -0.02em;
}
.migrate-subscription-interstitial .inner ul li:before {
  position: absolute;
  left: 0;
  top: -17px;
  display: block;
  content: '';
  width: 55px;
  height: 55px;
  -webkit-mask-image: url('../icons/checkmark.svg');
  mask-image: url('../icons/checkmark.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  background: #000;
}
.migrate-subscription-interstitial .inner ul li {
  position: relative;
  align-items: center;
  padding: 0 0 0 50px;
  margin-bottom: 14px;
}
.migrate-subscription-interstitial .inner ul {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  margin: 30px 0;
}
.migrate-subscription-interstitial .inner .note {
  margin-top: 50px;
  font-size: 15px;
  line-height: 20px;
  opacity: 0.5;
}
.migrate-subscription-interstitial .inner .new-portfolio {
  margin-top: 20px;
  font-size: 15px;
  line-height: 20px;
  margin-left: 60px;
  opacity: 0.5;
}
.migrate-subscription-interstitial .inner strong {
  color: #9974ba;
  font-weight: 500;
}
.migrate-subscription-interstitial .inner button { max-width: 330px; }
.migrate-subscription-interstitial .inner .actions {
  display: flex;
  flex-flow: column;
}
.migrate-subscription-interstitial .inner {
  width: 80%;
  padding: 100px;
  text-align: center;
  display: flex;
  flex-flow: row;
  text-align: left;
  align-items: center;
}

/* styles/interstitials/introduction.scss */
.introduction-interstitial { background: rgba(0, 0, 0, 0.5); }
.introduction-interstitial .inner {
  position: relative;
  z-index: 2;
}
.introduction-interstitial .spotlight {
  position: absolute;
  pointer-events: none;
  height: 100%;
  width: 100%;
  z-index: 1;
  background-image: radial-gradient(circle, transparent 0px, rgba(0, 0, 0, 0.85) 0px);
}
.introduction-interstitial .inner h1 {
  font: 15px / 18px "Avenir Next", "Avenir Next Pro", "Avenir";
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
  letter-spacing: 0.15em;
}
.introduction-interstitial .inner p {
  font: 40px / 49px "Avenir Next", "Avenir Next Pro", "Avenir";
  margin-bottom: 20px;
}
.introduction-interstitial .inner video {
  max-width: 100%;
  margin-top: -18px;
}
.introduction-interstitial .inner .first .actions { margin-bottom: 40px; }
.introduction-interstitial .inner .slide.show { display: flex; }
.introduction-interstitial .inner .slide {
  display: none;
  align-items: center;
  justify-content: space-evenly;
  height: 640px;
  flex-flow: column;
}
.introduction-interstitial .inner .actions .cancel { margin-top: 10px; }
.introduction-interstitial .inner .actions {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.introduction-interstitial .inner {
  padding: 20px 30px;
  width: 620px;
  min-height: 680px;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 22px 22px 44px rgba(0, 0, 0, 0.66);
  border-radius: 5px;
}

/* styles/interstitials/closeAccount.scss */
.close-account {
  color: #000;
  background-color: #eff0f5;
}
.close-account-confirmation::before {
  content: '';
  position: fixed;
  z-index: 1;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border-radius: 10px;
  background-color: #eff0f5;
}
.close-account-confirmation {
  box-sizing: border-box;
  padding: 10px;
  background: repeating-linear-gradient(45deg, #fff, #fff 10px, #EF6487 10px, #EF6487 20px);
}
.close-account .back {
  position: fixed;
  top: 30px;
  left: 30px;
  border-radius: 20px;
  z-index: 3;
}
.close-account .guts {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: 100%;
  padding: 50px 0;
  overflow-y: auto;
}
.close-account .inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.close-account h1 {
  font-size: 50px;
  line-height: 55px;
  text-align: center;
  margin-bottom: 40px;
}
.close-account .options .plan-option h5 {
  font-weight: 500;
  font-size: 40px;
  line-height: 55px;
}
.close-account .options .plan-option p {
  font-size: 15px;
  line-height: 18px;
}
.close-account .options .plan-option li > .check { left: -10px !important; }
.close-account .options .plan-option li {
  font-size: 18px;
  line-height: 27px;
  padding-left: 25px !important;
}
.close-account .options .plan-option ul {
  margin: 30px 10px !important;
  max-width: none !important;
}
.close-account .options .plan-option .inner { padding: 22px 32px 28px; }
.close-account .options .plan-option { overflow: hidden; }
.close-account .options .sleep-option .header {
  background: #fff;
  text-align: center;
  color: #000;
  padding: 10px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.2em;
}
.close-account .options .sleep-option .price .pref {
  vertical-align: top;
  line-height: 1;
  font-size: 0.7em;
}
.close-account .options .sleep-option .price .suff {
  vertical-align: bottom;
  line-height: 1;
  font-size: 0.5em;
}
.close-account .options .sleep-option .price {
  margin-top: 20px;
  font-size: 40px;
  line-height: 1;
}
.close-account .options .sleep-option ul li .check { background: #fff !important; }
.close-account .options .sleep-option ul li { color: #fff; }
.close-account .options .sleep-option {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);
  box-sizing: border-box;
  background: #29CC88;
  border-radius: 7px;
  color: #fff;
}
.close-account .options .destroy-option .inner {
  background: #fff;
  border-radius: 5px;
}
.close-account .options .destroy-option {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(50% - 10px);
  box-sizing: border-box;
  padding: 10px;
  border-radius: 7px;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, #EF6487 10px, #EF6487 20px);
}
.close-account .options .separator {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 20px;
}
.close-account .options {
  display: flex;
  flex-flow: row;
  align-items: flex-end;
}
.close-account-form.invalid .invalid-message { max-height: 50px; }
.close-account-form .field.invalid .message { max-height: 50px; }
.close-account-form .field { margin-bottom: 20px; }
.close-account-form .message {
  display: block !important;
  font-size: 12px;
  line-height: 20px;
  position: static;
  display: block;
  margin: 0 auto;
  transform: none;
  max-height: 0;
  transition: max-height 0.3s ease;
  will-change: max-height;
}
.close-account-form .invalid-message {
  overflow: hidden;
  color: #FF0040;
  font-size: 15px;
  line-height: 23px;
  max-height: 0;
  transition: max-height 0.3s ease;
  will-change: max-height;
}
.close-account-form .delete-confirm-input:hover::placeholder { opacity: 0; }
.close-account-form .delete-confirm-input:focus::placeholder { opacity: 0; }
.close-account-form .delete-confirm-input::placeholder {
  text-align: center;
  color: #6F6F6F !important;
  opacity: 1;
  transition: 0.3s ease opacity;
}
.close-account-form .delete-confirm-input {
  width: 380px;
  text-align: center;
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 5px;
}
.close-account-form textarea:hover::placeholder { opacity: 0; }
.close-account-form textarea:focus::placeholder { opacity: 0; }
.close-account-form textarea::placeholder {
  color: #6F6F6F !important;
  opacity: 1;
  transition: 0.3s ease opacity;
}
.close-account-form textarea {
  padding: 20px;
  width: 440px;
  border-radius: 5px;
  background: #fff;
  font-size: 20px;
  line-height: 30px;
}
.close-account-form .actions { margin-top: 15px; }
.sleep-upsell {
  width: 680px;
  height: 102px;
  left: 460px;
  top: 727px;
  background: #29CC87;
  border-radius: 7px;
  display: flex;
  flex-flow: row;
  align-items: center;
  padding: 20px;
  margin: 50px;
}
.sleep-upsell .lhs {
  padding: 0 20px;
  text-align: left;
  width: calc(100% - 200px);
}
.sleep-upsell .rhs { width: 200px; }
.sleep-upsell p {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #fff;
}
.close-account-note {
  font-size: 20px;
  line-height: 30px;
  max-width: 580px;
  margin: auto;
  margin-bottom: 20px;
}
.close-account-note .red { color: #FF0040; }
.sleep-plan-checkout {
  box-sizing: border-box;
  color: #000;
  background-color: #29CC87;
  padding: 10px;
}
.sleep-plan-checkout::before {
  content: '';
  position: fixed;
  z-index: 1;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border-radius: 10px;
  background-color: #eff0f5;
}
.sleep-plan-checkout .back {
  position: fixed;
  z-index: 3;
  top: 30px;
  left: 30px;
  border-radius: 20px;
}
.sleep-plan-checkout .guts {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: 100%;
  padding: 50px 0;
  overflow-y: auto;
}
.sleep-plan-checkout .inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.sleep-plan-checkout header { margin-bottom: 40px; }
.sleep-plan-checkout h1 {
  font-size: 50px;
  line-height: 55px;
  margin: 0 auto 20px;
  text-align: center;
  max-width: 800px;
}
.sleep-plan-checkout h2 {
  font-size: 20px;
  line-height: 30px;
  margin: 0 auto;
  text-align: center;
  max-width: 600px;
}
.sleep-plan-checkout .actions p {
  font-size: 15px;
  line-height: 23px;
  color: #929292;
  margin-top: 10px;
}
.sleep-plan-checkout .actions {
  text-align: center;
  margin-bottom: 40px;
}
.sleep-plan-checkout .grid > div p {
  padding: 20px;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  letter-spacing: -0.02em;
}
.sleep-plan-checkout .grid > div { width: calc(100% / 3); }
.sleep-plan-checkout .grid .graphic {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sleep-plan-checkout .grid {
  display: flex;
  flex-flow: row;
  margin: auto;
  max-width: 960px;
}
.closed-account {
  color: #000;
  background-color: #eff0f5;
}
.closed-account .guts {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 50px 0;
  overflow-y: auto;
}
.closed-account .inner {
  min-height: 100%;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.closed-account h1 {
  font-size: 50px;
  line-height: 55px;
  text-align: center;
  margin: 40px 0;
}
.closed-account p {
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}
.closed-account .content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.closed-account .postscript {
  margin-top: 20px;
  text-align: center;
  color: #989898;
}
.danger-banner {
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 0.6em;
  color: #FF0040;
  margin-bottom: 20px;
}

/* styles/modes/sorting.scss */
.phone .itemBubble,
.sorting .itemBubble { display: none !important; }
.phone .editBubble,
.sorting .editBubble { display: none !important; }
.phone .block.cover .background,
.sorting .block.cover .background { transform: unset !important; }
.blockTemplate {
  border-radius: 3px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.blockTemplates .blockTemplate { box-shadow: none; }
.blockTemplate .block .shield {
  display: block;
  cursor: grab;
}
.blockTemplate .viewport { border-radius: 3px; }
.sorting .sortingHint { visibility: visible; }
.sorting .navigation { display: none !important; }
.sorting .project-nav { display: none !important; }
.sorting .sidenaved > .guts { flex-basis: 100%; }
.sorting .site .block .shield { display: block; }
.sorting .site .block {
  overflow: hidden;
  border-bottom: 20px solid #eef0f4;
}
.sorting .page.overlap header.standard { height: unset; }
.sorting .page.overlap > .blocks { margin-top: unset; }
.sorting .device { box-shadow: none; }
.sorting .site,
.sorting .site > .page { background: transparent; }
.sorting footer { display: none; }
.sorting .navigation { display: none; }
.sorting .site {
  -webkit-user-select: none;
  user-select: none;
}
.sorting .browser > .bar { visibility: hidden; }
.sorting .browser > .scrollable > .viewport { background: rgba(255, 255, 255, 0); }
.sorting .browser {
  box-shadow: none;
  transform: translateY(-20px);
}
.sorting .dragging .innerBorder {
  z-index: 100;
  box-shadow: inset 0px 0px 0px 25px #00cee3;
}
.sorting:not(.draggingBlock) .block:hover .innerBorder {
  z-index: 100;
  box-shadow: inset 0px 0px 0px 25px #00cee3;
}
.sortingHint {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 25%;
  z-index: 1000;
  display: flex;
  visibility: hidden;
  align-items: center;
  pointer-events: none;
}
.sortingHint p {
  font-size: 29px;
  line-height: 31px;
  text-align: center;
  max-width: 290px;
  letter-spacing: -0.05em;
  padding: 100px 20px 20px;
  background: 30px top no-repeat url('../icons/sorting_hint.svg');
}

/* styles/modes/dragging.scss */
.draggingBlock {
  -webkit-user-select: none;
  user-select: none;
}
.dragging-something {
  -webkit-user-select: none;
  user-select: none;
}
.dragging-something .text.editable,
.dragging-something img { pointer-events: none; }
.dragging-something .text.editable * { pointer-events: none; }
.dragging-something .block.header > .content,
.dragging-something .block.social > .content,
.dragging-something .block.cover > .content { pointer-events: none; }
.dragging-something .block:not(.cover) > .content {
  position: relative;
  z-index: 2;
}
.dragging-something .empty-state { z-index: 3; }
.dragging-something .site .droppable { pointer-events: auto; }
.bubble,
.browser .bar, .blockTemplates { -webkit-user-drag: none; }
.site header > a,
.site nav > a,
.site carbon-grid,
.site carbon-item,
.site .thumb { -webkit-user-drag: none; }

/* styles/modes/editing.scss */
.block.editing { z-index: 3 !important; }
.block.editing .container { z-index: 4; }
.editing-text .navigation a { pointer-events: none; }

/* styles/modes/scrolling.scss */
.scrolling .editBubble { display: none !important; }

/* styles/components/planMatrix.scss */
#upgradeModal {
  opacity: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
#upgradeModal.open .matrix {
  width: 910px;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.47, -0.2, 0.3, 1.8) 0s;
  transform: translate(0, 0);
}
#upgradeModal.open .cycleOption {
  opacity: 1;
  transition: opacity 0.2s ease 0.3s, transform 0.6s cubic-bezier(0.47, -0.2, 0.3, 1.8) 0.1s;
  transform: translate(0, 0);
}
#upgradeModal.open {
  z-index: 3002;
  margin: auto;
  opacity: 1;
}
#upgradeModal .back .icon {
  top: 5px;
  left: 10px;
}
#upgradeModal .back {
  --height: 40px;
  position: absolute;
  top: 40px;
  left: 40px;
  padding-left: 40px;
  background-color: #fff;
  color: #000;
}
#upgradeModal .matrix {
  transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.47, -0.2, 0.3, 1.8) 0s;
  transform: translate(0, 90px);
  opacity: 0;
}
#upgradeModal .plans {
  display: flex;
  justify-content: center;
}
#upgradeModal .note p {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}
#upgradeModal .note {
  position: absolute;
  bottom: -90px;
  padding-bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
}
#upgradeModal { padding-top: 5vh; }
#upgradeModal .celebrateGuts {
  padding: 0;
  visibility: hidden;
  opacity: 0;
  background: transparent;
}
#upgradeModal .guts {
  width: 910px;
  height: 615px;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  margin-top: -295px;
  margin-left: -455px;
  position: absolute;
  transition: visibility 0.4s ease, opacity 0.4s ease, transform 0.4s ease-out;
}
#upgradeModal .cycleOption .option.annualCycle { padding: 0 30px 0 0; }
#upgradeModal .cycleOption .option i {
  display: block;
  width: 40px;
  position: absolute;
  font-size: 11px;
  line-height: 12px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  top: 10px;
  right: 10px;
  font-style: normal;
}
#upgradeModal .cycleOption .option.current {
  color: rgba(0, 0, 0, 1);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 1);
}
#upgradeModal .cycleOption .option {
  position: relative;
  width: 140px;
  height: 42px;
  line-height: 42px;
  font-size: 18px;
  display: inline-block;
  color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
  box-sizing: border-box;
}
#upgradeModal .cycleOption {
  margin-bottom: 36px;
  width: 100%;
  text-align: center;
  opacity: 0;
  transform: translate(0, 60px);
}
#upgradeModal .button.big.solid {
  height: 40px;
  line-height: 40px;
  min-width: 140px;
}
#upgradeModal .row .head { margin: 0 0 5px; }
#upgradeModal .row .shield {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
#upgradeModal .row.current .shield {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  box-shadow: inset -5px 0px 11px rgba(0, 0, 0, 0.17);
  backdrop-filter: blur(200px);
  color: #fff;
  font-size: 24px;
  background: #9974BA;
}
#upgradeModal .row h1 {
  font-weight: 500;
  font-size: 39px;
  line-height: 1.1;
  text-align: center;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
#upgradeModal .row h2 small {
  position: absolute;
  font-size: 26px;
  line-height: 33px;
  top: 1px;
  left: auto;
  margin-left: -15px;
  font-weight: 400;
}
#upgradeModal .row h2 span {
  margin-left: 4px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: normal;
}
#upgradeModal .row h2 {
  position: relative;
  font-size: 40px;
  line-height: 40px;
  height: 40px;
  margin: 0;
  color: #9B51E0;
  font-weight: 400;
  letter-spacing: -0.04em;
}
#upgradeModal .row h3 {
  font-size: 13px;
  line-height: 18px;
  color: #828282;
  font-weight: 400;
  margin: 5px auto 10px;
  max-width: 260px;
  font-weight: 500;
}
#upgradeModal .row h4.year strong { font-weight: 500; }
#upgradeModal .row h4.year {
  color: #9B51E0;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 5px;
  height: 21px;
  line-height: 24px;
  height: 24px;
}
#upgradeModal .row h5 {
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 0.2em;
  color: #9B51E0;
}
#upgradeModal .row .originalPrice {
  display: block;
  color: #828282;
  font-size: 20px;
  line-height: 24px;
  font-weight: 300;
  margin-bottom: 5px;
}
#upgradeModal .row .hint .holder:after {
  visibility: visible;
  opacity: 1;
  position: absolute;
  bottom: 8px;
  content: ' ';
  right: -2px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 9px 10px 0 10px;
  border-color: #444367 transparent transparent transparent;
}
#upgradeModal .row .hint .holder {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  visibility: hidden;
  opacity: 0;
}
#upgradeModal .row .hint .description {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  display: block;
  bottom: 25px;
  left: 50%;
  width: 240px;
  min-height: 75px;
  margin-left: -120px;
  padding: 10px 10px 10px 75px;
  background: #444367;
  font-size: 13px;
  line-height: 16px;
  color: #fff;
  text-align: left;
  box-sizing: border-box;
}
#upgradeModal .row .hint:hover .holder,
#upgradeModal .row .hint:hover .description {
  visibility: visible;
  opacity: 1;
}
#upgradeModal .row .hint {
  display: none;
  width: 16px;
  height: 16px;
  background: #3fa9f5;
  border-radius: 50px;
  cursor: pointer;
}
#upgradeModal .row.pro:before {
  content: 'MOST POPULAR';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 30px;
  background: #9974ba;
  color: #fff;
  font: 10px / 30px "Avenir Next", "Avenir Next Pro", "Avenir";
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.2em;
  border-radius: 3px 3px 0px 0px;
}
#upgradeModal .row.pro {
  background: #fff;
  box-shadow: 0px 22px 44px rgba(0, 0, 0, 0.1);
  z-index: 1;
  margin-top: 0px;
  margin-bottom: 0;
  padding-top: 50px;
  padding-bottom: 40px;
}
#upgradeModal .row {
  position: relative;
  padding: 20px 0 40px;
  margin-top: 30px;
  margin-bottom: 80px;
  width: 360px;
  text-align: center;
  background: #fff;
  box-sizing: border-box;
  border-radius: 7px;
}
#upgradeModal .showTwo .basic { display: none; }
#upgradeModal .showTwo .row.pro .pointer { display: none; }
#upgradeModal .showTwo .row.pro { margin-top: 0px; }
#upgradeModal .showOne .basic,
#upgradeModal .showOne .pro { display: none; }
.plan-option ul li > .check {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  left: 0px;
  top: -7px;
  -webkit-mask-image: url('../icons/checkmark.svg');
  mask-image: url('../icons/checkmark.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  background: #c4c4c4;
}
.plan-option ul li > .x {
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  left: 0px;
  top: 3px;
  -webkit-mask-image: url('../icons/x.svg');
  mask-image: url('../icons/x.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  background: #E32253;
}
.plan-option ul li > .star:before { content: '⭐️'; }
.plan-option ul li > .star {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  left: 0px;
  top: -5px;
}
.plan-option ul li b { font-weight: 500; }
.plan-option ul li {
  position: relative;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0;
  padding-left: 44px;
  color: #000;
}
.plan-option ul {
  margin-bottom: 27px;
  text-align: left;
  max-width: 250px;
  margin: 20px auto 0;
}

/* styles/_upsells.scss */
.upsell {
  padding: 30px;
  background-color: #9974BA;
  border-radius: 6px;
  font: 15px / 21px "Avenir Next", "Avenir Next Pro", "Avenir";
  text-align: center;
  color: #F2F2F2;
  margin-top: 40px;
}
.upsell p { margin-bottom: 10px; }
.blockTemplate.locked { cursor: default; }
.blockTemplate.locked > .viewport { pointer-events: none; }
.blockTemplate.locked:hover .description { display: none; }
.locked .upsell {
  margin-top: 0;
  border-radius: 0;
  z-index: 10;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  padding: 0;
  left: 0;
  background: none;
}
.locked .upsell .icon:before {
  content: 'pro';
  position: absolute;
  width: 62px;
  left: 0;
  text-transform: uppercase;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  height: 62px;
  line-height: 62px;
  z-index: 13;
}
.locked .upsell .icon:after {
  content: '';
  top: 0;
  position: absolute;
  display: block;
  width: 62px;
  height: 62px;
  background-image: url('../icons/pro.svg');
  z-index: 12;
  transition: transform 0.25s ease;
}
.locked .upsell .icon {
  position: absolute;
  top: -18px;
  right: -6px;
  width: 62px;
  height: 62px;
  z-index: 11;
}
.locked .upsell .inner {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  transition: opacity 0.25s ease;
  opacity: 0;
  z-index: 11;
}
.locked .upsell:hover .inner { opacity: 1; }
.locked .upsell:hover .icon:after { transform: rotate(25deg); }
.inline-celebration {
  display: flex;
  flex-flow: row wrap;
  position: fixed;
  top: 24px;
  left: 440px;
  visibility: hidden;
}
.inline-celebration.open { visibility: visible; }
.inline-celebration .icon {
  width: 50px;
  font-size: 42px;
  margin-right: 10px;
}
.inline-celebration div .title {
  font-size: 23px;
  line-height: 28px;
  letter-spacing: -0.02em;
  color: #9974BA;
  font-weight: 500;
}
.inline-celebration div .description {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: 888888;
}
.navPreset .proBadge .icon,
.blockTemplate .proBadge .icon {
  top: -18px;
  right: -6px;
}
.proBadge .icon:before {
  content: 'pro';
  position: absolute;
  width: 62px;
  left: 0;
  text-transform: uppercase;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  height: 62px;
  line-height: 62px;
  z-index: 13;
}
.proBadge .icon:after {
  content: '';
  top: 0;
  position: absolute;
  display: block;
  width: 62px;
  height: 62px;
  background-image: url('../icons/pro.svg');
  z-index: 12;
  transition: transform 0.25s ease;
}
.proBadge .icon {
  position: absolute;
  width: 62px;
  height: 62px;
  z-index: 11;
  color: #fff;
}
.hd-upsell {
  position: absolute;
  top: 20;
  right: 20px;
  background: #000000;
  font: 15px / 40px "Helvetica Neue", Helvetica, Arial;
  height: 40px;
  border-radius: 20px;
  width: 230px;
  z-index: 2;
  cursor: pointer;
}
.hd-upsell .purple { color: #9974BA; }

/* styles/settings/domainBindingInstructions.scss */
@font-face {
  font-family: 'admin';
  src: url('https://static.cmcdn.net/112/3.9.22/fonts/admin.woff');
  font-weight: normal;
  font-style: normal;
}
.domain-binding-instructions { background: rgba(0, 0, 0, 0.8); }
.domain-binding-instructions a:hover { border-bottom: 1px solid rgba(0, 174, 239, 0.4); }
.domain-binding-instructions a {
  color: #00aeef;
  border-bottom: 1px solid rgba(0, 174, 239, 0);
  transition: border-bottom 0.1s ease-in-out 0s;
}
.domain-binding-instructions b { font-weight: 500; }
.domain-binding-instructions .instructions.notRegistered .bar .button { display: none; }
.domain-binding-instructions .instructions.notRegistered .bar .button.okay,
.domain-binding-instructions .instructions.notRegistered .bar .button.close { display: block; }
.domain-binding-instructions .instructions.notRegistered .bar { border-top: none; }
.domain-binding-instructions .instructions.notRegistered {
  width: 560px;
  height: 510px;
  top: 50%;
  transform: translate(0, -50%);
  margin: 0 auto;
}
.domain-binding-instructions .instructions {
  width: 730px;
  margin: 0 auto;
  padding: 25px 15px 10px;
  position: relative;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 50px 4px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}
.domain-binding-instructions .bar > .button:hover { background: #9871d6; }
.domain-binding-instructions .bar > .button {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin: 0px;
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  font-weight: 500;
  text-align: center;
  border-radius: 25px;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
  background: #aa7ff0;
  text-transform: none;
}
.domain-binding-instructions .bar > .button.okay { display: none; }
.domain-binding-instructions .bar > .button.close:hover { color: #777; }
.domain-binding-instructions .bar > .button.close {
  background: transparent;
  color: #999;
  width: auto;
  margin: 0 auto;
}
.domain-binding-instructions .bar {
  padding: 25px 30px 0;
  height: 110px;
  background: #fff;
  text-align: center;
}
.domain-binding-instructions .content h1 i {
  font-style: normal;
  color: #ef6469;
}
.domain-binding-instructions .content h1 {
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
  color: #4c4c4c;
  text-align: center;
  padding: 15px 0 0;
}
.domain-binding-instructions .content p {
  font-size: 15px;
  line-height: 22px;
  color: #666;
  text-align: center;
  padding: 10px 0 20px;
}
.domain-binding-instructions .content .box:first-child { padding: 150px 0px 0px; }
.domain-binding-instructions .content .box { margin-bottom: 20px; }
.domain-binding-instructions .content ul > li a { color: #00aeef; }
.domain-binding-instructions .content ul > li strong { color: #333; }
.domain-binding-instructions .content ul > li .number {
  display: block;
  position: absolute;
  left: 10px;
  top: 5px;
  color: #fff;
  background: #ccc;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 100%;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
}
.domain-binding-instructions .content ul > li.toDo .number { background: #ef6487; }
.domain-binding-instructions .content ul > li.toDo:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: -50px;
  right: -50px;
  background: #fff5f5;
  height: 40px;
  z-index: -1;
}
.domain-binding-instructions .content ul > li.toDo {
  position: relative;
  z-index: 1;
}
.domain-binding-instructions .content ul > li {
  position: relative;
  font-size: 18px;
  line-height: 42px;
  color: #666;
  margin: 0px;
  padding: 0 0 0 54px;
  letter-spacing: normal;
}
.domain-binding-instructions .content ul {
  border-top: solid 1px #f4f4f4;
  margin: 15px 30px 0;
  padding: 25px 20px 0;
}
.domain-binding-instructions .content ul.help li {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  padding: 0;
}
.domain-binding-instructions .content ul.help {
  border: none;
  position: absolute;
  bottom: -190px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
}
.domain-binding-instructions .content .error {
  color: #fff;
  text-align: left;
  margin-bottom: 30px;
  font-size: 16px;
  background: #ED656C;
  padding: 15px 30px;
  border-radius: 2px;
  font-weight: 500;
  text-align: center;
  position: relative;
  top: 100px;
}
.domain-binding-instructions table.center td { text-align: center; }
.domain-binding-instructions table th,
.domain-binding-instructions table td {
  border: 1px solid #e6e6e6;
  padding: 6px 13px;
}
.domain-binding-instructions table th {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  background: #f8f8f8;
}
.domain-binding-instructions table tr.done td:first-child:before {
  position: absolute;
  font: 24px 'admin';
  content: '\e06a';
  top: 6px;
  left: -30px;
  color: #7ac943;
}
.domain-binding-instructions table tr.done td:first-child { position: relative; }
.domain-binding-instructions table tr.done { color: rgba(102, 102, 102, 0.2); }
.domain-binding-instructions table tr.notDone { color: #ef6469; }
.domain-binding-instructions table tr {
  background: #fff;
  border-top: 1px solid #ececec;
}
.domain-binding-instructions table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0px;
  font-size: 15px;
  line-height: 22px;
  margin: 12px 0 15px;
}
.domain-binding-instructions .servers {
  position: fixed;
  bottom: 50px;
  left: 50px;
  color: #fff;
}
#domainBindingInstructions span.removeText,
#domainBindingInstructions span.addText { font-weight: 500; }
#domainBindingInstructions.validating .bar > .button.activate {
  width: 60px;
  margin: 0px auto 0;
  color: transparent;
  overflow: hidden;
  background: url('../img/formSpinner.gif') no-repeat center center #F6F6F6;
  font-size: 0;
  cursor: default;
  transition: width 0.2s ease-in-out;
}

/* styles/apps/base.scss */
.appContainer {
  position: absolute;
  top: 0;
  left: 60px;
  width: 710px;
  height: 100vh;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
}
.appContainer.analyticsApp .scrollable.main { height: calc(100vh - 130px); }
.appContainer > .content { height: 100vh; }
.appContainer .scrollbar {
  margin-right: -15px;
  z-index: 5;
}
.appContainer .scrollable.main .top { margin-top: 40px; }
.appContainer .scrollable.main { height: calc(100vh - 100px); }
.appContainer.show {
  visibility: visible;
  opacity: 1;
}
.app-header {
  position: relative;
  display: flex;
  flex-flow: row;
  justify-content: center;
  color: #333;
  height: 80px;
  width: 100%;
  align-items: center;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.app-header .back {
  position: absolute;
  left: 0;
}
.app-header h1 {
  font: 20px "Avenir Next", "Avenir Next Pro", "Avenir";
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.darkApp .app-header { border-bottom: 1px solid #363636; }
.darkApp .app-header h1 { color: #fff; }

/* styles/apps/account.scss */
.settings {
  max-width: 720px;
  margin-left: 60px;
}
.settings .tabs ul li.disabled a {
  opacity: 0.1;
  pointer-events: none;
}
.settings .tabs ul li a {
  color: #000;
  padding: 0 8px;
}
.settings .tabs ul li a:hover { opacity: 0.5; }
.settings .tabs ul li.active a { color: #9974BA; }
.settings .tabs ul li.active .line {
  position: absolute;
  bottom: -28px;
  left: 0px;
  height: 3px;
  border-radius: 2px;
  background: #9974BA;
  width: 100%;
  display: inline-block;
}
.settings .tabs ul li {
  margin: 5px 10px;
  position: relative;
}
.settings .tabs ul {
  display: flex;
  align-content: center;
  justify-content: center;
}
.settings .tabs {
  font: 20px / normal "Avenir Next", "Avenir Next Pro", "Avenir";
  width: 100%;
}
.settings section h1 {
  font: 14px / 17px "Avenir Next", "Avenir Next Pro", "Avenir";
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 15px;
  color: #9DA4AD;
}
.settings section { margin-bottom: 25px; }
.settings .signout a:hover { text-decoration: none; }
.settings .signout a { text-decoration: underline; }
.settings .signout { font-size: 18px; }
.close-account-block {
  font-size: 18px;
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding-top: 20px;
}
.close-account-block span {
  opacity: 0.3;
  padding-right: 10px;
}
.close-account-block a:hover { text-decoration: none; }
.close-account-block a {
  text-decoration: underline;
  cursor: pointer;
}
.paymentMethodBlock {
  padding: 30px 32px;
  border-radius: 5px;
  margin-bottom: 14px;
  background: #fff;
  display: flex;
  align-items: center;
}
.paymentMethodBlock p {
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.02em;
}
.paymentMethodBlock .lhs,
.paymentMethodBlock .rhs {
  display: flex;
  width: 50%;
}
.paymentMethodBlock .rhs { justify-content: flex-end; }
.vipBlock img { width: 100%; }
.account .proBadge,
.settings .proBadge {
  width: 100px;
  height: auto;
  margin: -20px;
}
.planBlock {
  background: #fff;
  padding: 30px 32px;
  border-radius: 5px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.planBlock .description {
  font: 16px / 22px "Avenir Next", "Avenir Next Pro", "Avenir";
  margin-top: 5px;
  color: rgba(0, 0, 0, 0.5);
}
.planBlock h3 {
  font: 25px / 35px "Avenir Next", "Avenir Next Pro", "Avenir";
  letter-spacing: -0.02em;
  color: #000;
}
.planBlock .lhs,
.planBlock .rhs { width: 50%; }
.planBlock .rhs { text-align: right; }
.fieldBlock {
  position: relative;
  transition: box-shadow 0.25s ease;
}
.fieldBlock:hover {
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.fieldBlock a { color: #9974ba; }
.fieldBlock a:hover { color: #664286; }
.fieldBlock {
  display: flex;
  background: #fff;
  padding: 30px 32px;
  margin-bottom: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  justify-content: space-between;
}
.fieldBlock form .field:not(.textarea)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  background: rgba(0, 0, 0, 0.5);
}
.fieldBlock form .field:not(.textarea):hover::after { transform: scaleX(1); }
.fieldBlock form .field .prefix {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  line-height: 45px;
  opacity: 0.5;
}
.fieldBlock form .field .postfix {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  line-height: 45px;
  opacity: 0.5;
}
.fieldBlock form .field.prefixed input { padding-left: 64px; }
.fieldBlock form .field input,
.fieldBlock form .field textarea {
  color: #000;
  width: 100%;
  padding: 10px 0;
}
.fieldBlock form .field textarea {
  background: #F6F7FA;
  border: 1px solid #E2E1E4;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 10px 15px;
  resize: none;
}
.fieldBlock form .field {
  width: 100%;
  position: relative;
}
.fieldBlock form .actions {
  position: relative;
  padding-top: 10px;
  text-align: right;
}
.fieldBlock form {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-flow: column;
  margin: 0;
}
.fieldBlock .button {
  visibility: hidden;
  opacity: 0;
  top: 60px;
  right: 0;
  height: 22px;
  background: #9974BA;
  color: #fff;
  padding: 0 10px;
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-weight: 500;
  font-size: 9px;
  line-height: 22px;
  text-align: center;
  letter-spacing: 0.2em;
  z-index: 5;
  transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
}
.fieldBlock .savedText {
  display: none;
  position: absolute;
  top: 14px;
  right: 0;
  color: #9974BA;
}
.fieldBlock form.saved .button { display: hidden; }
.fieldBlock form.saved .savedText { display: block; }
.fieldBlock form.editing .button {
  visibility: visible;
  opacity: 1;
}
.fieldBlock .lhs { flex: 0 1 230px; }
.fieldBlock .rhs {
  display: flex;
  flex: 0 1 270px;
  align-items: center;
  justify-content: flex-end;
  padding: 0 15px;
  margin-left: auto;
}
.fieldBlock input,
.fieldBlock textarea {
  padding-bottom: 10px;
  color: #333;
  font-size: 17px;
  line-height: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.fieldBlock label {
  font-family: "Avenir Next", "Avenir Next Pro", "Avenir";
  font-size: 25px;
  line-height: 35px;
  letter-spacing: -0.02em;
}
.fieldBlock .description {
  font: 16px / 22px "Avenir Next", "Avenir Next Pro", "Avenir";
  margin-top: 5px;
  color: rgba(0, 0, 0, 0.5);
}
.customDomainBlock {
  display: flex;
  align-items: center;
  padding: 30px;
  margin-bottom: 20px;
}
.customDomainBlock.locked .lhs {
  flex-basis: 320px;
  margin-right: auto;
}
.customDomainBlock.locked h3 {
  font-size: 25px;
  line-height: 30px;
}
.customDomainBlock.locked {
  color: #fff;
  background: #9974BA;
  border-radius: 5px;
  padding: 50px;
}
@keyframes domainProcessing {
  0% { box-shadow: inset 0 0 0 3px rgba(248, 202, 92, 1), 0 0 0 3px rgba(248, 202, 92, 0.6); }
  50% { box-shadow: inset 0 0 0 3px rgba(248, 202, 92, 0.4), 0 0 0 3px rgba(248, 202, 92, 0.2); }
  100% { box-shadow: inset 0 0 0 3px rgba(248, 202, 92, 1), 0 0 0 3px rgba(248, 202, 92, 0.2); }
}
@keyframes domainProcessing2 {
  0% { box-shadow: inset 0 0 0 2px rgba(248, 202, 92, 0.4); }
  20% { box-shadow: inset 0 0 0 2px rgba(248, 202, 92, 0.2); }
  100% { box-shadow: inset 0 0 0 2px rgba(248, 202, 92, 0.2); }
}
#customDomainBlock {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 20px;
  padding-bottom: 1px;
}
#customDomainBlock .fieldBlock { margin-bottom: 0; }
#customDomainBlock .editBlock .field i { padding: 0 5px 0 0; }
#customDomainBlock .editBlock .field > .input {
  width: 205px;
  color: #333;
}
#customDomainBlock .editBlock .preview .text { line-height: 24px; }
#customDomainBlock .prefix {
  padding: 0 5px 0 0;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.3);
}
#customDomainBlock .block:hover .text,
#customDomainBlock .block:hover .placeholderText { background: transparent; }
#customDomainBlock .block {
  border: none;
  border-radius: 0 0 5px 5px;
}
#customDomainBlock .block.editing { z-index: 20; }
#customDomainBlock .populatedGuts .iconEdit { display: none; }
#customDomainBlock .populatedGuts { cursor: default; }
#customDomainBlock .description p a {
  font-weight: 500;
  color: #43c1be;
}
#customDomainBlock .description p span {
  font-weight: 500;
  color: #ef6469;
  cursor: pointer;
}
#customDomainBlock .description p {
  display: none;
  font-size: 15px;
  line-height: 20px;
  color: #a3a3a3;
  padding: 5px 250px 20px 225px;
}
#customDomainBlock .description {
  background: #fff;
  border-radius: 0 0 5px 5px;
}
#customDomainBlock .field.prefixed input { padding-left: 54px; }
#customDomainBlock.empty .description .emptyDescription { display: block; }
#customDomainBlock.active .activeGuts { display: block; }
#customDomainBlock.active .description { display: none; }
#customDomainBlock.inactive .inactiveGuts { display: block; }
#customDomainBlock.inactive .description .inactiveDescription { display: block; }
#customDomainBlock.propagating .propagatingGuts { display: block; }
#customDomainBlock.propagating .description .propagatingDescription { display: block; }
#customDomainBlock.unregistered .field.invalid > .message { display: none; }
#customDomainBlock.unregistered .description .inactiveDescription { display: none; }
#customDomainBlock.unregistered .description .unregisteredDescription { display: block; }
#customDomainBlock.unregistered .description .unregisteredDescription strong { color: #ef6469; }
.unregisteredDescription {
  display: none;
  padding: 5px 0 0;
  color: #999;
  margin-left: -58px;
}
.unregisteredDescription strong { color: #ef6469; }
.unregisteredDescription a { color: #b2b2b2; }
#customDomainBlock.unregistered .unregisteredDescription { display: block; }
.editing .domainSetupStates { display: none; }
.domainSetupStates {
  font-size: 15px;
  line-height: 20px;
  color: #b2b2b2;
  margin-top: -20px;
}
.domainSetupStates .activeGuts,
.domainSetupStates .inactiveGuts,
.domainSetupStates .expiredGuts,
.domainSetupStates .propagatingGuts {
  display: none;
  position: relative;
}
.domainSetupStates strong { display: block; }
.domainSetupStates .action {
  color: #43c1be;
  box-shadow: 0 1px 0 0 #43c1be;
  cursor: pointer;
}
.domainSetupStates .action.verifyDomain {
  color: #ef6469;
  box-shadow: 0 1px 0 0 #ef6469;
}
.domainSetupStates .activeGuts strong { color: #7ac943; }
.domainSetupStates .propagatingGuts strong { color: #f8ca5c; }
.domainSetupStates .propagatingGuts .icon span {
  display: block;
  position: absolute;
  top: 7px;
  left: 7px;
  width: 14px;
  height: 14px;
  content: ' ';
  border-radius: 100%;
  box-shadow: inset 0 0 0 3px rgba(248, 202, 92, 0.4), 0 0 0 3px rgba(248, 202, 92, 0.2);
  border: solid 2px #fff;
  animation: domainProcessing 1s infinite 0.3s;
}
.domainSetupStates .propagatingGuts .icon {
  top: 5px;
  width: 32px;
  height: 32px;
  box-shadow: inset 0 0 0 2px rgba(248, 202, 92, å0.6);
  animation: domainProcessing2 1s infinite 0.4s;
}
.cancel-note {
  font-size: 18px;
  line-height: 25px;
  letter-spacing: -0.02em;
  padding: 40px;
  color: #333333;
}
.cancel-note a { text-decoration: underline; }
.photoBlock .previewGuts {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: cover;
}
.photoBlock .filter {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: background-color 200ms ease-out;
  background: rgba(0, 0, 0, 0);
}
.photoBlock .circle {
  position: relative;
  -webkit-clip-path: circle(50% at center);
  clip-path: circle(50% at center);
  width: 80px;
  height: 80px;
  background: #ccc;
}
.photoBlock .circle .cloud .icon { display: none; }
.photoBlock .circle:hover .filter { background: rgba(0, 0, 0, 0.6); }
.photoBlock .circle:hover .cloud .icon { display: unset; }
.account-app-header .tabs li { position: relative; }
.account-app-header .tabs .badge {
  position: absolute;
  right: 0px;
  transform: translateX(100%);
  top: 20px;
  background: #9974BA;
  border-radius: 33px;
  font-size: 9px;
  line-height: 12px;
  color: #fff;
  padding: 3px 6px;
  display: inline-block;
  font-weight: 600px;
  text-align: center;
  margin-top: -20px;
  text-transform: uppercase;
}
.talentpool .fieldBlock::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: white;
  border-radius: 3px;
}
.talentpool .fieldBlock:hover { animation-play-state: running; }
.talentpool .fieldBlock {
  z-index: 1;
  margin-bottom: 0;
  background: linear-gradient(90deg, #00b8ff, #20ff00, #fffe00, #ff7100, #ff00e4, #00b8ff);
  background-size: 200%;
  animation: animatedBackground 1.5s linear infinite;
  animation-play-state: paused;
}
.talentpool .col.image { margin-right: 30px; }
.talentpool .col.content { max-width: 280px; }
.talentpool .col.action {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: 0 15px;
}
@keyframes animatedBackground {
  0% { background-position-x: 0%; }
  100% { background-position-x: 200%; }
}
.seo .fieldBlock { padding: 20px; }
.seo .lhs { padding: 10px 15px; }
.seo .rhs { flex-basis: 345px; }
.seo .fieldTextArea .rhs { padding: 10px; }
.seo .fieldTextArea form {
  height: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.seo .fieldTextArea .textarea textarea { height: 100%; }
.seo .fieldTextArea .textarea { flex-grow: 1; }
.seo .openGraphBlock .rhs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #F6F7FA;
  border-radius: 5px;
  padding: 10px;
  padding-bottom: 20px;
}
.seo .openGraphBlock .line { display: block; }
.seo .openGraphBlock .image input { visibility: hidden; }
.seo .openGraphBlock .image .previewGuts {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.seo .openGraphBlock .image {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  width: 354px;
  height: 240px;
  background-color: #e2e1e4;
  margin-bottom: 15px;
}
.seo .openGraphBlock .input { padding: 0 10px; }
.seo .openGraphBlock .field::after { display: none; }
.og-title-input, .og-title-description {
  border: none !important;
  margin: 0 !important;
  padding: 2px 10px !important;
  border-radius: 5px !important;
  background: transparent !important;
  transition: background 0.25s ease;
}
.og-title-input:focus,
.og-title-description:focus { background: rgba(0, 0, 0, 0.05) !important; }
.og-title-input:hover,
.og-title-description:hover { background: rgba(0, 0, 0, 0.05) !important; }
.og-title-input {
  font-size: 20px !important;
  line-height: 27px !important;
}
.og-title-description {
  font-size: 15px !important;
  color: rgba(0, 0, 0, 0.3) !important;
}

/* styles/apps/analytics.scss */
.analytics-upsell {
  display: block;
  position: absolute;
  top: 80px;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(37, 38, 40, 0.95);
  text-align: center;
  z-index: 10;
}
.analytics-upsell img {
  display: block;
  margin-bottom: 25px;
}
.analytics-upsell h1,
.analytics-upsell h2 {
  max-width: 545px;
  font-family: "Avenir Next", "Avenir Next Pro", "Avenir";
  font-weight: normal;
  text-align: center;
  letter-spacing: -0.02em;
  color: #F2F2F2;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.analytics-upsell h1 i {
  font-style: normal;
  color: #9974ba;
}
.analytics-upsell h1 {
  font-size: 50px;
  line-height: 70px;
  margin-bottom: 17px;
}
.analytics-upsell h2 {
  font-size: 30px;
  line-height: 42px;
  margin-bottom: 20px;
}
.analytics-upsell .wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  box-sizing: border-box;
}
.analyticsApp { width: 790px; }
.analyticsApp > .guts { position: relative; }
.analytics {
  max-width: 740px;
  margin: 0;
  left: 30px;
}
.analytics > header {
  justify-content: flex-start;
  padding-bottom: 0;
  border: none;
}
.analytics .guts { position: relative; }
.analytics .rangeSelector > li.active {
  color: #9974ba;
  box-shadow: 0 1px 0 0 #9974ba;
}
.analytics .rangeSelector > li {
  display: inline-block;
  padding: 0;
  margin: 0 10px;
  cursor: pointer;
  font: 500 12px / 15px "Helvetica Neue", Helvetica, Arial;
  text-align: center;
  letter-spacing: 0.2em;
  color: #9974ba;
  text-transform: uppercase;
  color: #fff;
}
.analytics .rangeSelector {
  position: absolute;
  top: 30px;
  right: 0;
  text-align: right;
  z-index: 1;
}
.analytics .graphWrap > .graph {
  background: #1E1E1E;
  border-bottom: 1px solid #363636;
}
.analytics .graphWrap {
  position: relative;
  padding: 0 0 40px;
  margin: 0px auto 50px;
}
.analytics .tabs > .tab > .count {
  display: block;
  font-weight: 300;
  font-size: 50px;
  line-height: 70px;
  letter-spacing: -0.02em;
  color: #9974ba;
}
.analytics .tabs > .tab > .text {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.25em;
  color: #F2F2F2;
}
.analytics .tabs > .tab.current {
  cursor: default;
  background: #1E1E1E;
  border-radius: 5px 5px 0 0;
}
.analytics .tabs > .tab {
  position: relative;
  padding: 14px 25px;
  min-width: 165px;
  cursor: pointer;
}
.analytics .tabs {
  display: flex;
  flex-flow: row;
  text-align: center;
}
#chart {
  position: relative;
  width: 740px;
  height: 200px;
  margin: 0 auto;
  font-size: 10px;
  cursor: crosshair;
}
#chart .dot { display: none; }
.viewsCount {
  position: absolute;
  top: 10px;
  right: 12px;
  font: 30px 'admin';
  color: #ccc;
}
ul.axis {
  position: absolute;
  bottom: 0px;
  left: 50%;
  height: 40px;
  line-height: 40px;
  display: table;
  margin: auto;
  transform: translate(-50%, 0);
}
ul.axis > li {
  display: table-cell;
  text-align: center;
  font-size: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial;
  font-style: normal;
  font-weight: 500;
  color: #606060;
  white-space: nowrap;
}
#y_axis {
  display: none;
  position: absolute;
  top: 15px;
  left: 50%;
  margin-left: -520px;
  width: 20px;
}
.midAxis {
  position: absolute;
  height: 1px;
  background: #363636;
  width: 740px;
  top: 50%;
  left: 50%;
  margin-top: -21px;
  margin-left: calc(740px / -2);
}
.midAxis .minPoint {
  display: block;
  position: absolute;
  left: -40px;
  margin-top: 102px;
  width: 30px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 12px;
  color: #b3b3b3;
  opacity: 0.9;
}
.midAxis .midPoint {
  display: block;
  position: absolute;
  left: -40px;
  margin-top: -7px;
  width: 30px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 12px;
  color: #b3b3b3;
  opacity: 0.9;
}
.midAxis .maxPoint {
  display: block;
  position: absolute;
  left: -40px;
  margin-top: -96px;
  width: 30px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 12px;
  color: #b3b3b3;
  opacity: 0.9;
}
#chart .y_ticks { display: none; }
#chart .y_grid .tick text { display: none; }
#chart .x_grid_d3 line { display: none; }
#chart .y_axis { display: none; }
#chart .x_ticks_d3 { display: none; }
#chart .x_grid_d3 text { display: none; }
.chart .y_ticks .domain { display: none; }
.chart .x_axis .domain { display: none; }
.chart .detail .x_label { display: none; }
.chart .x_axis_d3 .tick text {
  font: 10px "Avenir Next", "Avenir Next Pro", "Avenir";
  fill: rgb(102, 102, 102);
  stroke: none;
  opacity: 1;
  text-rendering: optimizeLegibility;
  shape-rendering: crisp-edges;
}
.x_ticks_d3 .tick line { display: none; }
.chart .y_ticks line { display: none; }
.analytics .placeholder {
  display: block;
  position: relative;
  height: 254px;
  background: #1E1E1E;
  border-radius: 0 0 5px 5px;
}
.analytics .loader {
  display: none;
  position: absolute;
  top: 0;
  height: 254px;
  right: 0;
  left: 0;
  z-index: 500;
}
.analytics .loaderSpinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -22px 0 0 -22px;
  width: 45px;
  height: 45px;
  background: no-repeat center url('../img/graph/spinner.svg');
  background-size: 45px;
  animation: imageLoaderSpinning 1s linear infinite reverse;
  z-index: 600;
}
.analytics .loading .loader { display: block; }
@keyframes imageLoaderSpinning {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.darkApp {
  display: block;
  background: #252628;
  box-shadow: inset -55px 10px 70px -27px rgba(0, 0, 0, 0.75);
}
.analyticsApp {
  --browser-overlap: 40px;
  padding-left: 30px;
  padding-right: 90px;
}
.analyticsApp .guts > header h1 { color: #fff; }
.analyticsApp .guts > header::after { background: none; }
.analyticsApp .guts > header {
  margin-bottom: 40px;
  border-bottom: 1px solid #363636;
}
.analytics .item span { display: block; }
.analytics .item .date {
  font: 10px / 12px "Helvetica Neue", Helvetica, Arial;
  font-style: normal;
  font-weight: 500;
  color: #606060;
}
.analytics .item .weekday { display: none; }
.analytics .item .value {
  font: 30px / 37px "Helvetica Neue", Helvetica, Arial;
  font-style: normal;
  font-weight: 200;
  text-align: center;
  letter-spacing: -0.02em;
  color: #fff;
}
.analytics .item {
  text-align: center;
  padding: 7px 10px;
}
.rickshaw_graph .detail {
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 2;
  background: #9974ba;
  bottom: 0;
  width: 1px;
  transition: opacity 0.25s ease-in-out;
}
.rickshaw_graph .detail.inactive { opacity: 0; }
.rickshaw_graph .detail .x_label {
  display: none;
  font: 12px "Helvetica Neue", Helvetica, Arial;
  border-radius: 3px;
  padding: 6px;
  opacity: 0.5;
  border: 1px solid #363636;
  position: absolute;
  background: #fff;
  white-space: nowrap;
}
.rickshaw_graph .detail .item {
  position: absolute;
  padding: 10px 15px;
  min-width: 70px;
  font: 400 30px "Helvetica Neue", Helvetica, Arial;
  white-space: nowrap;
  text-align: center;
  background: #101010;
  color: #fff;
  border: none;
  border-radius: 3px;
  opacity: 0;
  z-index: 100;
  transform: translate(-50%, -200%);
}
.rickshaw_graph .detail .item.active {
  opacity: 1;
  transition: opacity 0.25s ease-in-out 1s;
}
.rickshaw_graph .detail .dot {
  display: none;
  width: 8px;
  height: 8px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 16px;
  position: absolute;
  background: #AA7FF0;
  border-color: 6px solid #cbaef8;
}
.rickshaw_graph { position: relative; }
.rickshaw_graph svg {
  display: block;
  overflow: visible;
}
.rickshaw_graph .x_tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0px;
  border-left: 1px dotted rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.rickshaw_graph .x_tick .title {
  position: absolute;
  font: 12px "Helvetica Neue", Helvetica, Arial;
  opacity: 0.5;
  white-space: nowrap;
  margin-left: 3px;
  bottom: 1px;
}
.rickshaw_annotation_timeline {
  height: 1px;
  border-top: 1px solid #e0e0e0;
  margin-top: 10px;
  position: relative;
}
.rickshaw_annotation_timeline .annotation {
  position: absolute;
  height: 6px;
  width: 6px;
  margin-left: -2px;
  top: -3px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
}
.rickshaw_graph .annotation_line {
  position: absolute;
  top: 0;
  bottom: -6px;
  width: 0px;
  border-left: 2px solid rgba(0, 0, 0, 0.3);
  display: none;
}
.rickshaw_graph .annotation_line.active { display: block; }
.rickshaw_graph .annotation_range {
  background: rgba(0, 0, 0, 0.1);
  display: none;
  position: absolute;
  top: 0;
  bottom: -6px;
}
.rickshaw_graph .annotation_range.active.offscreen { display: none; }
.rickshaw_graph .annotation_range.active { display: block; }
.rickshaw_annotation_timeline .annotation .content {
  background: #fff;
  color: #000;
  opacity: 0.9;
  padding: 5px 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  position: relative;
  z-index: 20;
  font-size: 12px;
  padding: 6px 8px 8px;
  top: 18px;
  left: -11px;
  width: 160px;
  display: none;
  cursor: pointer;
}
.rickshaw_annotation_timeline .annotation .content:before {
  content: "\25b2";
  position: absolute;
  top: -11px;
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8);
}
.rickshaw_annotation_timeline .annotation.active,
.rickshaw_annotation_timeline .annotation:hover {
  background: rgba(0, 0, 0, 0.8);
  cursor: none;
}
.rickshaw_annotation_timeline .annotation .content:hover { z-index: 50; }
.rickshaw_annotation_timeline .annotation.active .content { display: block; }
.rickshaw_annotation_timeline .annotation:hover .content {
  display: block;
  z-index: 50;
}
.rickshaw_graph .y_ticks .tick line,
.rickshaw_graph .x_ticks_d3 .tick {
  display: none;
  stroke: rgba(0, 0, 0, 0.16);
  stroke-width: 2px;
  shape-rendering: crisp-edges;
  pointer-events: none;
}
.rickshaw_graph .y_grid {
  position: relative;
  z-index: -1;
  display: none;
}
.path {
  position: relative;
  z-index: 10;
}
.rickshaw_graph .y_grid .tick,
.rickshaw_graph .x_grid_d3 .tick {
  z-index: -1;
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 1px;
  stroke-dasharray: 1 1;
}
.rickshaw_graph .y_grid .tick[data-y-value="0"] { stroke-dasharray: 1 0; }
.rickshaw_graph .y_grid path,
.rickshaw_graph .x_grid_d3 path {
  fill: none;
  stroke: none;
}
.rickshaw_graph .y_ticks path,
.rickshaw_graph .x_ticks_d3 path {
  fill: none;
  stroke: #808080;
}
.rickshaw_graph .y_ticks text,
.rickshaw_graph .x_ticks_d3 text {
  opacity: 0.5;
  font-size: 12px;
  pointer-events: none;
}
.extended-statistics {
  display: flex;
  flex-flow: row;
  padding-bottom: 20px;
}
.extended-statistics h3 {
  font-size: 25px;
  line-height: 35px;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.extended-statistics > div > div {
  background: #1E1E1E;
  border-radius: 5px;
}
.extended-statistics > div {
  width: 50%;
  color: #fff;
}
.device-statistics {
  margin-right: 30px;
  padding: 30px;
}
.device-statistics > ul > li:last-child { box-shadow: none; }
.device-statistics > ul > li > .name {
  font-size: 10px;
  line-height: 14px;
  color: #F2F2F2;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: -4px;
  margin-bottom: 20px;
  color: #9974BA;
  display: block;
}
.device-statistics > ul > li > .icon {
  display: block;
  height: 65px;
}
.device-statistics > ul > li > .percent {
  display: block;
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
  color: #9974BA;
}
.device-statistics > ul > li {
  flex: 1;
  text-align: center;
  padding: 10px 0 0;
}
.device-statistics > ul {
  height: 165px;
  display: flex;
  flex-direction: row;
}
.device-statistics .desktop-device .icon {
  background: no-repeat center top url('../images/analytics/pc.svg');
  background-size: 49px 48px;
}
.device-statistics .phone-device .icon {
  background: no-repeat center top url('../images/analytics/phone.svg');
  background-size: 50px 50px;
}
.device-statistics .tablet-device .icon {
  background: no-repeat center top url('../images/analytics/tablet.svg');
  background-size: 50px 50px;
}
.page-statistics { position: relative; }
.page-statistics .row p {
  font-size: 16px;
  line-height: 22px;
}
.page-statistics .row .value {
  color: #9974BA;
  font-size: 24px;
}
.page-statistics .row {
  padding: 9px 20px;
  transition: background 0.15s ease-in-out;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
}
.page-statistics .row:not(:last-child) { border-bottom: 1px solid #363636; }

/* styles/apps/notifications.scss */
.upgrading .browser > .bar .address,
.celebrating .browser > .bar .address,
.onboarding .browser > .bar .address,
.managing-projects .browser > .bar .address { display: none; }
.upgrading .phoneWrapper,
.celebrating .phoneWrapper,
.onboarding .phoneWrapper,
.managing-projects .phoneWrapper { display: none !important; }
.upgrading .phoneHint,
.celebrating .phoneHint,
.onboarding .phoneHint,
.managing-projects .phoneHint { display: none; }
.upgrading .browser > .shield,
.celebrating .browser > .shield {
  pointer-events: all;
  top: 30px;
  opacity: 0.8;
}
.sideApping .browser > .shield,
.managing-projects .browser > .shield {
  pointer-events: all;
  border-top-left-radius: 5px;
  opacity: 0.6;
}
.managing-projects .sidebar > .content { pointer-events: none; }
.notifications { margin-left: 30px; }
.notifications:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 108px;
  background: linear-gradient(0deg, #EFF0F5 20%, rgb(196, 196, 196, 0) 100%);
  z-index: 11;
}
.notifications .posts {
  position: relative;
  padding: 30px 0;
}
.notifications .post img { max-width: 610px; }
.notifications .post a:link,
.notifications .post a:visited { color: #9974ba; }
.notifications .post h1 {
  font-size: 35px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #333;
  margin-bottom: 0.5em;
  padding-right: 100px;
}
.notifications .post p,
.notifications .post li {
  font-size: 1em;
  color: rgba(51, 51, 51, 0.8);
}
.notifications .post p:not(:last-child) { margin-bottom: 20px; }
.notifications .post li { line-height: 1.8em; }
.notifications .post .date {
  font-family: "Avenir Next", "Avenir Next Pro", "Avenir";
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 15px;
  line-height: 21px;
  font-weight: 500;
  color: rgba(51, 51, 51, 0.5);
}
.notifications .post {
  margin: auto;
  width: 610px;
  position: relative;
  background: #fff;
  padding: 35px;
  font-size: 20px;
  box-shadow: 11px 11px 11px rgba(0, 0, 0, 0.02);
  border-radius: 5px;
  margin-bottom: 40px;
}
.analytics { position: relative; }

/* styles/site/navigation.scss */
.site header.fixed { padding: 5px 30px; }
.navigation header h1 { display: inline-block; }
.navigation header.stacked > a,
.navigation header.stacked > nav { width: 100%; }
.navigation header.stacked > a { margin-bottom: 20px; }
.navigation header {
  padding: 30px var(--site-gutter) 30px var(--site-gutter);
  box-sizing: border-box;
}
.navigation.sticky {
  display: block;
  top: 0;
  position: sticky;
  z-index: 1000;
}
.navigation .overlay nav > a:after { display: none; }
.navigation .overlay.open {
  visibility: visible;
  opacity: 0.9;
}
.navigation .overlay nav > a {
  width: 100%;
  margin: 10px 0;
  display: block;
}
.navigation .overlay nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 3em;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  margin: 0;
  padding-top: 20px;
}
.navigation .overlay {
  background-color: var(--overlay-background-color, pink);
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: var(--cover-height, 100vh);
  width: 100%;
  visibility: hidden;
  z-index: 1000;
  opacity: 0;
  box-sizing: border-box;
  transition: opacity 250ms ease-out, visibility 500ms ease-out;
}
.four-corners .overlay { display: none; }
.navigation:not(.overlay) .navIcon { display: none; }
.hamburgering { overflow: hidden; }
nav a span:before {
  position: absolute;
  content: '';
  display: block;
  margin: auto;
  height: 1px;
  width: 0px;
  left: 0;
  bottom: -3px;
  background: transparent;
  transition: width 0.5s ease 0.1s;
}
nav a span {
  position: relative;
  color: var(--link-color);
}
nav a:hover span:before {
  width: 100%;
  background: var(--link-color);
}
nav a.active span:before {
  opacity: 1;
  width: 100%;
  transition: none;
  background-color: var(--hover-color, var(--link-color));
}
.sidenaved {
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  --cover-width: calc(100vw - var(--ui-width) - var(--sidenav-width));
}
.sidenaved > .guts { width: calc(100vw - var(--ui-width) - var(--sidenav-width)); }
.previewGuts .sidenaved > .guts {
  width: calc(100vw - var(--sidenav-width));
  flex-basis: calc(100vw - var(--sidenav-width));
}
.sidenav {
  position: sticky;
  width: var(--sidenav-width);
  flex-basis: var(--sidenav-width);
  flex-shrink: 0;
  top: 0;
}
.sidenav > header { padding: 30px; }
.sidenav nav > .content { max-height: 300px; }
.sidenav nav { text-align: left !important; }
.sidenav h1 {
  text-align: left;
  margin-bottom: 40px;
}
.sidenav a:not(.active):hover { opacity: 0.5; }
.sidenav a.active {
  color: var(--accent-color);
  font-weight: 500;
}
.sidenav hr {
  border: none;
  background: var(--link-color);
  width: 20px;
  height: 1px;
  left: 0;
  margin: 30px 0;
}
.sidenav > a { margin-bottom: 20px; }
.sidenav nav a {
  width: 100%;
  display: block;
  margin-bottom: 5px;
}
.sidenav nav {
  width: 100%;
  display: block;
}
.sidenav footer .content > .branding {
  align-self: start;
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 10px;
}
.sidenav footer .content > .copyright {
  grid-row: 2;
  grid-column: 1 / 3;
}
.sidenav footer .content > .links > a { margin: 2px 10px 8px 0; }
.sidenav footer .content > .links {
  justify-content: flex-start;
  flex-flow: row wrap;
  margin: 0;
  grid-column: 1 / 3;
  grid-row: 1;
}
.sidenav footer .content {
  padding: 0 0 0 30px;
  grid-template-columns: 30px calc(100% - 30px) !important;
}
.sidenav footer.has-branding .content > .links {
  padding-left: 10px;
  grid-column: 2 / 3;
}
.sidenav footer {
  position: absolute;
  bottom: 0;
  padding: 20px 0 30px 0;
  color: var(--color);
  width: 100%;
}
@media (max-width: 1240px) {
  .browser { --sidenav-width: 240px; }
  .navigation header h1 { max-width: calc(var(--sidenav-width) - 50px); }
  .sidenav { font-size: 9px; }
}
.hamburger {
  display: inline-block;
  vertical-align: middle;
}
.hamburger .one { transform: rotate(0deg); }
.hamburger .two { transition: opacity 0.2s ease; }
.hamburger .three { transform: rotate(0deg); }
.navigation.sidenav { height: var(--cover-height); }
.navIcon {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  padding: 20px;
  right: 0;
  top: 0;
  z-index: 5001;
  cursor: pointer;
  fill: var(--link-color);
  stroke: var(--link-color);
  color: var(--link-color);
}
.navIcon:hover .one { transform: translateY(2px); }
.navIcon:hover .three { transform: translateY(-2px); }
.navIcon svg line {
  transform: translateY(0px);
  transition: transform 0.5s ease;
}
.navIcon svg {
  height: 100%;
  width: 100%;
  z-index: 999;
}
.navIcon.active .hamburger .one { transform: translate(8.8px, 0.5px) rotate(45deg); }
.navIcon.active .hamburger .two { opacity: 0; }
.navIcon.active .hamburger .three { transform: translate(-11px, 9px) rotate(-45deg); }
.navigation header h1:hover { opacity: 0.7; }
.navigation header h1 { transition: opacity 250ms ease-out; }
.sidenaved .project_link { font-size: 0.83em; }

/* styles/site/thumbnail.scss */
.block.thumbs.align-y-start .content { align-items: flex-start; }
.block.thumbs.align-y-end .content { align-items: flex-end; }
.thumb { position: relative; }
.thumb > .overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  display: block;
  transition: opacity 500ms ease, visibility 500ms ease;
  background: var(--thumb-hover-overlay-color, none);
}
.thumb .ql-editor { width: 100%; }
.thumb[disabled] { cursor: default; }
.thumb > div.placeholder .inset {
  border-radius: 4px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  position: absolute;
  margin: 10px;
  border: 1px dashed #2C2C2C;
  box-sizing: border-box;
}
.thumb > div.placeholder > svg { width: 100%; }
.thumb > div.placeholder {
  position: relative;
  background: #111;
  width: 100%;
  border-radius: 4px;
}
.thumb img,
.thumb video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}
.thumb > .content {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  -webkit-user-select: unset;
  user-select: unset;
  transform: var(--thumb-content-transform, translate(0, 0.5em));
  visibility: var(--thumb-overlay-visibility, hidden);
  opacity: 0;
  transition: transform 500ms ease, visibility 500ms ease, opacity 500ms ease;
  z-index: 2;
}
.thumb.hidden .detail { display: none; }
carbon-item .detail h3,
.thumb h3 {
  display: var(--thumb-title-display, block);
  font-size: var(--font-size, 2em);
  font-style: var(--font-style, none);
  font-weight: var(--font-weight, 400);
  color: var(--color);
  letter-spacing: var(--letter-spacing, 0);
  line-height: var(--line-height, 1.3);
  text-decoration: var(--text-decoration, none);
  width: 100%;
}
carbon-item .detail { padding-top: 1em; }
.text-below .detail h3 { text-align: center; }
.text-below .thumb a { position: absolute; }
.thumbs .ql-link,
.thumbs .ql-underline { display: none; }
.thumb:hover > .overlay {
  opacity: var(--thumb-hover-overlay-opacity, 1);
  visibility: visible;
}
.thumb:hover .content {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
}
.customizingThumb {
  --thumb-overlay-color: var(--thumb-hover-overlay-color, transparent);
  --thumb-content-transform: translate(0, 0);
  --thumb-content-visibility: hidden;
}
.customizingThumb .thumb .overlay {
  opacity: var(--thumb-hover-overlay-opacity, 1) !important;
  visibility: visible !important;
}
.customizingThumb .thumb .content {
  -webkit-user-select: unset;
  user-select: unset;
  visibility: visible !important;
  opacity: 1 !important;
}

/* styles/site/page.scss */
.site {
  margin: 0;
  padding: 0;
  display: block;
  color: var(--color, #000);
  min-height: 100%;
  background: #fff;
  font-family: var(--font-family);
  transform: translate3d(0, 0, 0);
}
.site a span { color: inherit; }
.site a {
  color: var(--link-color);
  filter: brightness(1);
}
.site > div.page { min-height: 100%; }
.site > div.page.loading { visibility: hidden; }
.site > div.page.populating footer { display: none; }
.site > div.page.populating .project-nav { display: none; }
.transitioning .itemBubble { display: none; }
.page.overlap header.standard {
  height: var(--nav-height, unset);
  position: relative;
}
.page.overlap > .guts { margin-top: calc(var(--nav-height, unset) * -1); }
.site a:hover span {
  filter: brightness(1.5);
  color: var(--link-color);
}
.blocks.animated {
  transform: translateY(0);
  opacity: 1;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms ease-out;
}

/* styles/site/footer.scss */
footer {
  width: 100%;
  padding: 20px 0;
}
footer .content .copyright { grid-column: 1; }
footer .content .branding {
  text-align: right;
  grid-column: 2;
}
footer .content .links .icon:hover { transform: scale(1.1); }
footer .content .links .icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color);
  margin-right: 12px;
  transform: scale(1);
  transition: transform 50ms ease-out;
}
footer .content .links {
  display: flex;
  grid-column: 3;
  justify-content: flex-end;
  -webkit-user-select: none;
  user-select: none;
}
footer .content {
  display: grid;
  box-sizing: border-box;
  max-width: var(--grid-width);
  margin: auto;
  padding: var(--site-margin);
  align-items: center;
  color: var(--color);
}
footer.has-links .content { grid-template-columns: calc(50% - 25px) 50px calc(50% - 25px); }
footer.has-links .branding { text-align: center; }
footer.has-links { padding-bottom: 30px; }
.sidenaved .guts footer { display: none; }
.branding { cursor: pointer; }
.branding .icon {
  position: relative;
  width: 24px;
  height: 24px;
  background-image: url('../images/badge.svg');
}
.branding .icon:before {
  content: 'CARBONMADE';
  font: 10px / normal "Helvetica Neue", Helvetica, Arial;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
  color: #fff;
  background: #9974BA;
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translate(-50%, -95%);
  height: 20px;
  line-height: 20px;
  width: 100px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.branding .icon:after {
  position: absolute;
  content: '';
  top: -6px;
  left: 50%;
  transform: translate(-50%, -95%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 5px 0 5px;
  border-color: #9974BA transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.branding .icon:hover:before,
.branding .icon:hover:after {
  opacity: 1;
  transform: translate(-50%, -100%);
}

/* styles/site/projectNav.scss */
.project-nav {
  display: none;
  box-sizing: border-box;
  color: var(--color);
  max-width: var(--grid-width);
  padding: 40px var(--site-gutter) 20px;
  margin: auto;
  align-items: center;
}
.project-nav::before {
  content: '';
  display: block;
  height: 1px;
  opacity: 0.3;
  background: var(--color);
}
.project-nav.hidden { display: none; }
.project-nav > .content .action:hover .wrap { transform: translateY(-10px); }
.project-nav > .content .action:hover .title { opacity: 0.5; }
.project-nav > .content .action:hover label {
  transform: translatey(10px);
  opacity: 0;
}
.project-nav > .content .action {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
.project-nav > .content .wrap {
  display: flex;
  align-items: flex-end;
  -webkit-user-select: none;
  user-select: none;
  color: var(--color);
  cursor: pointer;
  transition: transform 0.35s ease;
  will-change: translate;
}
.project-nav > .content .inner { overflow: hidden; }
.project-nav > .content .icon::before {
  content: '';
  display: block;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-image: url('../icons/arrow.svg');
  mask-image: url('../icons/arrow.svg');
  background-color: var(--color);
  width: 40px;
  height: 40px;
}
.project-nav > .content .icon {
  flex-shrink: 0;
  will-change: opacity, transform;
}
.project-nav > .content .title {
  font-size: 36px;
  line-height: 43px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  will-change: opacity;
}
.project-nav > .content label {
  display: block;
  width: 100%;
  opacity: 0.4;
  font: 12px / 15px "Helvetica Neue", Helvetica, Arial;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.35s ease;
  will-change: opacity, transform;
}
.project-nav > .content .prev .wrap {
  justify-content: flex-start;
  text-align: left;
  padding-right: 20px;
}
.project-nav > .content .prev .icon::before { transform: rotate(0.5turn); }
.project-nav > .content .prev .icon { margin-left: -10px; }
.project-nav > .content .prev:hover .icon {
  animation-name: arrowMoveLeft;
  animation-delay: 0.1s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.project-nav > .content .next .wrap {
  justify-content: flex-end;
  text-align: right;
  padding-left: 20px;
}
.project-nav > .content .next .icon { margin-right: -10px; }
.project-nav > .content .next:hover .icon {
  animation-name: arrowMoveRight;
  animation-delay: 0.1s;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
.project-nav > .content {
  display: flex;
  flex-wrap: nowrap;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 35px;
  position: relative;
}
@keyframes arrowMoveRight {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(50%);
    opacity: 0;
  }
  55% {
    transform: translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }
}
@keyframes arrowMoveLeft {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(-50%);
    opacity: 0;
  }
  55% {
    transform: translateX(50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }
}
.page.project .project-nav { display: block; }
.sidenaved .project-nav .seperator { display: none; }
.sidenaved .project-nav { padding-bottom: 10px; }
@media (max-width: 767px) {
  .project-nav label { display: none !important; }
  .project-nav .action .title::before {
    font-size: 36px !important;
    line-height: 43px !important;
  }
  .project-nav .action .title {
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .project-nav .action.prev .title::before { content: 'Prev'; }
  .project-nav .action.next .title::before { content: 'Next'; }
  .project-nav .action:hover .wrap { transform: none !important; }
}

/* styles/blocks/base.scss */
.block {
  display: block;
  position: relative;
  box-sizing: border-box;
  color: var(--color);
  font-family: var(--font-family);
  background: var(--surface-color);
  padding-top: var(--padding-top, 80px);
  padding-bottom: var(--padding-bottom, 80px);
}
.block div { box-sizing: border-box; }
.block .container { z-index: 3; }
.block .item { position: relative; }
.block hr {
  border: none;
  height: 10px;
}
.block p { font-family: var(--secondary-font-family); }
.block ol,
.block ul { font-family: var(--secondary-font-family); }
.block > .content.empty { padding: 20px; }
.block > .content {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--site-margin);
}
.block.fluid > .content {
  max-width: 100%;
  padding: 0;
}
.block.fluid carbon-grid {
  padding: 0 var(--gap-x, 0px);
  box-sizing: border-box;
}
.block.fluid {
  --container-width: var(--cover-width);
  --container-height: var(--cover-height);
}
.block > .background .clipper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.block > .background video,
.block > .background image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block > .background {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.block .innerBorder {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: box-shadow 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
  z-index: 3;
}
.block.active .innerBorder { box-shadow: inset 0px 0px 0px 5px #00cee3; }
.block.active { z-index: 2; }
.block .empty-state .inner { opacity: 0; }
.block > .shield {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  z-index: 1000;
  -webkit-user-select: none;
  user-select: none;
}
.block.empty > .content { min-height: 500px; }
.block .debug {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #000;
  color: #fff;
  padding: 15px;
  font-size: 2em;
}
.block > .content { transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 500ms ease-out; }
.block.align-x-start .content { text-align: left; }
.block.align-x-center .content { text-align: center; }
.block.align-x-end .content { text-align: right; }
.block.align-y-start .content { align-items: start; }
.block.align-y-center .content { align-items: center; }
.block.align-y-end .content { align-items: end; }
.block .label p { font-family: var(--font-family); }
.block .divider span {
  background-color: var(--color);
  display: inline-block;
  width: 140px;
  height: 1px;
  display: inline-block;
}
.block .divider {
  opacity: 0.8;
  display: block;
  margin-top: 20px;
}
.block .title h3 {
  line-height: var(--line-height, 1.1em);
  letter-spacing: var(--letter-spacing, 0.1);
  font-size: var(--font-size, 2em);
  font-family: var(--font-family);
  font-weight: var(--font-weight, 400);
  color: var(--color);
}
.logoBlock { --color: var(--accent-color); }
.logoBlock .heading {
  text-align: center;
  margin-bottom: 20px;
}
.logoBlock carbon-grid carbon-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
}
.logoBlock carbon-grid carbon-item { position: relative; }
.block.columns h3 { color: var(--accent-color); }
.block.columns img { width: 100%; }
.block.details h3 { font-size: var(--font-size, 2.5em); }
.block.dragging {
  font-size: 10px;
  overflow: hidden;
}
.block.flipped .col-2 { grid-area: 1 / 1 / 2 / 2 !important; }
.block.flipped .col-1 { grid-area: 1 / 2 / 2 / 3 !important; }
.block.about.flipped .circle { margin: 0 0 0 100px !important; }
.block .attribution:before {
  color: #626262;
  padding-right: 5px;
  content: '©';
}
.block .attribution a:link,
.block .attribution a:visited { color: #fff; }
.block .attribution {
  font-family: Helvetica, Arial;
  text-transform: uppercase;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0px 10px;
  margin: 20px;
  line-height: 20px;
  height: 20px;
  color: #626262;
  background: #000;
  letter-spacing: 0.2em;
  border-radius: 10px;
  font-size: 10px;
}
carbon-embed {
  position: relative;
  width: 100%;
}
carbon-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
carbon-embed iframe { pointer-events: none; }
carbon-embed { cursor: not-allowed !important; }
body.enable-embeds carbon-embed { cursor: unset; }
body.enable-embeds carbon-embed iframe { pointer-events: all; }
.fluid carbon-grid.smart carbon-row {
  padding-left: var(--gap-x);
  padding-right: var(--gap-x);
}
.block .item.flow p,
.block .item.flow ul,
.block .item.flow ol {
  max-width: 680px;
  margin: auto;
}

/* styles/blocks/_motion.scss */
.block.animated > .content {
  opacity: 0;
  transform: translateY(50px);
  visibility: hidden;
}
.site.reduce-motion .block > .content { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .block > .content { transition: none; }
}

/* styles/blocks/standard.scss */
.block.standard.align-x-start .caption {
  text-align: left;
  padding-left: 0 !important;
  padding-right: 50% !important;
}
.block.standard.align-x-center .caption {
  text-align: center;
  padding-left: 25% !important;
  padding-right: 25% !important;
}
.block.standard.align-x-end .caption {
  text-align: left;
  padding-left: 50% !important;
  padding-right: 0 !important;
}
.block .item carbon-image { margin: auto; }
.block .item.nested.media { overflow: hidden; }
.block.standard .caption-wrapper {
  max-width: var(--grid-width);
  width: 100%;
  margin: auto;
}

/* styles/blocks/social.scss */
ul.socialLinks .container { text-align: right; }
.block.social.align-x-end.align-y-center >.content .headline { margin-right: 20px; }
.block.social.align-x-end.align-y-center >.content {
  display: flex;
  justify-content: flex-end;
}
.block.social.align-x-end .socialLinks li:last-child { padding-right: 0; }
.block.social.align-x-end .socialLinks { text-align: right; }
.block.social.align-x-center.align-y-center >.content .headline {
  margin-right: 0;
  width: 100%;
}
.block.social.align-x-center.align-y-center >.content .container {
  width: 100%;
  text-align: center;
}
.block.social.align-x-center.align-y-center >.content {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
ul.socialLinks li > a { display: inline-block; }
ul.socialLinks li {
  display: inline-block;
  padding: 10px;
}
ul.socialLinks .icon {
  width: 40px;
  height: 40px;
  display: inline-block;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--accent-color);
}
.icon.outline.artStation {
  -webkit-mask-image: url('../icons/social/outline/artStation.svg');
  mask-image: url('../icons/social/outline/artStation.svg');
}
.icon.outline.behance {
  -webkit-mask-image: url('../icons/social/outline/behance.svg');
  mask-image: url('../icons/social/outline/behance.svg');
}
.icon.outline.bigCartel {
  -webkit-mask-image: url('../icons/social/outline/bigCartel.svg');
  mask-image: url('../icons/social/outline/bigCartel.svg');
}
.icon.outline.deviantArt {
  -webkit-mask-image: url('../icons/social/outline/deviantArt.svg');
  mask-image: url('../icons/social/outline/deviantArt.svg');
}
.icon.outline.dribbble {
  -webkit-mask-image: url('../icons/social/outline/dribbble.svg');
  mask-image: url('../icons/social/outline/dribbble.svg');
}
.icon.outline.etsy {
  -webkit-mask-image: url('../icons/social/outline/etsy.svg');
  mask-image: url('../icons/social/outline/etsy.svg');
}
.icon.outline.facebook {
  -webkit-mask-image: url('../icons/social/outline/facebook.svg');
  mask-image: url('../icons/social/outline/facebook.svg');
}
.icon.outline.flickr {
  -webkit-mask-image: url('../icons/social/outline/flickr.svg');
  mask-image: url('../icons/social/outline/flickr.svg');
}
.icon.outline.gitHub {
  -webkit-mask-image: url('../icons/social/outline/gitHub.svg');
  mask-image: url('../icons/social/outline/gitHub.svg');
}
.icon.outline.imdb {
  -webkit-mask-image: url('../icons/social/outline/imdb.svg');
  mask-image: url('../icons/social/outline/imdb.svg');
}
.icon.outline.instagram {
  -webkit-mask-image: url('../icons/social/outline/instagram.svg');
  mask-image: url('../icons/social/outline/instagram.svg');
}
.icon.outline.linkedIn {
  -webkit-mask-image: url('../icons/social/outline/linkedIn.svg');
  mask-image: url('../icons/social/outline/linkedIn.svg');
}
.icon.outline.medium {
  -webkit-mask-image: url('../icons/social/outline/medium.svg');
  mask-image: url('../icons/social/outline/medium.svg');
}
.icon.outline.pinterest {
  -webkit-mask-image: url('../icons/social/outline/pinterest.svg');
  mask-image: url('../icons/social/outline/pinterest.svg');
}
.icon.outline.tumblr {
  -webkit-mask-image: url('../icons/social/outline/tumblr.svg');
  mask-image: url('../icons/social/outline/tumblr.svg');
}
.icon.outline.twitch {
  -webkit-mask-image: url('../icons/social/outline/twitch.svg');
  mask-image: url('../icons/social/outline/twitch.svg');
}
.icon.outline.twitter {
  -webkit-mask-image: url('../icons/social/outline/twitter.svg');
  mask-image: url('../icons/social/outline/twitter.svg');
}
.icon.outline.vimeo {
  -webkit-mask-image: url('../icons/social/outline/vimeo.svg');
  mask-image: url('../icons/social/outline/vimeo.svg');
}
.icon.outline.youTube {
  -webkit-mask-image: url('../icons/social/outline/youTube.svg');
  mask-image: url('../icons/social/outline/youTube.svg');
}
.icon.outline.soundCloud {
  -webkit-mask-image: url('../icons/social/outline/soundCloud.svg');
  mask-image: url('../icons/social/outline/soundCloud.svg');
}
.icon.solid.artStation {
  -webkit-mask-image: url('../icons/social/solid/artStation.svg');
  mask-image: url('../icons/social/solid/artStation.svg');
}
.icon.solid.behance {
  -webkit-mask-image: url('../icons/social/solid/behance.svg');
  mask-image: url('../icons/social/solid/behance.svg');
}
.icon.solid.bigCartel {
  -webkit-mask-image: url('../icons/social/solid/bigCartel.svg');
  mask-image: url('../icons/social/solid/bigCartel.svg');
}
.icon.solid.deviantArt {
  -webkit-mask-image: url('../icons/social/solid/deviantArt.svg');
  mask-image: url('../icons/social/solid/deviantArt.svg');
}
.icon.solid.dribbble {
  -webkit-mask-image: url('../icons/social/solid/dribbble.svg');
  mask-image: url('../icons/social/solid/dribbble.svg');
}
.icon.solid.etsy {
  -webkit-mask-image: url('../icons/social/solid/etsy.svg');
  mask-image: url('../icons/social/solid/etsy.svg');
}
.icon.solid.facebook {
  -webkit-mask-image: url('../icons/social/solid/facebook.svg');
  mask-image: url('../icons/social/solid/facebook.svg');
}
.icon.solid.flickr {
  -webkit-mask-image: url('../icons/social/solid/flickr.svg');
  mask-image: url('../icons/social/solid/flickr.svg');
}
.icon.solid.gitHub {
  -webkit-mask-image: url('../icons/social/solid/gitHub.svg');
  mask-image: url('../icons/social/solid/gitHub.svg');
}
.icon.solid.imdb {
  -webkit-mask-image: url('../icons/social/solid/imdb.svg');
  mask-image: url('../icons/social/solid/imdb.svg');
}
.icon.solid.instagram {
  -webkit-mask-image: url('../icons/social/solid/instagram.svg');
  mask-image: url('../icons/social/solid/instagram.svg');
}
.icon.solid.linkedIn {
  -webkit-mask-image: url('../icons/social/solid/linkedIn.svg');
  mask-image: url('../icons/social/solid/linkedIn.svg');
}
.icon.solid.medium {
  -webkit-mask-image: url('../icons/social/solid/medium.svg');
  mask-image: url('../icons/social/solid/medium.svg');
}
.icon.solid.pinterest {
  -webkit-mask-image: url('../icons/social/solid/pinterest.svg');
  mask-image: url('../icons/social/solid/pinterest.svg');
}
.icon.solid.tumblr {
  -webkit-mask-image: url('../icons/social/solid/tumblr.svg');
  mask-image: url('../icons/social/solid/tumblr.svg');
}
.icon.solid.twitch {
  -webkit-mask-image: url('../icons/social/solid/twitch.svg');
  mask-image: url('../icons/social/solid/twitch.svg');
}
.icon.solid.twitter {
  -webkit-mask-image: url('../icons/social/solid/twitter.svg');
  mask-image: url('../icons/social/solid/twitter.svg');
}
.icon.solid.vimeo {
  -webkit-mask-image: url('../icons/social/solid/vimeo.svg');
  mask-image: url('../icons/social/solid/vimeo.svg');
}
.icon.solid.youTube {
  -webkit-mask-image: url('../icons/social/solid/youTube.svg');
  mask-image: url('../icons/social/solid/youTube.svg');
}
.icon.solid.soundCloud {
  -webkit-mask-image: url('../icons/social/solid/soundCloud.svg');
  mask-image: url('../icons/social/solid/soundCloud.svg');
}
.desktop ul.socialLinks li > a .icon {
  transform-origin: 50% 50%;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.desktop ul.socialLinks li > a:hover .icon { transform: scale(1.1); }

/* styles/blocks/cover.scss */
.block.cover {
  --cover-block-padding: 120px;
  width: 100%;
  height: var(--cover-height, 100vh);
  padding: 0;
  overflow: hidden;
}
.block.cover > .background { transform: translateY(0px); }
.block.cover .item.media carbon-image {
  pointer-events: none;
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  position: absolute;
  top: 0;
}
.block.cover .item.media img,
.block.cover .item.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block.cover .item.media {
  width: 100%;
  height: 100%;
}
.block.cover .padded-container.fadeIn { opacity: 1; }
.block.cover .padded-container {
  width: var(--cover-width, 100vw);
  margin: var(--cover-block-padding);
  width: calc(var(--cover-width) - var(--cover-block-padding) * 2) !important;
  opacity: 0;
  transition: opacity 200ms linear;
}
.block.cover.magazine .col-2 { height: 100%; }
.block.cover.magazine .cover.media { max-height: var(--max-height); }
.block.cover.magazine img,
.block.cover.magazine video { max-height: var(--max-height); }
.block.cover.magazine .container {
  opacity: 1;
  z-index: 0;
  max-height: var(--max-height);
}
.block.cover.magazine {
  --max-height: min(900px, var(--cover-height));
  max-height: var(--max-height);
}
.block.cover > .content { height: 100%; }
@media (max-width: 1000px) {
  .block.cover { --cover-block-padding: 20px; }
}

/* styles/blocks/editorial.scss */
.block.editorial.align-x-start .content .image { grid-area: 1 / 3 / 2 / 5 !important; }
.block.editorial.align-x-end .content .image { grid-area: 1 / 1 / 2 / 3 !important; }
.block.editorial.align-x-center .content .image { grid-area: 1 / 2 / 2 / 4 !important; }
.block.editorial.align-y-end .content .image { margin-bottom: 80px; }
.block.editorial.align-y-start .content .image { margin-top: 80px; }

/* styles/blocks/flipbook.scss */
.flipbook {
  position: relative;
  height: 800px;
}
.flipbook.single .flipper { display: none; }
.flipbook .flipper:after { content: '' !important; }
.flipbook .flipper.prev {
  left: -100px;
  -webkit-mask-image: url('../icons/gallery/flipper_left.svg');
  mask-image: url('../icons/gallery/flipper_left.svg');
}
.flipbook .flipper.next {
  right: -100px;
  -webkit-mask-image: url('../icons/gallery/flipper_right.svg');
  mask-image: url('../icons/gallery/flipper_right.svg');
}
.flipbook .flipper {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: var(--color, #000);
  width: 20px !important;
  height: 42px !important;
}
.flipbook.inset-flippers .flipper.prev { left: 90px; }
.flipbook.inset-flippers .flipper.next { right: 90px; }
.has-dots:not(.single) .swiper-wrapper { padding-bottom: 40px; }
.swiper-pagination-bullet-active { background: var(--color, #000) !important; }
.flipbook.content { max-width: var(--cover-width); }
.swiper-container {
  width: 100%;
  height: 100%;
}
.slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.phone .flipbook {
  padding: 20px;
  height: 400px;
}
.slide .inner {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.slide .inner .media-wrapper > carbon-player { margin: auto; }
.slide .inner .media-wrapper > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.slide .inner .media-wrapper {
  width: 100%;
  flex-grow: 1;
  position: relative;
  height: 0;
  text-align: center;
}
.slide .inner .caption-wrapper {
  width: 100%;
  flex-shrink: 1;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 16px;
}
.slide .inner .caption-wrapper > .caption {
  max-width: 600px;
  margin: auto;
}
.caption.empty:before {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  content: attr(placeholder);
  color: var(--color);
  opacity: 0.7;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  font-family: var(--secondary-font-family);
}
[placeholder].empty:focus::before { content: ""; }
.slide:not(.captioned) .caption-wrapper { display: none; }
.slide.captioned .caption-wrapper { display: block; }

/* styles/blocks/quote.scss */
.block.quote blockquote:before {
  color: var(--color);
  content: open-quote;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.3em;
}
.block.quote blockquote:after {
  color: var(--color);
  content: close-quote;
  line-height: 0.1em;
  margin-left: 0.25em;
  vertical-align: -0.3em;
}
.block.quote cite { color: var(--accent-color); }

/* styles/blocks/grid.scss */
carbon-grid { display: block; }
carbon-grid.smart carbon-item:not(:last-child) { margin-right: var(--gap-x); }
carbon-grid.smart carbon-row:not(:last-child) { margin-bottom: var(--gap-x); }
carbon-grid.smart carbon-row carbon-item {
  position: relative;
  box-sizing: border-box;
}
carbon-item carbon-image .caption { display: none; }

/* styles/blocks/about.scss */
.block .circle > .item::before {
  display: block;
  padding-top: 50%;
  content: '';
}
.block .circle > .item::after {
  display: block;
  padding-bottom: 50%;
  content: '';
}
.block .circle > .item { position: relative; }
.block .circle a,
.block .circle img,
.block .circle video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block .circle {
  -webkit-clip-path: circle(50% at center);
  clip-path: circle(50% at center);
}

/* styles/blocks/placeholder.scss */
.empty-state {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.empty-state .actions {
  width: 100%;
  margin-bottom: 10px;
}
.empty-state .actions .cloud .outline { display: block; }
.empty-state .actions .cloud {
  visibility: visible;
  width: 130px;
  height: 130px;
  background-color: transparent !important;
  position: relative;
  margin: auto;
}
.empty-state .drag-over-state { display: none; }
.empty-state .cta { margin-top: 20px; }
.empty-state .supported-file-types span { display: inline-block; }
.empty-state .supported-file-types .icon {
  width: 40px;
  height: 40px;
  background-size: cover;
}
.empty-state .supported-file-types .audio-icon { background-image: url('../icons/placeholder/audio.svg'); }
.empty-state .supported-file-types .image-icon { background-image: url('../icons/placeholder/image.svg'); }
.empty-state .supported-file-types .video-icon { background-image: url('../icons/placeholder/video.svg'); }
.empty-state .supported-file-types { width: 100%; }
.empty-state .upload-icon:hover { opacity: 1; }
.empty-state .upload-icon {
  width: 60px;
  height: 60px;
  -webkit-mask: url('../icons/upload.svg');
  mask: url('../icons/upload.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: #fff;
  opacity: 0.8;
}
.empty-state div { width: 100%; }
.empty-state h3 {
  font-family: "Avenir Next", "Avenir Next Pro", "Avenir";
  font-size: 40px;
  letter-spacing: 0.8;
  width: 500px;
  text-align: center;
  margin: auto;
  color: #fff;
  margin-bottom: 20px;
}
.empty-state p {
  font-family: "Avenir Next", "Avenir Next Pro", "Avenir";
  font-size: 12px;
  text-align: center;
  margin: auto;
  color: #fff;
}
.empty-state .note {
  font-size: 30px;
  letter-spacing: -2px;
  max-width: 400px;
}
.empty-state:hover { cursor: pointer; }
.placeholder.dragOver > .empty-state .default-placeholder-state { display: none; }
.placeholder.dragOver > .empty-state .drag-over-state { display: block; }
.placeholder.dragOver .cloud { display: none; }
.empty-state input {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}
.empty-state.dragOver .a { display: none; }
.empty-state.dragOver h3 { display: block; }
.draggingBlock .empty-state:hover .a { display: none; }
.draggingBlock .empty-state:hover h3 { display: block; }

/* styles/blocks/before-after.scss */
.before-after {
  display: flex;
  justify-content: center;
}
.comparison { overflow: hidden; }
.blockTemplate .comparison .inner {
  display: flex;
  align-items: center;
  height: 100%;
}
.blockTemplate .comparison { padding: 0; }
.comparison-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.comparison-wrapper:hover .comparison-handle:before { transform: translateX(3px) rotate(45deg); }
.comparison-wrapper:hover .comparison-handle:after { transform: translateX(-3px) rotate(-45deg); }
.comparison-wrapper figure {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  margin: 0;
  font-size: 0;
  background-position: center center;
  background-size: cover;
  transform: translateX(-50%);
}
.comparison-divider, .comparison-divider-bg {
  width: 50%;
  height: 100%;
  position: absolute;
  bottom: 0;
}
.comparison-divider {
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: auto;
  border-right: 1px solid #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.comparison-divider-bg {
  width: 100%;
  height: 100%;
  top: 0;
  bottom: auto;
  background-position: center center;
  background-size: cover;
}
.comparison-handle {
  width: 45px;
  height: 45px;
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  pointer-events: none;
  border-radius: 50%;
  background-color: #fff;
  transform: translateY(-50%) translateX(-50%);
}
.comparison-handle:before,
.comparison-handle:after {
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  content: '';
  transition: transform 0.2s ease;
}
.comparison-handle:before {
  left: 50%;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}
.comparison-handle:after {
  right: 50%;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  transform: rotate(-45deg);
}
.comparison-slider {
  width: calc(100% + 50px);
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: -25px;
  cursor: grab;
  background: transparent;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
}
.comparison-slider.is-grabbed { cursor: grabbing; }
.comparison-slider:focus,
.comparison-slider:active {
  border: none;
  outline: none;
}
.comparison-slider::-webkit-slider-thumb {
  width: 50px;
  height: 50px;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.comparison-slider::-moz-range-thumb {
  visibility: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.comparison-slider::-moz-range-track {
  width: 100%;
  height: 15px;
  position: relative;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.comparison-slider::-webkit-slider-runnable-track {
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.before-after .placeholder-overlay > div {
  width: 50%;
  display: flex;
  justify-content: center;
}
.before-after .placeholder-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 10;
  min-height: 200px;
}
.before-after .droppable .empty-state .inner {
  opacity: 1;
  transform: none;
}
.before-after .droppable .empty-state {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
}
.before-after .droppable { width: 100%; }
.blockTemplate .before-after img { width: 100%; }

/* styles/vendor/swiper.scss */
:root { --swiper-theme-color: #007aff; }
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper { flex-direction: column; }
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); }
.swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; }
.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank { visibility: hidden; }
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide { height: auto; }
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; }
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; }
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; }
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; }
:root { --swiper-navigation-size: 44px; }
.swiper-button-prev, .swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after { content: 'prev'; }
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after { content: 'next'; }
.swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; }
.swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; }
.swiper-button-lock { display: none; }
:root {}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden { opacity: 0; }
.swiper-pagination-fraction, .swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); }
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; }
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; }
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; }
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; }
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; }
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-white { --swiper-pagination-color: #ffffff; }
.swiper-pagination-black { --swiper-pagination-color: #000000; }
.swiper-pagination-lock { display: none; }
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag { cursor: move; }
.swiper-scrollbar-lock { display: none; }
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; }
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; }
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; }
.swiper-container-cube { overflow: visible; }
.swiper-container-flip { overflow: visible; }
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; }
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; }
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* styles/vendor/quill.scss */
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.text.editable > * { cursor: text; }
.ql-stroke {
  fill: none;
  stroke: #ccc;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-stroke-miter {
  fill: none;
  stroke: #ccc;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-fill, .ql-stroke.ql-fill { fill: #ccc; }
.ql-even { fill-rule: evenodd; }
.ql-thin, .ql-stroke.ql-thin { stroke-width: 1; }
.ql-transparent { opacity: 0.4; }
.ql-tooltip-arrow {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: " ";
  display: block;
  left: 50%;
  margin-left: -6px;
  position: absolute;
}
.text-editor-toolbar:not(.ql-flip) .ql-tooltip-arrow {
  border-bottom: 6px solid #444;
  top: -6px;
}
.text-editor-toolbar.ql-flip .ql-tooltip-arrow {
  border-top: 6px solid #444;
  bottom: -6px;
}
.text.editable a {
  position: relative;
  white-space: nowrap;
}
.text.editable a::before {
  font: 12px / 1 "Helvetica Neue", Helvetica, Arial;
  letter-spacing: 0;
  background-color: #444;
  border-radius: 15px;
  top: -5px;
  color: #fff;
  content: attr(href);
  font-weight: normal;
  overflow: hidden;
  padding: 5px 15px;
  text-decoration: none;
  z-index: 1;
}
.text.editable a::after {
  border-top: 6px solid #444;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  top: 0;
  content: " ";
  height: 0;
  width: 0;
}
.text.editable a::before,
.text.editable a::after {
  left: 0;
  margin-left: 50%;
  position: absolute;
  transform: translate(-50%, -100%);
  transition: visibility 0s ease 200ms;
  visibility: hidden;
}
.text.editable a:hover::before,
.text.editable a:hover::after { visibility: visible; }