/*
Theme Name: SVG Backgrounds Pro
Author: Matt Lipman
Description: Theme designed custom for SVG Backgrounds
Version: 1.0
License: Private License
Text Domain: svgbackgrounds
*/
:root {
  --BG-size: cover;
  --BG-color: none;
  --BG-image: none;
  --BG-repeat: no-repeat;
  --BG-position: center;
  --BG-attachment: scroll;
  --IMG-width: 200px;
  --IMG-padding: 25%;
  --IMG-ratio: 1;
  --IMG-backgroundColor: #FFF;
  --HEAD-MASK: "";
  --FOOT-MASK: "";
  --above-bg: "linear-gradient(#22347F, #22347F)";
  --main-bg: "";
  --below-bg: ""; }

svg * {
  transform-box: fill-box; }

/*!
 * Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
 * Copyright 2011-2017 The Bootstrap Authors
 * Copyright 2011-2017 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */
*,
*::before,
*::after {
  box-sizing: border-box; }

html {
  font-family: sans-serif;
  font-size: 16px;
  /* https://css-tricks.com/rem-global-em-local/ */
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth; }

@-ms-viewport {
  width: device-width; }
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff; }

[tabindex="-1"]:focus {
  outline: 0 !important; }

hr {
  box-sizing: content-box;
  overflow: visible;
  border: none;
  border-top: 1px dotted #AAA;
  height: 1px;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem; }

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0; }

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem; }

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0; }

dt {
  font-weight: 700; }

dd {
  margin-bottom: .5rem;
  margin-left: 0; }

blockquote {
  margin: 0 0 1rem; }

dfn {
  font-style: italic; }

b,
strong {
  font-weight: bolder; }

small {
  font-size: 80%; }

a {
  color: #880088;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects; }

a:hover {
  color: #404;
  text-decoration: underline; }

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none; }

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: inherit;
  text-decoration: none; }

a:not([href]):not([tabindex]):focus {
  outline: 0; }

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

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
  white-space: pre-wrap;
  word-break: break-all; }
  @media (min-width: 660px) {
    pre {
      white-space: pre;
      word-break: normal; } }

figure {
  margin: 0 0 1rem; }

img {
  vertical-align: middle;
  border-style: none;
  width: auto;
  max-width: 100%;
  height: auto; }

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

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
  -ms-touch-action: manipulation;
  touch-action: manipulation; }

button {
  border-radius: 0; }

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color; }

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit; }

button,
input {
  overflow: visible; }

button,
select {
  text-transform: none; }

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

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none; }

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0; }

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox; }

textarea {
  overflow: auto;
  resize: vertical;
  max-height: 60vh;
  width: 100%;
  border: 1px solid #EEE;
  background: #F7F7F7; }

progress {
  vertical-align: baseline; }

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto; }

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

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

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

output {
  display: inline-block; }

[hidden] {
  display: none !important; }

input[type=range] {
  display: inline-block;
  height: 8px;
  margin: 0;
  background-color: transparent;
  -webkit-appearance: none;
  transition: transform .2s ease; }

input[type=range]:focus {
  outline: none; }
  input[type=range]:focus::-webkit-slider-thumb {
    background: #606 !important;
    transform: scale(1.1); }

input[type=range]:hover::-webkit-slider-thumb {
  background: #aa2068;
  transform: scale(1.1); }

input[type=range]::-webkit-slider-runnable-track {
  background: #CCC;
  border: 0;
  border-radius: 99px;
  width: 100%;
  height: 6px;
  cursor: pointer; }

input[type=range]::-webkit-slider-thumb {
  margin-top: -6px;
  width: 18px;
  height: 18px;
  background: #880088;
  border: none;
  border-radius: 99px;
  cursor: pointer;
  -webkit-appearance: none;
  transition: transform .2s ease, background .2s ease; }

input[type=range]::-moz-range-track {
  background: #CCC;
  border: 0;
  border-radius: 99px;
  width: 100%;
  height: 6px;
  cursor: pointer; }

input[type="range"]::-moz-range-progress {
  background-color: #880088; }

input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #880088;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease; }

input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 10px 0;
  color: transparent;
  width: 100%;
  height: 8px;
  cursor: pointer; }

input[type=range]::-ms-fill-lower {
  background: #880088;
  border: 0;
  border-radius: 198px; }

input[type=range]::-ms-fill-upper {
  background: #CCC;
  border: 0;
  border-radius: 198px; }

input[type=range]::-ms-thumb {
  width: 18px;
  height: 18px;
  background: #880088;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  margin-top: 0px;
  transition: transform .2s ease, background .2s ease; }

input[type=range]:focus::-ms-fill-lower {
  background: #880088; }

input[type=range]:focus::-ms-fill-upper {
  background: #CCC; }

input[type=range]:disabled {
  user-select: none; }
  input[type=range]:disabled::-webkit-slider-thumb {
    background: #CCC;
    transform: scale(1);
    cursor: context-menu !important; }
  input[type=range]:disabled::-ms-fill-lower {
    background: #CCC; }
  input[type=range]:disabled::-moz-range-progress {
    background-color: #CCC; }
  input[type=range]:disabled::-ms-thumb {
    background: #CCC; }

input[type=range]:disabled::-webkit-slider-runnable-track {
  cursor: context-menu !important; }

input[type=range]:disabled::-moz-range-track {
  cursor: context-menu !important; }

input[type=range]:disabled::-webkit-slider-thumb {
  cursor: context-menu !important; }

input[type=range]:disabled::-moz-range-thumb {
  cursor: context-menu !important; }

@supports (-ms-ime-align: auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0; } }
input[type="range"] {
  --webkitProgressPercent: 0%; }

input[type="range"]::-webkit-slider-runnable-track {
  background-image: linear-gradient(90deg, #880088 var(--webkitProgressPercent), #CCC var(--webkitProgressPercent)); }

input[type="range"]:disabled::-webkit-slider-runnable-track {
  background-image: none; }

body {
  position: relative;
  background-color: #303;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23404' stroke-width='1.5'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='4'/%3E%3Ccircle cx='539' cy='269' r='4'/%3E%3Ccircle cx='603' cy='493' r='4'/%3E%3Ccircle cx='731' cy='737' r='4'/%3E%3Ccircle cx='520' cy='660' r='4'/%3E%3Ccircle cx='309' cy='538' r='4'/%3E%3Ccircle cx='295' cy='764' r='4'/%3E%3Ccircle cx='40' cy='599' r='4'/%3E%3Ccircle cx='102' cy='382' r='4'/%3E%3Ccircle cx='127' cy='80' r='4'/%3E%3Ccircle cx='370' cy='105' r='4'/%3E%3Ccircle cx='578' cy='42' r='4'/%3E%3Ccircle cx='237' cy='261' r='4'/%3E%3Ccircle cx='390' cy='382' r='4'/%3E%3C/g%3E%3C/svg%3E"); }
  body:after {
    content: "";
    position: fixed;
    /* stretch a fixed position to the whole screen */
    top: 0;
    height: 100vh;
    /* fix for mobile browser address bar appearing disappearing */
    left: 0;
    right: 0;
    z-index: -1;
    /* needed to keep in the background */
    background-color: var(--BG-color);
    background-image: var(--BG-image);
    background-repeat: var(--BG-repeat);
    background-position: var(--BG-position);
    background-attachment: scroll;
    -webkit-background-size: var(--BG-size);
    -moz-background-size: var(--BG-size);
    -o-background-size: var(--BG-size);
    background-size: var(--BG-size); }
  body.intro {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.5'%3E%3Cpath fill='%23330033' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23330033' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23330033' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23330033' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23330033' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%233a003a' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23400040' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23470047' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%234e004e' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23550055' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    background-position: center; }

#DOM_CANVAS {
  position: fixed;
  top: 9999;
  left: 9999;
  z-index: -2; }
  #DOM_CANVAS svg, #DOM_CANVAS svg * {
    transform-box: view-box; }

#full-page-wrapper {
  min-height: 70vh;
  margin: 0;
  padding: 0; }

.page-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px; }
  .page-wrap .premium-header {
    margin: 40px auto 20px auto; }
    @media (min-width: 660px) {
      .page-wrap .premium-header {
        margin: 60px auto 30px auto; } }
    @media (min-width: 775px) {
      .page-wrap .premium-header {
        margin: 60px auto 45px auto; } }
    @media (min-width: 1200px) {
      .page-wrap .premium-header {
        margin: 60px auto; } }

.wrap {
  padding: 15px 10px; }
  @media (min-width: 660px) {
    .wrap {
      padding: 30px 10px; } }
  @media (min-width: 1200px) {
    .wrap {
      padding: 50px 10px; } }

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important; }
  .preload *:hover {
    transition-delay: .5s !important; }
  .preload * .drop_down {
    opacity: 0 !important; }

img[data-lazy-src] {
  opacity: 0; }

img.lazyloaded {
  -webkit-transition: opacity 1.2s ease;
  -moz-transition: opacity 1.2s ease;
  transition: opacity 1.2s ease;
  opacity: 1; }

.text_center {
  text-align: center; }

.text_right {
  text-align: right; }

.text_left {
  text-align: left; }

/* <consistent wrap sizes> update over time */
.wrap_xs {
  max-width: 750px !important; }

.wrap_sm {
  max-width: 970px !important; }

.wrap_md {
  max-width: 1200px !important; }

.wrap_lg {
  max-width: 1400px !important; }

.wrap_xl {
  max-width: 2000px !important; }

.wrap_full {
  max-width: none !important; }

/* <font-size> */
/* codementor.io/@ricardozea/100-responsive-typography-system-using-a-modular-scale-s5rhft58g */
body {
  font-size: 1.125rem;
  line-height: 1.5; }
  @media (min-width: 660px) {
    body {
      font-size: 1.25rem; } }
  @media (min-width: 1200px) {
    body {
      font-size: 1.3125rem; } }

/* </font-size>*/
/* <buttons>*/
a, button {
  cursor: pointer; }

.btn-purple, .btn-white, .btn-white-disabled, .btn-main, .btn-gradient, .btn-pro, .btn-subtle-dark, .btn-red {
  display: inline-block;
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 99px;
  background: #FFF;
  color: #880088;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease; }
  @media (min-width: 660px) {
    .btn-purple, .btn-white, .btn-white-disabled, .btn-main, .btn-gradient, .btn-pro, .btn-subtle-dark, .btn-red {
      font-size: 1.125rem; } }
  @media (min-width: 900px) {
    .btn-purple, .btn-white, .btn-white-disabled, .btn-main, .btn-gradient, .btn-pro, .btn-subtle-dark, .btn-red {
      font-size: 1.25rem; } }
  .btn-purple:hover, .btn-white:hover, .btn-white-disabled:hover, .btn-main:hover, .btn-gradient:hover, .btn-pro:hover, .btn-subtle-dark:hover, .btn-red:hover {
    text-decoration: none; }

.btn-purple, .btn-subtle-dark {
  background: #880088;
  color: #FFF;
  transition: background .2s ease, color .2s ease, filter 2s ease; }
  .btn-purple:hover, .btn-subtle-dark:hover {
    background: #aa2068;
    color: #FFF; }
  .btn-purple:disabled, .btn-purple[disabled], .btn-subtle-dark:disabled, .btn-subtle-dark[disabled] {
    opacity: .4;
    cursor: context-menu; }
    .btn-purple:disabled:hover, .btn-purple[disabled]:hover, .btn-subtle-dark:disabled:hover, .btn-subtle-dark[disabled]:hover {
      background: #880088;
      filter: grayscale(1) blur(5px); }

.btn-subtle-dark {
  background: #505; }

.btn-red {
  background: #cc3f47;
  color: #FFF; }
  .btn-red:hover {
    background: #aa2068;
    color: #FFF; }

.btn-full {
  display: block;
  width: 100%;
  text-align: center; }

.btn-main {
  background: #aa2068;
  color: #FFF;
  transition: background .2s ease, color .2s ease, filter 2s ease, box-shadow .2s ease;
  box-shadow: inset 8px -18px 20px -20px rgba(136, 0, 136, 0.2), inset -34px 73px 20px -60px rgba(240, 159, 51, 0.2); }
  .btn-main:hover {
    background: #d55742;
    box-shadow: inset 30px -65px 20px -60px #880088, inset -30px 70px 20px -60px rgba(240, 159, 51, 0.8);
    color: #FFF; }
  .btn-main:disabled, .btn-main[disabled] {
    opacity: .4;
    cursor: context-menu; }
    .btn-main:disabled:hover, .btn-main[disabled]:hover {
      background: #880088;
      filter: grayscale(1) blur(5px); }

.btn-gradient {
  padding: 15px 40px;
  font-size: 1.125rem;
  text-shadow: 2px 2px 3px rgba(136, 0, 136, 0.5);
  background: linear-gradient(35deg, #880088, #cc3f47, #f09f33, #de6f3d, #aa2068);
  color: #FFF;
  background-size: 200%;
  background-position: left center;
  background-repeat: no-repeat;
  box-shadow: inset 8px -18px 20px -20px rgba(136, 0, 136, 0.1), inset -34px 73px 20px -60px rgba(240, 159, 51, 0.1);
  transition: background .2s ease, box-shadow .2s ease; }
  @media (min-width: 660px) {
    .btn-gradient {
      font-size: 1.25rem; } }
  @media (min-width: 900px) {
    .btn-gradient {
      font-size: 24px; } }
  .btn-gradient:hover {
    color: #FFF;
    background-size: 200%;
    background-position: center center;
    box-shadow: inset 30px -65px 40px -60px #880088, inset -30px 70px 20px -60px rgba(170, 32, 104, 0.8); }

.btn-pro {
  padding: 10px 24px;
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 2px 2px 3px rgba(136, 0, 136, 0.5);
  background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088);
  color: #FFF;
  background-size: 300%;
  background-position: left center;
  background-repeat: no-repeat;
  transition: background .3s ease; }
  @media (min-width: 660px) {
    .btn-pro {
      font-size: 1.4rem; } }
  @media (min-width: 900px) {
    .btn-pro {
      font-size: 1.5rem; } }
  .btn-pro svg {
    display: inline-block;
    width: 24px;
    height: 16px;
    margin-right: 10px;
    fill: #f09f33;
    transition: fill .2s ease;
    padding: 0; }
    @media (min-width: 660px) {
      .btn-pro svg {
        width: 27px;
        height: 18px; } }
    @media (min-width: 900px) {
      .btn-pro svg {
        width: 33px;
        height: 22px; } }
  .btn-pro:hover {
    color: #FFF;
    background-size: 320%;
    background-position: right center; }
    .btn-pro:hover svg {
      fill: #FFF; }

.btn-pro-sm {
  padding: 6px 18px;
  font-size: 1rem; }
  @media (min-width: 660px) {
    .btn-pro-sm {
      font-size: 1.1rem; } }
  @media (min-width: 900px) {
    .btn-pro-sm {
      font-size: 1.25rem; } }
  .btn-pro-sm svg {
    width: 18px;
    height: 12px; }
    @media (min-width: 660px) {
      .btn-pro-sm svg {
        width: 21px;
        height: 14px; } }
    @media (min-width: 900px) {
      .btn-pro-sm svg {
        width: 24px;
        height: 16px; } }

a.btn-subtle, button.btn-subtle {
  display: inline-block;
  color: #880088;
  background: #FFF;
  border-radius: 99px;
  padding: 8px 20px;
  box-shadow: inset 0 0 0 2px #F8EFF8;
  border: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
  a.btn-subtle:hover, a.btn-subtle:focus, button.btn-subtle:hover, button.btn-subtle:focus {
    background: #F8EFF8;
    color: #404;
    box-shadow: inset 0 0 0 2px #F0DFF0;
    text-decoration: none;
    outline: none; }
    a.btn-subtle:hover span.tag, a.btn-subtle:focus span.tag, button.btn-subtle:hover span.tag, button.btn-subtle:focus span.tag {
      background: #DAB0DA; }
  a.btn-subtle span.tag, button.btn-subtle span.tag {
    font-size: .8em;
    background: #F0DFF0;
    border-radius: 4px;
    padding: 0 4px 2px 4px;
    vertical-align: 2px;
    transition: background .2s ease; }

span.tag {
  font-size: .8em;
  color: #880088;
  background: #F0DFF0;
  border-radius: 4px;
  padding: 0 4px 2px 4px;
  vertical-align: 2px; }

a.btn-card {
  display: block;
  padding: 60px 30px;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  border-radius: 15px;
  background-color: #606;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Cg id='d'%3E%3Cpath id='a' d='M0 23C27 23 15 0 42 0s15 23 41 23S99 0 125 0s15 23 42 23 15-23 41-23' transform='scale(0.8)' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23a' y='50'/%3E%3C/g%3E%3Cpath id='e' d='M0 0h180v180H0z' vector-effect='non-scaling-stroke'/%3E%3Cpath id='f' d='M0 50h100M50 0v100' vector-effect='non-scaling-stroke'/%3E%3Cpath id='g' d='M0 0h50v50h50v50h50v50' vector-effect='non-scaling-stroke'/%3E%3Cpath id='h' d='M0 121C0 54 54 0 121 0s114 54 114 121' vector-effect='non-scaling-stroke'/%3E%3Cpath id='i' d='M0 0l-100 173h200z' vector-effect='non-scaling-stroke'/%3E%3Cpath id='j' d='M0 0l-100 73 38 117H62l38-117z' vector-effect='non-scaling-stroke'/%3E%3C/defs%3E%3Cpattern id='p' width='2000' height='1500' patternUnits='userSpaceOnUse' patternTransform='rotate(162 1000 750) scale(0.44) translate(1272.73 954.55)'%3E%3Cg id='k' stroke-width='10' fill='none' %3E%3Cg stroke='%23880088'%3E%3Ccircle id='b' r='25' vector-effect='non-scaling-stroke'/%3E%3Cuse href='%23b' x='-42' y='73'/%3E%3Cuse href='%23b' x='42' y='73'/%3E%3Cuse href='%23e' x='975' y='320' transform='rotate(-55)'/%3E%3C/g%3E%3Cg stroke='%23880088'%3E%3Cuse href='%23d' x='-400' y='750' transform='rotate(35)'/%3E%3Cuse href='%23j' x='377' y='1056'/%3E%3C/g%3E%3Cg stroke='%23880088'%3E%3Cuse href='%23h' x='222' y='-695' transform='rotate(-45)'/%3E%3Cuse href='%23f' x='380' y='556' transform='rotate(-45)'/%3E%3C/g%3E%3Cg stroke='%23880088'%3E%3Cuse href='%23a' x='1222' y='1059' transform='rotate(12)'/%3E%3Cuse href='%23b' x='44' y='155' transform='scale(3)'/%3E%3C/g%3E%3Cg stroke='%23880088'%3E%3Cuse href='%23g' x='410' y='455'/%3E%3Cuse href='%23i' x='1581' y='23' transform='rotate(-12)'/%3E%3C/g%3E%3C/g%3E%3Cuse href='%23k' x='2000'/%3E%3Cuse href='%23k' y='1500'/%3E%3Cuse href='%23k' x='2000' y='1500'/%3E%3C/pattern%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-size: cover; }
  @media (min-width: 660px) {
    a.btn-card {
      padding: 90px 30px;
      font-size: 2rem; } }
  @media (min-width: 1200px) {
    a.btn-card {
      padding: 120px 30px;
      font-size: 2.4rem; } }
  a.btn-card:hover {
    background-color: #202;
    text-decoration: none;
    color: #f09f33;
    background-position: center; }

/* </buttons>*/
/* <HEADER>*/
#header {
  background: #FFF;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: 1fr 80px;
  align-items: center;
  font-size: 1.125rem; }
  @media (min-width: 900px) {
    #header {
      grid-template-columns: 1fr 1fr 1fr;
      justify-content: space-between; } }
  #header #nav-logo a#LOGO {
    display: block;
    padding: 20px;
    max-width: 300px;
    fill: #880088;
    transition: fill .2s ease; }
    #header #nav-logo a#LOGO svg {
      display: block;
      width: 100%; }
    #header #nav-logo a#LOGO #svg-logo-use {
      fill: url(#logo-gradient);
      opacity: 0;
      transition: opacity .5s ease; }
    #header #nav-logo a#LOGO .stop1 {
      stop-color: #880088; }
    #header #nav-logo a#LOGO .stop2 {
      stop-color: #aa2068; }
    #header #nav-logo a#LOGO .stop3 {
      stop-color: #cc3f47; }
    #header #nav-logo a#LOGO .stop4 {
      stop-color: #de6f3d; }
    #header #nav-logo a#LOGO .stop5 {
      stop-color: #f09f33; }
    #header #nav-logo a#LOGO:hover {
      fill: #bb2f57; }
      #header #nav-logo a#LOGO:hover #svg-logo-use {
        opacity: 1; }
  #header #nav-account {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 25px; }
    #header #nav-account a {
      margin-left: 15px; }
    #header #nav-account .drop_down a {
      margin-left: 0; }
  #header #nav-account,
  #header #nav-nav {
    display: none; }
  @media (min-width: 900px) {
    #header #nav-account {
      display: flex; }
    #header #nav-nav {
      display: block; }
    #header #nav-button {
      display: none; } }

#nav-mobile {
  display: block;
  background: #F8EFF8;
  overflow: hidden;
  max-height: 0;
  transition: max-height .2s ease; }
  #nav-mobile ul {
    margin: 0;
    padding: 15px; }
    #nav-mobile ul li {
      list-style-type: none; }
      #nav-mobile ul li a {
        display: block;
        text-align: center;
        padding: 8px; }

#btn-mobile {
  display: block;
  width: 68px;
  height: 68px;
  margin: 0;
  padding: 16px;
  background: #FFF;
  border-radius: 40px;
  border: none;
  cursor: pointer;
  transition: color .2s ease; }
  #btn-mobile svg {
    width: 100%;
    max-width: 36px;
    max-height: 36px;
    fill: none;
    stroke: #880088;
    stroke-width: 4px;
    stroke-linecap: round;
    margin: 0 auto;
    transition: fill .2s ease; }
  #btn-mobile:hover {
    background: #F8EFF8;
    color: #404; }
    #btn-mobile:hover svg {
      fill: #404; }

button#btn-mobile .line-mid, button#btn-mobile .line-ctr {
  transform: rotate(0deg);
  transform-origin: 50% 50%; }
button#btn-mobile .line-top, button#btn-mobile .line-btm {
  transform: translateY(0deg);
  transform-origin: 50% 50%;
  opacity: 1; }
button#btn-mobile.contract .line-top {
  transform: translateY(0px);
  animation: lineTopBack .3s ease-in-out; }
button#btn-mobile.contract .line-mid {
  transform: rotate(0deg);
  animation: lineMidBack .3s ease-in-out; }
button#btn-mobile.contract .line-ctr {
  transform: rotate(0deg);
  animation: lineCtrBack .3s ease-in-out; }
button#btn-mobile.contract .line-btm {
  transform: translateY(0px);
  animation: lineBtmBack .3s ease-in-out; }
button#btn-mobile.expand .line-top {
  transform: translateY(14px);
  animation: lineTop .3s ease-in-out;
  opacity: 0; }
button#btn-mobile.expand .line-mid {
  transform: translateY(0px) rotate(135deg);
  animation: lineMid .3s ease-in-out; }
button#btn-mobile.expand .line-ctr {
  transform: translateY(0px) rotate(225deg);
  animation: lineCtr .3s ease-in-out; }
button#btn-mobile.expand .line-btm {
  transform: translateY(-14px);
  animation: lineBtm .3s ease-in-out;
  opacity: 0; }

@keyframes lineTop {
  0% {
    transform: translateY(0px);
    opacity: 1; }
  100% {
    transform: translateY(14px);
    opacity: 0; } }
@keyframes lineTopBack {
  0% {
    transform: translateY(14px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }
@keyframes lineMid {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(135deg); } }
@keyframes lineMidBack {
  0% {
    transform: rotate(135deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes lineCtr {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(225deg); } }
@keyframes lineCtrBack {
  0% {
    transform: rotate(225deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes lineBtm {
  0% {
    transform: translateY(0px);
    opacity: 1; }
  100% {
    transform: translateY(-14px);
    opacity: 0; } }
@keyframes lineBtmBack {
  0% {
    transform: translateY(-14px);
    opacity: 0; }
  100% {
    transform: translateY(0px);
    opacity: 1; } }
.drop_target {
  font-size: 1.25rem;
  display: flex;
  justify-content: center;
  padding: 10px;
  margin: 0; }
  .drop_target ul {
    padding: 0;
    margin: 0; }
  .drop_target li {
    list-style-type: none;
    display: block;
    padding: 0;
    margin: 0; }
  .drop_target > li > a {
    padding: 15px 25px;
    display: block;
    background: rgba(248, 239, 248, 0);
    border-radius: 3px;
    text-decoration: none;
    transition: background .2s ease; }
    .drop_target > li > a:hover {
      background: #f8eff8; }
  .drop_target .drop_wrap {
    position: relative;
    top: 0;
    left: 0; }
    .drop_target .drop_wrap > a {
      position: relative; }
    .drop_target .drop_wrap .drop_down {
      position: absolute;
      z-index: 9999;
      backface-visibility: hidden;
      /* prevent flickering */
      display: flex;
      left: 50%;
      padding: 0 30px;
      pointer-events: none;
      transform-origin: top center;
      transform: translate(-50%, 30px);
      opacity: 0;
      transition: opacity .3s ease, transform .3s ease;
      transition-delay: .2s;
      background: #FFF;
      box-shadow: 0 4px 7px 0 rgba(51, 0, 51, 0.2), 0 22px 33px 0 rgba(68, 0, 68, 0.1);
      border-radius: 5px; }
      .drop_target .drop_wrap .drop_down a {
        margin: 0; }
      .drop_target .drop_wrap .drop_down:before, .drop_target .drop_wrap .drop_down:after {
        content: "";
        position: absolute;
        z-index: 9998;
        top: 0;
        left: 50%;
        width: 30px;
        height: 30px;
        clip-path: polygon(50% 50%, 0% 100%, 100% 100%); }
      .drop_target .drop_wrap .drop_down:before {
        background-color: #FFF;
        transform: translate(-15px, -29px); }
      .drop_target .drop_wrap .drop_down:after {
        z-index: 9997;
        background-color: rgba(0, 0, 0, 0.05);
        transform: translate(-15px, -32px);
        filter: blur(22px); }
      .drop_target .drop_wrap .drop_down > li {
        padding: 30px;
        margin: 30px; }
        .drop_target .drop_wrap .drop_down > li.drop_slim {
          padding: 15px 0;
          margin: 0; }
      .drop_target .drop_wrap .drop_down.drop_right {
        left: auto;
        right: 0;
        transform-origin: top center;
        transform: translate(0, 30px); }
        .drop_target .drop_wrap .drop_down.drop_right:before, .drop_target .drop_wrap .drop_down.drop_right:after {
          left: auto;
          right: 30px; }
    .drop_target .drop_wrap:hover > a, .drop_target .drop_wrap:focus-within > a, .drop_target .drop_wrap:focus > a {
      transition-delay: 0s;
      background: #F8EFF8; }
    .drop_target .drop_wrap:hover .drop_down, .drop_target .drop_wrap:focus-within .drop_down, .drop_target .drop_wrap:focus .drop_down {
      pointer-events: auto;
      transform: translate(-50%, 0px);
      transition-delay: 0s;
      opacity: 1; }
      .drop_target .drop_wrap:hover .drop_down.drop_right, .drop_target .drop_wrap:focus-within .drop_down.drop_right, .drop_target .drop_wrap:focus .drop_down.drop_right {
        transform: translate(0, 0px); }
  .drop_target a {
    white-space: nowrap; }

/* </HEADER>*/
#footer {
  margin: 0;
  text-align: center;
  color: #FFF;
  background: #202;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='60' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23110011' stroke-width='10' %3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 250px 30px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  	/*
      #footer-middle{
          background:#F7F7F7;
          border-bottom:1px solid #E7E7E7;
          padding:10px;
          @include sm-tablet-up {
              padding:30px;
          }
      }*/
  	/*
      #footer-links{        
          @include sm-desktop-up { 
              display:flex;
              justify-content: center;
          }
          text-align:center;        
      
          a{
              color:#808;
              background:#FFF;        
              transition:color .2s ease, background .2s ease;
              padding:8px 12px;
              font-weight:400;
              display:inline-block;
              border-radius: 50px;
              @include sm-tablet-up {                
                  padding:10px 25px;                
              }
          }
          a:hover{
              color:#101;
              background:$purple-subtle;
              text-decoration: none;
          }
      }
  	*/
  	/*
      .social-btn{
          width:55px;
          display: inline-block;
          padding:10px;
          vertical-align:top;
          svg{
              width:100%;
              fill:#404;
              transition: fill .2s ease;            
          }
      }
      .social-btn:hover{
          svg{
              fill:mix(#404,$red,50%) !important;
          }        
      }
  	*/ }
  #footer p {
    margin: 0; }
  #footer #footer-top {
    font-size: 1.2rem;
    background: #FFF;
    padding: 10px;
    border-bottom: 1px solid #EEE; }
    @media (min-width: 660px) {
      #footer #footer-top {
        padding: 30px; } }
  #footer #footer-logo {
    display: block;
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 30px 15px 30px; }
    #footer #footer-logo a {
      margin: 10px 0; }
    @media (min-width: 660px) {
      #footer #footer-logo {
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: space-between; } }
    #footer #footer-logo #LOGO-FOOT {
      display: inline-block;
      width: 100%;
      max-width: 300px; }
      #footer #footer-logo #LOGO-FOOT svg {
        fill: #FFF;
        transition: fill .2s ease; }
      #footer #footer-logo #LOGO-FOOT:hover svg {
        fill: #C380C3; }
  #footer #footer-nav {
    max-width: 1400px;
    margin: 15px auto 0 auto;
    padding: 0 30px;
    text-align: left; }
    #footer #footer-nav #footer-box {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 30px;
      padding: 30px;
      background: #303;
      border-radius: 15px; }
      @media (min-width: 660px) {
        #footer #footer-nav #footer-box {
          grid-template-columns: 1fr 1fr; } }
      @media (min-width: 1200px) {
        #footer #footer-nav #footer-box {
          grid-template-columns: 1fr 1fr 1fr 1fr; } }
      @media (min-width: 660px) {
        #footer #footer-nav #footer-box {
          padding: 45px; } }
      @media (min-width: 1200px) {
        #footer #footer-nav #footer-box {
          display: flex;
          gap: 30px;
          justify-content: space-between;
          padding: 60px; } }
      #footer #footer-nav #footer-box .footer-col {
        font-size: 1.25rem;
        font-weight: 300; }
        #footer #footer-nav #footer-box .footer-col strong a {
          display: block;
          color: #C380C3;
          font-size: 1.4rem;
          font-weight: bold;
          border-bottom: 1px #606 solid;
          margin-bottom: 10px; }
        #footer #footer-nav #footer-box .footer-col a {
          display: table;
          color: #FFF; }
          #footer #footer-nav #footer-box .footer-col a:hover {
            color: #C380C3; }
  #footer hr {
    border-color: #404; }
  #footer .container {
    color: #DAB0DA;
    padding: 5px 20px 30px 20px;
    font-size: 12px; }

#SEARCH h1 {
  text-align: center;
  color: #404 !important; }
#SEARCH .search_phrase {
  color: #880088 !important; }
#SEARCH a.search-result {
  display: grid;
  margin: 0 0 15px 0;
  padding: 10px;
  text-decoration: none !important;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px #F0DFF0;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
  @media (min-width: 660px) {
    #SEARCH a.search-result {
      grid-template-columns: 2fr 1fr;
      grid-gap: 30px;
      padding: 30px; } }
  #SEARCH a.search-result:hover {
    background: #F8EFF8;
    color: #880088;
    box-shadow: inset 0 0 0 2px #C380C3; }
  #SEARCH a.search-result p {
    margin: 0; }
    @media (max-width: 659px) {
      #SEARCH a.search-result p {
        line-height: 1.5; } }
#SEARCH .search_form form {
  display: grid;
  grid-template-columns: 3.5fr 1fr;
  max-width: 600px;
  margin-inline: auto;
  padding: 15px 0; }
#SEARCH .search_form input[type=text] {
  display: block;
  padding: 5px 1px 5px 15px;
  font-size: 1rem;
  width: 100%;
  border-radius: 99px 0 0 99px;
  border: none;
  color: #202;
  text-transform: none;
  background: #F8EFF8;
  box-shadow: inset 0 0 0 1px rgba(136, 0, 136, 0.1);
  transition: box-shadow .2s; }
  @media (min-width: 450px) {
    #SEARCH .search_form input[type=text] {
      padding: 5px 15px 5px 64px;
      font-size: 1.2rem; } }
  @media (min-width: 660px) {
    #SEARCH .search_form input[type=text] {
      font-size: 1.25rem; } }
  @media (min-width: 450px) {
    #SEARCH .search_form input[type=text] {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="%23808" stroke-linecap="round" stroke-width="1.5" d="M3 10a7 7 0 1 0 14 0 7 7 0 1 0-14 0m18 11-6-6"/></svg>'), linear-gradient(#F8EFF8, #F8EFF8);
      background-position: left 15px center, center;
      background-repeat: no-repeat;
      background-size: 32px, 100%; } }
  #SEARCH .search_form input[type=text]:hover {
    box-shadow: inset 0 0 0 1px rgba(136, 0, 136, 0.4);
    outline: none; }
  #SEARCH .search_form input[type=text]:focus, #SEARCH .search_form input[type=text]:focus-visible {
    box-shadow: inset 0 0 0 3px #880088;
    outline: none; }
    #SEARCH .search_form input[type=text]:focus::placeholder, #SEARCH .search_form input[type=text]:focus-visible::placeholder {
      color: rgba(34, 0, 34, 0.3); }
  #SEARCH .search_form input[type=text]::placeholder {
    color: rgba(34, 0, 34, 0.6); }
#SEARCH .search_form input[type=submit] {
  display: block;
  padding: 10px 8px 10px 15px;
  border-radius: 0;
  border: 0;
  border-radius: 0 99px 99px 0;
  box-shadow: inset 0 0 0 0 #880088;
  transition: box-shadow .2s, background .2s; }
  @media (min-width: 450px) {
    #SEARCH .search_form input[type=submit] {
      padding: 10px 20px; } }
  #SEARCH .search_form input[type=submit]:focus, #SEARCH .search_form input[type=submit]:focus-visible {
    background: #aa2068;
    box-shadow: inset 0 0 0 4px #880088;
    outline: none; }
#SEARCH a.result_thumb {
  background: #CCC;
  border-radius: 20px;
  overflow: hidden; }
  #SEARCH a.result_thumb .img-wrap {
    position: relative; }
  #SEARCH a.result_thumb .img-frame {
    position: absolute;
    z-index: 5;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(34, 0, 34, 0.1); }
  #SEARCH a.result_thumb img {
    transition: opacity .2s ease;
    z-index: 3; }
  #SEARCH a.result_thumb:hover img {
    opacity: .75; }
  #SEARCH a.result_thumb.premium svg {
    position: absolute;
    display: block;
    z-index: 4;
    width: 30px;
    height: 30px;
    background: #880088;
    border-radius: 99px;
    padding: 2px;
    bottom: 5px;
    right: 5px; }
#SEARCH .results_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  margin: 0 0 60px 0; }
  @media (min-width: 450px) {
    #SEARCH .results_grid {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 15px; } }
#SEARCH .tag-links {
  text-align: center; }
  #SEARCH .tag-links a {
    border-radius: 99px;
    background-color: #FFF;
    box-shadow: inset 0 0 0 2px #F8EFF8;
    padding: 4px 15px;
    font-size: 1.1rem;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
    #SEARCH .tag-links a:hover, #SEARCH .tag-links a:focus {
      background-color: #F8EFF8;
      box-shadow: inset 0 0 0 2px #F0DFF0;
      color: #404;
      text-decoration: none;
      outline: none; }

#about-section, .about-section {
  position: relative;
  z-index: 99;
  background: #FFF;
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.4;
  box-shadow: 0 0 0 1px #F0DFF0; }
  @media (min-width: 900px) {
    #about-section, .about-section {
      padding: 120px 30px; } }
  @media (min-width: 660px) {
    #about-section, .about-section {
      font-size: 1.5rem; } }
  @media (min-width: 1200px) {
    #about-section, .about-section {
      font-size: 1.8rem; } }
  #about-section .about-shell, .about-section .about-shell {
    background: #F8EFF8;
    border-radius: 10px;
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center; }
    @media (min-width: 660px) {
      #about-section .about-shell, .about-section .about-shell {
        padding: 30px; } }
    @media (min-width: 1200px) {
      #about-section .about-shell, .about-section .about-shell {
        padding: 60px; } }
    @media (min-width: 900px) {
      #about-section .about-shell, .about-section .about-shell {
        grid-template-columns: 200px 1fr;
        grid-gap: 50px; } }
  #about-section a.youtube, .about-section a.youtube {
    fill: #880088;
    color: #880088;
    transition: color .2s; }
    #about-section a.youtube svg, .about-section a.youtube svg {
      display: inline-block;
      width: 30px;
      height: 24px;
      vertical-align: -3px;
      transition: fill .2s ease; }
    #about-section a.youtube:hover, .about-section a.youtube:hover {
      text-decoration: none;
      fill: #aa2068;
      color: #aa2068; }
  #about-section .about-img img, .about-section .about-img img {
    display: block;
    max-width: 200px;
    border-radius: 100px; }
  #about-section p, .about-section p {
    margin: 0 auto;
    max-width: 600px; }
  @media (min-width: 900px) {
    #about-section #about-foot, .about-section #about-foot {
      grid-column: 1 / 3; } }
  #about-section #about-foot p, .about-section #about-foot p {
    max-width: 100%; }

.multi-column {
  max-width: 1060px;
  margin: 0 auto;
  padding: 15px;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px; }
  @media (min-width: 900px) {
    .multi-column {
      grid-template-columns: 1fr 1fr; } }

.post-wrap {
  padding: 10px; }

.post {
  background: #FFF;
  border-top: 5px solid #AAA;
  padding: 30px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto; }

/*
blockquote{
	background:#EEE;
	border-radius: 2px;
	padding:15px;
	font-size:0.8rem;
}
blockquote pre{	
	font-size:0.8rem;
	padding:0;
	margin:0;
}
*/
.more-excerpt {
  color: #AAA; }

.bbtn {
  background: #404;
  color: #FFF !important;
  border-radius: 50px;
  padding: 4px 10px;
  transition: background 0.2s; }

.bbtn:hover {
  background: #882046;
  text-decoration: none; }

.bbtn:focus {
  outline: none;
  background: #aa2f46;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }

#container {
  position: relative;
  display: block;
  padding: 60px 0 0 0;
  grid-gap: 0; }
  @media (min-width: 775px) {
    #container {
      display: grid;
      padding: 120px 0 0 0;
      grid-template-columns: 330px 1fr; } }
  @media (min-width: 1200px) {
    #container {
      display: grid;
      grid-template-columns: 390px 1fr; } }
  #container .end-spacer {
    height: 60px; }
    @media (min-width: 450px) {
      #container .end-spacer {
        height: 120px; } }
    @media (min-width: 660px) {
      #container .end-spacer {
        height: 160px; } }
    @media (min-width: 1200px) {
      #container .end-spacer {
        height: 240px; } }
  #container .end-cap {
    grid-column: 1/-1;
    padding: 0;
    height: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100' preserveAspectRatio='none' viewBox='0 0 1600 130'%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='70' x2='1600' y2='70'%3E%3Cstop offset='0' stop-color='%23808'/%3E%3Cstop offset='.5' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cpath d='M1600 130L1600 110c-400 0-400-100-800-100S400 110 0 110L0 130z' fill='%23404'/%3E%3Cpath d='M1600 120c-400 0-400-100-800-100S400 120 0 120' fill='none' stroke='url(%23g)' stroke-width='5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 50px;
    background-position: bottom center; }
    @media (min-width: 660px) {
      #container .end-cap {
        background-size: 100% 100px;
        height: 100px; } }
  #container > div {
    z-index: 98; }

.no-click {
  pointer-events: none; }

.overlayBox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 122;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(136, 0, 136, 0.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23df6338'/%3E%3Cstop offset='1' stop-color='%23df6338' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ce0732'/%3E%3Cstop offset='1' stop-color='%23ce0732' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23b41569'/%3E%3Cstop offset='1' stop-color='%23b41569' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23f09f33'/%3E%3Cstop offset='1' stop-color='%23f09f33' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23cc3f47'/%3E%3Cstop offset='1' stop-color='%23cc3f47' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23880088'/%3E%3Cstop offset='1' stop-color='%23880088' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center; }
  .overlayBox.active {
    display: grid;
    justify-content: center;
    align-items: center; }
  .overlayBox .theBox {
    position: relative;
    background: #FFF;
    color: #880088;
    padding: 0;
    width: 100%;
    max-width: 1000px;
    border-radius: 5px;
    box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.055), 0 1.7px 2.6px rgba(0, 0, 0, 0.056), 0 3.5px 5.3px rgba(0, 0, 0, 0.058), 0 7.3px 11px rgba(0, 0, 0, 0.074), 0 20px 30px rgba(0, 0, 0, 0.2); }
    @media (min-width: 660px) {
      .overlayBox .theBox {
        padding: 0 0 30px 0; } }
    .overlayBox .theBox .btn-subtle {
      font-size: 1rem; }
  .overlayBox#infoBox .theBox {
    max-width: 800px; }
  .overlayBox .theBoxWrapper {
    padding: 45px 30px 0 30px; }
    @media (min-width: 660px) {
      .overlayBox .theBoxWrapper {
        padding: 75px 60px 0 60px; } }
    .overlayBox .theBoxWrapper p.boxHeading {
      margin-bottom: 0; }
  .overlayBox .theBoxWrap {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 120px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0 0 30px 0;
    background: #FFF; }
    @media (min-width: 660px) {
      .overlayBox .theBoxWrap {
        padding: 0; } }
    .overlayBox .theBoxWrap.simple {
      margin-top: 30px; }
    .overlayBox .theBoxWrap > div {
      padding: 15px 30px; }
    @media (min-width: 900px) {
      .overlayBox .theBoxWrap {
        grid-template-columns: 1fr 1fr;
        background-image: linear-gradient(#F8EFF8, #F8EFF8);
        background-size: 2px 100%;
        background-repeat: no-repeat;
        background-position: center center; }
        .overlayBox .theBoxWrap.singleCol {
          grid-template-columns: 1fr;
          background-image: none; }
        .overlayBox .theBoxWrap > div {
          padding: 30px 60px; } }
  .overlayBox button.close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #C380C3;
    border: none;
    width: 48px;
    height: 48px;
    padding: 9px;
    border-radius: 99px;
    box-shadow: 0 0 0 0 #C380C3;
    transition: background .2s ease, box-shadow .2s ease; }
    .overlayBox button.close * {
      pointer-events: none; }
    .overlayBox button.close svg {
      display: block;
      stroke: #FFF;
      stroke-width: 2px;
      transition: stroke-width .2s ease; }
    .overlayBox button.close:hover, .overlayBox button.close:focus {
      background: #880088;
      box-shadow: 0 0 0 5px #880088;
      outline: none; }
      .overlayBox button.close:hover svg, .overlayBox button.close:focus svg {
        stroke-width: 4px; }
  .overlayBox .boxContentWrap {
    padding: 10px 0; }
    @media (min-width: 660px) {
      .overlayBox .boxContentWrap {
        padding: 10px 0 10px 30px; } }
    .overlayBox .boxContentWrap .btn-subtle {
      margin: 6px 6px 6px 0; }
    .overlayBox .boxContentWrap p {
      margin: 0; }
  .overlayBox .boxHeading {
    padding: 5px 0 15px 0;
    font-size: 24px;
    font-weight: bold; }
    .overlayBox .boxHeading span {
      box-shadow: inset 0 -2px 0 0 #F8EFF8; }
  .overlayBox .thumbWrap {
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60px); }
    .overlayBox .thumbWrap img {
      background: #FFF;
      padding: 5px;
      width: 130px;
      height: 130px;
      border-radius: 65px; }
  .overlayBox#shapeBox .theBox {
    padding: 0; }
  .overlayBox#shapeBox .theBoxWrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    padding: 45px 30px; }
    @media (min-width: 660px) {
      .overlayBox#shapeBox .theBoxWrapper {
        padding: 75px 60px; } }
    .overlayBox#shapeBox .theBoxWrapper button {
      display: block;
      width: 300px;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 1px;
      box-shadow: inset 0 0 0 1px #F0DFF0;
      background: #F0DFF0;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><g opacity="1"><path fill="%23F8EFF8" d="M10 10h10v10H10zM0 0h10v10H0z"/><path fill="%23F0DFF0" d="M10 0h10v10H10zM0 10h10v10H0z"/></g></svg>');
      background-repeat: repeat;
      background-size: 20px;
      transition: box-shadow .2s, outline .2s; }
      @media (min-width: 660px) {
        .overlayBox#shapeBox .theBoxWrapper button {
          width: 500px; } }
      @media (min-width: 900px) {
        .overlayBox#shapeBox .theBoxWrapper button {
          width: 750px; } }
      .overlayBox#shapeBox .theBoxWrapper button svg {
        fill: #808;
        display: block;
        border-radius: 1px;
        width: 300px; }
        @media (min-width: 660px) {
          .overlayBox#shapeBox .theBoxWrapper button svg {
            width: 500px; } }
        @media (min-width: 900px) {
          .overlayBox#shapeBox .theBoxWrapper button svg {
            width: 750px; } }

#shapeSelection {
  height: 80dvh;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-color: #DAB0DA #F0DFF0; }
  #shapeSelection::-webkit-scrollbar-thumb {
    border-radius: 10px; }
  #shapeSelection button.selected svg, #shapeSelection button:hover, #shapeSelection button:focus {
    box-shadow: inset 0 0 15px 5px #C380C3;
    outline: 5px solid #cc3f47;
    outline-offset: 5px; }
  #shapeSelection .uiCustomSwitch {
    padding: 5px 0;
    display: flex;
    align-items: center;
    height: 50px; }
    #shapeSelection .uiCustomSwitch label {
      display: inline-block;
      padding: 5px 15px 5px 0;
      margin: 0;
      width: auto; }
    #shapeSelection .uiCustomSwitch .ui-switch::before {
      top: -2px; }
      @media (min-width: 660px) {
        #shapeSelection .uiCustomSwitch .ui-switch::before {
          top: 2px; } }
  #shapeSelection.custom {
    grid-template-rows: 50px 1fr; }
    #shapeSelection.custom #customShapeInput {
      display: block; }
    #shapeSelection.custom #presetShapes {
      display: none; }
    #shapeSelection.custom > button {
      display: none !important; }
  #shapeSelection #customShapeInput {
    display: none;
    height: 100%;
    width: 300px; }
    @media (min-width: 660px) {
      #shapeSelection #customShapeInput {
        width: 500px; } }
    @media (min-width: 900px) {
      #shapeSelection #customShapeInput {
        width: 750px; } }
    #shapeSelection #customShapeInput textarea {
      scrollbar-color: #404 #880088;
      resize: none;
      background-color: #F8EFF8;
      border: 1px solid #F0DFF0;
      overflow: auto;
      padding: 15px;
      font-size: 1rem;
      line-height: 20px;
      box-shadow: inset 0 0 0 0 #F8EFF8;
      transition: box-shadow .2s ease;
      animation-name: none; }
      @media (min-width: 660px) {
        #shapeSelection #customShapeInput textarea {
          padding: 30px; } }
      #shapeSelection #customShapeInput textarea:focus, #shapeSelection #customShapeInput textarea:active, #shapeSelection #customShapeInput textarea:focus-within, #shapeSelection #customShapeInput textarea:focus-visible {
        outline: none;
        border-color: #880088;
        box-shadow: inset 0 0 0 3px #880088; }
      #shapeSelection #customShapeInput textarea.error {
        animation-name: errorFlash;
        animation-duration: 1s; }
    #shapeSelection #customShapeInput ul {
      color: #212529; }
    #shapeSelection #customShapeInput code {
      background: #F8EFF8;
      color: #404;
      padding: 0 5px; }
    #shapeSelection #customShapeInput button {
      background: #880088;
      color: #FFF;
      display: block;
      width: auto;
      margin: 0 0 0 auto;
      padding: 8px 30px;
      border-radius: 99px;
      box-shadow: none;
      transition: background .2s ease; }
    #shapeSelection #customShapeInput button.selected svg, #shapeSelection #customShapeInput button:hover, #shapeSelection #customShapeInput button:focus {
      box-shadow: none;
      outline: none;
      background: #aa2068; }

@keyframes errorFlash {
  50% {
    background-color: #cc3f47; } }
#exportShapes {
  width: 300px; }
  @media (min-width: 660px) {
    #exportShapes {
      width: 500px; } }
  @media (min-width: 900px) {
    #exportShapes {
      width: 750px; } }
  #exportShapes .copyCodeDiv button.btn-purple {
    bottom: 8px;
    right: 1px; }
  #exportShapes textarea {
    scrollbar-color: #404 #880088;
    resize: none;
    background-color: #F8EFF8;
    border: 1px solid #F0DFF0;
    overflow: auto;
    white-space: nowrap;
    padding: 15px;
    font-size: 1rem;
    line-height: 20px;
    box-shadow: inset 0 0 0 0 #F8EFF8;
    transition: box-shadow .2s ease; }
    @media (min-width: 660px) {
      #exportShapes textarea {
        padding: 30px; } }
    #exportShapes textarea:focus, #exportShapes textarea:active, #exportShapes textarea:focus-within, #exportShapes textarea:focus-visible {
      outline: none;
      border-color: #880088;
      box-shadow: inset 0 0 0 3px #880088; }

@-moz-document url-prefix() {
  #exportShapes textarea {
    white-space: pre-wrap; } }
@supports (-moz-appearance: none) {
  #exportShapes textarea {
    white-space: pre-wrap; } }
.thumb-display {
  position: relative;
  display: grid;
  grid-gap: 15px;
  grid-template: 1fr 1fr / 1fr 1fr 1fr; }
  .thumb-display button {
    z-index: 3; }
  .thumb-display.thumb-d2 button:nth-child(1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2; }
  .thumb-display.thumb-d2 button:nth-child(2) {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2; }
  .thumb-display.thumb-d3 {
    grid-gap: 30px; }
    .thumb-display.thumb-d3 button:first-of-type {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2; }
  .thumb-display.thumb-d4 {
    grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; }
    .thumb-display.thumb-d4 button:nth-child(1) {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2; }
    .thumb-display.thumb-d4 button:nth-child(2) {
      grid-column: 2 / span 2;
      grid-row: 1 / span 2; }
    .thumb-display.thumb-d4 button:nth-child(3) {
      grid-column: 1 / span 2;
      grid-row: 2 / span 2; }
    .thumb-display.thumb-d4 button:nth-child(4) {
      grid-column: 2 / span 2;
      grid-row: 2 / span 2; }

#purchaseOptions .spaceWrap, .purchaseOptions .spaceWrap, .theBox .spaceWrap {
  text-align: center;
  padding: 30px 0 0 0; }
@media (max-width: 659px) {
  #purchaseOptions .fullPitch, .purchaseOptions .fullPitch, .theBox .fullPitch {
    display: none; } }
#purchaseOptions .mobilePitch, .purchaseOptions .mobilePitch, .theBox .mobilePitch {
  display: block; }
  @media (min-width: 660px) {
    #purchaseOptions .mobilePitch, .purchaseOptions .mobilePitch, .theBox .mobilePitch {
      display: none; } }
#purchaseOptions .attribution-box, .purchaseOptions .attribution-box, .theBox .attribution-box {
  display: grid;
  grid-template-columns: 67px 1fr;
  grid-gap: 15px;
  padding: 10px 0; }
  #purchaseOptions .attribution-box img, .purchaseOptions .attribution-box img, .theBox .attribution-box img {
    border-radius: 99px; }
  #purchaseOptions .attribution-box a, #purchaseOptions .attribution-box button, .purchaseOptions .attribution-box a, .purchaseOptions .attribution-box button, .theBox .attribution-box a, .theBox .attribution-box button {
    margin-top: 10px;
    border: none; }
  #purchaseOptions .attribution-box p, .purchaseOptions .attribution-box p, .theBox .attribution-box p {
    padding-bottom: 15px; }
@media (min-width: 660px) {
  #purchaseOptions .dualSegments, .purchaseOptions .dualSegments, .theBox .dualSegments {
    display: grid;
    grid-template-columns: 1fr 1fr; } }

#exportBox {
  z-index: 123; }

#NCOURGE {
  padding: 10px 15px;
  border-radius: 15px;
  font-size: 1rem;
  background: #404;
  color: #FFF; }
  #NCOURGE a {
    color: #DAB0DA; }
  #NCOURGE ul {
    list-style: none;
    padding: 0;
    margin: 0; }
  #NCOURGE li {
    padding: 5px 0; }
  #NCOURGE svg {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: -6px; }

#SVGBG_UI {
  font-size: 14px;
  line-height: 16px;
  color: #880088;
  border-radius: 15px; }
  #SVGBG_UI #svgACTIONS {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0 15px; }
    #SVGBG_UI #svgACTIONS button {
      display: block;
      padding: 15px 0;
      background: #FFF;
      color: #880088;
      transition: background .2s ease; }
      #SVGBG_UI #svgACTIONS button svg {
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto;
        fill: none;
        stroke: #880088;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round; }
      #SVGBG_UI #svgACTIONS button:hover, #SVGBG_UI #svgACTIONS button:focus {
        background: #F8EFF8;
        outline: none; }

#controls {
  padding: 5px;
  z-index: 99; }
  #controls:not(.controlElements) {
    position: sticky;
    top: 0;
    left: 0; }
  @media (min-width: 775px) {
    #controls.controlElements {
      position: sticky;
      top: 0;
      left: 0; } }
  @media (min-width: 450px) {
    #controls {
      padding: 15px; } }
  @media (min-width: 775px) {
    #controls {
      position: relative;
      padding: 15px; } }
  #controls .stickyControls .control-box {
    background: #FFF; }
    #controls .stickyControls .control-box.active {
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
  @media (min-width: 775px) {
    #controls .stickyControls {
      position: sticky;
      top: 15px; } }
  #controls #svgName {
    padding: 20px 15px 5px 15px;
    border-bottom: 1px solid #EEE;
    display: none; }
    #controls #svgName h2 {
      margin: 0;
      font-size: 24px; }
    @media (min-width: 775px) {
      #controls #svgName {
        display: block; } }
  #controls #svgCustomize {
    padding: 15px;
    border-bottom: 1px solid #EEE; }
  #controls #set-details {
    overflow: hidden; }
  #controls #SVGBG_UI {
    overflow: hidden;
    max-height: 0; }
    #controls #SVGBG_UI.active {
      max-height: 9999px; }

h3 svg {
  display: inline-block;
  width: 16px;
  width: 1rem;
  height: 16px;
  height: 1rem; }

.svgIcon {
  fill: #AAA;
  fill: #C380C3;
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle; }

#stage {
  padding: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px; }
  @media (min-width: 775px) {
    #stage {
      padding-right: 30px; } }
  @media (min-width: 1000px) {
    #stage {
      display: grid;
      grid-template-columns: repeat(auto-fit, 240px);
      justify-content: center;
      grid-gap: 60px; } }
  @media (min-width: 775px) {
    #stage {
      grid-gap: 30px; } }
  @media (min-width: 1200px) {
    #stage {
      grid-gap: 75px; } }
  @media (min-width: 1800px) {
    #stage {
      grid-gap: 90px; } }
  @media (min-width: 2050px) {
    #stage {
      max-width: 1680px;
      margin: 0 auto; } }
  #stage.stage-single {
    padding: 15px;
    display: block; }

#mobile-top {
  display: block;
  position: sticky;
  top: 15px; }
  @media (min-width: 450px) {
    #mobile-top {
      display: none; } }
  #mobile-top a {
    display: block;
    padding: 8px;
    text-align: center;
    background: #808;
    color: #FFF; }

#set-details {
  box-shadow: inset 0 1px 0 0 #F0DFF0;
  background: #FFF;
  padding: 15px;
  line-height: 1.2;
  font-size: 1rem; }
  @media (min-width: 450px) {
    #set-details {
      font-size: 1.1rem; } }
  @media (min-width: 660px) {
    #set-details {
      font-size: 1.2rem; } }
  @media (min-width: 1200px) {
    #set-details {
      font-size: 1.25rem; } }
  #set-details h1 {
    line-height: 1;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 8px 0 4px; }
    @media (min-width: 450px) {
      #set-details h1 {
        font-size: 1.6rem; } }
    @media (min-width: 660px) {
      #set-details h1 {
        font-size: 1.8rem; } }
    @media (min-width: 900px) {
      #set-details h1 {
        font-size: 2rem; } }
    @media (min-width: 1200px) {
      #set-details h1 {
        font-size: 2.4rem; } }
    @media (min-width: 450px) {
      #set-details h1 {
        margin: 15px 0 10px; } }
    @media (min-width: 900px) {
      #set-details h1 {
        margin: 30px 0 10px; } }
  #set-details p {
    margin-bottom: .25rem; }
    @media (min-width: 450px) {
      #set-details p {
        margin-bottom: 1rem; } }
  @media (min-width: 450px) {
    #set-details .set-description {
      padding: 15px; } }
  #set-details .set-premium {
    color: #880088;
    padding: 5px 15px;
    background: #F8EFF8;
    text-align: center; }
    @media (min-width: 450px) {
      #set-details .set-premium {
        padding: 15px; } }
    #set-details .set-premium p:last-child {
      margin: 0; }
  #set-details.set-elements {
    display: grid;
    grid-template-columns: 1fr; }
    @media (min-width: 900px) {
      #set-details.set-elements {
        grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1200px) {
      #set-details.set-elements {
        grid-template-columns: 1fr 1fr 250px; } }
    #set-details.set-elements .set-description {
      max-width: 600px; }
      #set-details.set-elements .set-description.middleTable {
        display: none; }
        @media (min-width: 1200px) {
          #set-details.set-elements .set-description.middleTable {
            display: table; } }
      #set-details.set-elements .set-description table {
        text-align: center;
        background: #F8EFF8;
        box-shadow: inset 0 0 0 1px #F0DFF0;
        border-radius: 15px;
        padding: 10px; }
        #set-details.set-elements .set-description table tbody {
          padding: 10px; }
        #set-details.set-elements .set-description table tr:not(tr:last-child) {
          box-shadow: 0px 1px 0px 0px #F0DFF0; }
        #set-details.set-elements .set-description table td {
          font-size: 1rem;
          padding: 5px;
          vertical-align: top;
          text-align: left; }
        #set-details.set-elements .set-description table td:last-child {
          text-align: right; }
  #set-details .explainerAA {
    padding: 0px; }
    @media (min-width: 450px) {
      #set-details .explainerAA {
        padding: 10px; } }
    @media (min-width: 1800px) {
      #set-details .explainerAA {
        padding: 15px; } }
    #set-details .explainerAA > div {
      display: grid;
      grid-template-columns: 1fr;
      border-radius: 15px;
      color: #FFF;
      background-color: #404;
      background-image: radial-gradient(circle at top left, #404 30%, rgba(68, 0, 68, 0.7) 65%, rgba(68, 0, 68, 0) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23440044'/%3E%3Cstop offset='.5' stop-color='%23650065'/%3E%3Cstop offset='1' stop-color='%23606' /%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z' /%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.15) rotate(60)' /%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)' /%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)' /%3E%3Cuse href='%23s' transform='scale(0.93) rotate(40)' /%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)' /%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)' /%3E%3C/g%3E%3Cg id='h'%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)' /%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)' /%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)' /%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)' /%3E%3C/g%3E%3Cg id='i'%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)' /%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)' /%3E%3Cuse href='%23s' transform='scale(0.81) rotate(-40)' /%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)' /%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)' /%3E%3C/g%3E%3C/defs%3E%3Cg %3E%3Cg transform='translate(0 750)'%3E%3Cg%3E%3Cuse href='%23g' transform='rotate(10)' /%3E%3Cuse href='%23g' transform='rotate(120)' /%3E%3Cuse href='%23g' transform='rotate(240)' /%3E%3CanimateTransform attributeName='transform' type='rotate' dur='120s' values='720%3B0' repeatCount='2'%3E%3C/animateTransform%3E%3C/g%3E%3Cg%3E%3Cuse href='%23h' transform='rotate(10)' /%3E%3Cuse href='%23h' transform='rotate(120)' /%3E%3Cuse href='%23h' transform='rotate(240)' /%3E%3CanimateTransform attributeName='transform' type='rotate' dur='120s' values='1080%3B0' repeatCount='2'%3E%3C/animateTransform%3E%3C/g%3E%3Cg%3E%3Cuse href='%23i' transform='rotate(10)' /%3E%3Cuse href='%23i' transform='rotate(120)' /%3E%3Cuse href='%23i' transform='rotate(240)' /%3E%3CanimateTransform attributeName='transform' type='rotate' dur='120s' values='1440%3B0' repeatCount='2'%3E%3C/animateTransform%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      padding: 15px; }
      @media (min-width: 1800px) {
        #set-details .explainerAA > div {
          grid-template-columns: 3fr 1fr; } }
      @media (min-width: 450px) {
        #set-details .explainerAA > div {
          padding: 20px; } }
      @media (min-width: 1800px) {
        #set-details .explainerAA > div {
          padding: 30px; } }
      #set-details .explainerAA > div p:first-child {
        font-weight: bold;
        font-size: 2rem; }

a#premiumCount {
  display: grid;
  align-content: center;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 28 28'><circle fill='%23404' r='14' cx='12' cy='12'/><path fill='%23f09f33' d='M12 6l4 6 5-4-2 10H5L3 8l5 4z'/></svg>"), linear-gradient(0.125turn, #f09f33 0%, #cc3f47 20%, #880088 50%, #880088 60%, #cc3f47 80%, #f09f33 100%);
  background-size: 24px, 200% 200%;
  background-position: top 5px left 5px, top right;
  background-repeat: no-repeat;
  color: #FFF;
  border-radius: 15px;
  border: none;
  text-align: center;
  min-height: 150px;
  transition: background-position .2s, background-size .2s; }
  a#premiumCount p {
    line-height: 1.2;
    margin: 0;
    padding: 0;
    text-shadow: 2px 2px 2px rgba(34, 0, 34, 0.5); }
    a#premiumCount p:first-child {
      font-size: 2.5rem;
      font-weight: bold; }
  a#premiumCount:hover {
    background-position: top 5px left 5px, bottom left;
    background-size: 36px, 200% 200%;
    text-decoration: none; }

button.bg-btn {
  position: relative;
  max-width: 240px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  display: block;
  overflow: hidden;
  outline: none;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
  button.bg-btn .img-wrap {
    overflow: hidden;
    border-radius: 50%; }
  button.bg-btn img {
    position: relative;
    z-index: 1;
    border-radius: 50%;
    max-width: 100%;
    backface-visibility: hidden;
    pointer-events: none;
    transition: filter .2s ease, transform .2s ease, opacity .2s ease;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    overflow: hidden; }
  button.bg-btn .bg-css {
    display: none; }
  button.bg-btn .overlay {
    position: absolute;
    z-index: 5;
    border-radius: 50%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 6px #fff;
    color: #FFF;
    display: flex;
    justify-content: center;
    /* align horizontal */
    align-items: center;
    /* align vertical */
    transition: box-shadow .2s ease; }
    @media (min-width: 450px) {
      button.bg-btn .overlay {
        box-shadow: inset 0 0 0 8px #fff; } }
    @media (min-width: 775px) {
      button.bg-btn .overlay {
        box-shadow: inset 0 0 0 10px #fff; } }
    button.bg-btn .overlay p {
      font-size: 1rem;
      margin-bottom: 0;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
      text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.2), 0px 0px 3px rgba(0, 0, 0, 0.3), 1px 1px 1px rgba(0, 0, 0, 0.4);
      font-weight: bold;
      opacity: 0;
      transition: opacity .2s ease; }
      @media (min-width: 450px) {
        button.bg-btn .overlay p {
          font-size: 1.1rem; } }
      @media (min-width: 775px) {
        button.bg-btn .overlay p {
          font-size: 1.2rem; } }
      @media (min-width: 1200px) {
        button.bg-btn .overlay p {
          font-size: 1.25rem; } }
  button.bg-btn.premium {
    border-radius: 50% 50% 8% 50%; }
    button.bg-btn.premium .img-wrap, button.bg-btn.premium .overlay, button.bg-btn.premium img {
      border-radius: 50% 50% 8% 50%; }
    button.bg-btn.premium::after {
      content: '';
      position: absolute;
      z-index: 4;
      bottom: 4px;
      right: 4px;
      width: 80px;
      height: 80px;
      background-color: #880088;
      background-color: #505;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f09f33' d='M12 6l4 6 5-4-2 10H5L3 8l5 4z'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 40px;
      border-radius: 80% 0 8% 0;
      transition: background .2s ease, width .2s ease, height .2s ease; }
  button.bg-btn:hover, button.bg-btn:focus {
    outline: none;
    border: none; }
    button.bg-btn:hover img, button.bg-btn:focus img {
      filter: contrast(0.8) brightness(85%) blur(5px);
      transform: scale(0.9) rotate(2deg); }
    button.bg-btn:hover .overlay, button.bg-btn:focus .overlay {
      box-shadow: inset 0 0 0 10px #fff; }
      @media (min-width: 450px) {
        button.bg-btn:hover .overlay, button.bg-btn:focus .overlay {
          box-shadow: inset 0 0 0 15px #fff; } }
      @media (min-width: 775px) {
        button.bg-btn:hover .overlay, button.bg-btn:focus .overlay {
          box-shadow: inset 0 0 0 18px #fff; } }
      button.bg-btn:hover .overlay p, button.bg-btn:focus .overlay p {
        opacity: 1; }
    button.bg-btn:hover.premium::after, button.bg-btn:focus.premium::after {
      width: 60px;
      height: 60px;
      background-color: #FFF; }

.btn-SET {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 30px;
  background: rgba(68, 0, 68, 0.8);
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px #880088;
  text-decoration: none !important;
  transition: background .2s ease, box-shadow .2s ease; }
  @media (min-width: 1400px) {
    .btn-SET {
      grid-template-rows: 210px;
      grid-template-columns: minmax(320px, 420px) 1fr; } }
  @media (min-width: 1000px) {
    .btn-SET {
      margin-bottom: 0px; } }
  @media (min-width: 1400px) {
    .btn-SET {
      border-radius: 100px 15px 15px 100px; } }
  .btn-SET .thumbWrap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin: -15px 0; }
    @media (min-width: 1400px) {
      .btn-SET .thumbWrap {
        margin: -15px 0 -15px -5px; } }
    .btn-SET .thumbWrap button.bg-btn {
      grid-column-end: span 4;
      grid-row: 1/2;
      grid-column-start: 1;
      z-index: 88;
      margin: 0 auto;
      width: 120px;
      height: 120px;
      pointer-events: none;
      transition: transform .2s ease; }
      @media (min-width: 1400px) {
        .btn-SET .thumbWrap button.bg-btn {
          width: 240px;
          height: 240px; } }
      .btn-SET .thumbWrap button.bg-btn:nth-of-type(2) {
        grid-column-start: 2;
        z-index: 87; }
      .btn-SET .thumbWrap button.bg-btn:nth-of-type(3) {
        grid-column-start: 3;
        z-index: 86; }
      .btn-SET .thumbWrap button.bg-btn:nth-of-type(4) {
        grid-column-start: 4;
        z-index: 85; }
  .btn-SET .titleWrap {
    padding: 30px 45px;
    text-align: center;
    align-self: center; }
    @media (min-width: 1400px) {
      .btn-SET .titleWrap {
        text-align: left; } }
    .btn-SET .titleWrap p {
      transition: transform .2s ease;
      line-height: 1; }
    .btn-SET .titleWrap p.button-title {
      font-size: 24px;
      color: #FFF;
      font-weight: bold; }
      @media (min-width: 660px) {
        .btn-SET .titleWrap p.button-title {
          font-size: 28px; } }
      @media (min-width: 900px) {
        .btn-SET .titleWrap p.button-title {
          font-size: 32px; } }
      @media (min-width: 1200px) {
        .btn-SET .titleWrap p.button-title {
          font-size: 36px; } }
      @media (min-width: 1400px) {
        .btn-SET .titleWrap p.button-title {
          font-size: 38px; } }
      @media (min-width: 1800px) {
        .btn-SET .titleWrap p.button-title {
          font-size: 42px; } }
    .btn-SET .titleWrap p.button-text {
      font-size: 1rem;
      color: #f09f33; }
  .btn-SET.premium-SET {
    position: relative; }
    .btn-SET.premium-SET::after {
      content: '';
      position: absolute;
      z-index: 4;
      bottom: -5px;
      right: -5px;
      width: 80px;
      height: 80px;
      background-color: #505;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f09f33' d='M12 6l4 6 5-4-2 10H5L3 8l5 4z'/%3E%3C/svg%3E");
      background-position: 60% 60%;
      background-repeat: no-repeat;
      background-size: 40px;
      border-radius: 80% 0 8% 0;
      transition: background .2s ease, width .2s ease, height .2s ease; }
  .btn-SET:hover {
    background: #220022;
    box-shadow: inset 0 0 0 2px #FFF; }
    .btn-SET:hover .titleWrap p {
      transform: translateY(10px); }
      @media (min-width: 1400px) {
        .btn-SET:hover .titleWrap p {
          transform: translateX(30px); } }
    .btn-SET:hover .bg-btn {
      transform: translateX(-30px); }
      .btn-SET:hover .bg-btn:nth-of-type(2) {
        transform: translateX(-10px); }
      .btn-SET:hover .bg-btn:nth-of-type(3) {
        transform: translateX(10px); }
      .btn-SET:hover .bg-btn:nth-of-type(4) {
        transform: translateX(30px); }
    .btn-SET:hover::after {
      width: 60px;
      height: 60px;
      background-color: #FFF; }

#container.element-page {
  background: var(--IMG-backgroundColor);
  box-shadow: inset 0 1px 0 0 #F0DFF0;
  padding-top: 30px;
  transition: background .2s ease; }

#element-stage {
  padding: 15px 15px 0 15px;
  height: fit-content;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 1fr 1fr;
  transition: filter .2s ease; }
  @media (min-width: 450px) {
    #element-stage {
      grid-template-columns: 1fr 1fr 1fr; } }
  @media (min-width: 775px) {
    #element-stage {
      padding: 15px 15px 0 0;
      grid-template-columns: repeat(auto-fill, minmax(min(var(--IMG-width), 100%), 1fr)); } }
  #element-stage button {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border: none;
    margin: 0;
    padding: 0;
    border-radius: 15px;
    background: none;
    box-shadow: inset 0 0 0 1px #F0DFF0;
    transition: background .2s ease, box-shadow .2s ease; }
    #element-stage button * {
      pointer-events: none; }
    #element-stage button:hover {
      background: #FFF;
      background: #F8EFF8; }
      #element-stage button:hover svg {
        opacity: .6; }
    #element-stage button:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px #C380C3; }
    #element-stage button img {
      opacity: 0; }
    #element-stage button img, #element-stage button svg {
      display: block;
      min-width: 100%;
      width: 100%;
      height: auto;
      aspect-ratio: var(--IMG-ratio);
      padding: 0; }
    #element-stage button svg {
      padding: var(--IMG-padding);
      animation: fadeIn 1s ease;
      opacity: 1;
      transition: max-width .2s ease, filter .2s ease, opacity .2s ease; }
      #element-stage button svg * {
        transition: fill .2s ease, stroke .2s ease; }
    #element-stage button p {
      height: 30px;
      font-size: 14px;
      line-height: 20px;
      padding: 0 5px 8px 5px;
      margin: 0;
      display: none; }
      @media (min-width: 775px) {
        #element-stage button p {
          display: block; } }
    #element-stage button.hide {
      display: none; }

#divider-stage {
  padding: 0 30px; }

#shapeGrid {
  display: grid;
  grid-template-columns: 100px 1fr;
  margin-bottom: 60px; }
  #shapeGrid .shape-label {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    padding: 1px;
    color: #AAA; }
    #shapeGrid .shape-label p {
      margin: 0; }
    #shapeGrid .shape-label.selected {
      color: #880088; }
      #shapeGrid .shape-label.selected > div {
        border-color: #880088;
        border-width: 2px; }
    #shapeGrid .shape-label#label-head {
      align-items: end;
      line-height: calc(.1 * (100cqw - 100px)); }
      #shapeGrid .shape-label#label-head div {
        height: calc(.1 * (100cqw - 100px)); }
    #shapeGrid .shape-label#label-foot {
      align-items: start;
      line-height: calc(.1 * (100cqw - 100px)); }
      #shapeGrid .shape-label#label-foot div {
        height: calc(.1 * (100cqw - 100px)); }
    #shapeGrid .shape-label > div {
      height: 100%;
      border: 1px solid #AAA;
      border-right: none; }

:root {
  --mask-head-size: calc(.1 * 100cqw);
  /* .1 is ratio H/W */
  --mask-foot-size: calc(.1 * 100cqw); }

#shapeGrid {
  container-type: inline-size;
  overflow: hidden;
  resize: horizontal; }
  #shapeGrid .mask-container {
    container-type: inline-size;
    /* unsure how this affects size or ideal value */ }
  #shapeGrid .mask-box {
    margin-block: calc(-1 * var(--mask-head-size) - 1px) calc(-1 * var(--mask-foot-size) - 1px);
    padding-block: calc(var(--mask-head-size) + 1px) calc(var(--mask-foot-size) - 1px);
    /* preserveAspectRatio="none" width="1000" height="250" transform="scale(1,-1)" transform-origin="50%" */
    mask-image: var(--HEAD-MASK), linear-gradient(transparent calc(var(--mask-head-size) - 1px), black calc(var(--mask-head-size) - 1px), black calc(100% - var(--mask-foot-size) + 1px), transparent calc(100% - (var(--mask-foot-size) + 1px))), var(--FOOT-MASK);
    mask-repeat: no-repeat;
    mask-position: top, top, bottom;
    mask-size: 100%;
    /* may need to increase the width to 101% on the svg masks to compensate for strange sizing behavior in Firefox */
    background-color: #404;
    background-image: var(--main-bg);
    background-size: cover; }
    #shapeGrid .mask-box .box-wrap {
      min-height: 20dvh; }
  #shapeGrid .above-mask-box {
    padding-bottom: calc(.1 * (100cqw - 100px)); }
  #shapeGrid .below-mask-box {
    padding-top: calc(.1 * (100cqw - 100px)); }
  #shapeGrid .box-wrap {
    padding: 30px;
    min-height: 100px; }
  #shapeGrid .AboveBox {
    display: block;
    background: #22347f;
    background-image: var(--above-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top; }
  #shapeGrid .BelowBox {
    display: block;
    background: #aa2068;
    background-image: var(--below-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom; }
  #shapeGrid:hover .AboveBox {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><pattern id="a" width="1000" height="120" patternUnits="userSpaceOnUse" patternTransform="scale(0.5)"><g fill="none" stroke="%23FFF" stroke-width="3" stroke-opacity=".1"><path d="M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30" /></g></pattern><rect fill="url(%23a)" width="100%" height="100%"/></svg>'), linear-gradient(90deg, #808, #22347F, #1c5572); }
  #shapeGrid:hover .BelowBox {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><pattern id="a" width="1000" height="120" patternUnits="userSpaceOnUse" patternTransform="scale(0.5)"><g fill="none" stroke="%23FFF" stroke-width="3" stroke-opacity=".1"><path d="M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30" /></g></pattern><rect fill="url(%23a)" width="100%" height="100%"/></svg>'), linear-gradient(90deg, #cc3f47, #aa2068, #808); }
  #shapeGrid:hover .mask-box {
    background-color: #440044;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2500 1500'%3E%3Cg fill='none' stroke='%23505' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M0 0h250v250H0zm500 500H250v250h500V500zm250-250H500v250h500V250zm0 250h250v250H750zM250 750h250v250H250zM0 1375.5h250V1500H0zM1250 0h-250v250h500V0zm500 0h250v250h-250zm-750 250h250v250h-250zm250 0h250v250h-250zm-250 250h250v250h-250zm750 0h250v250h-250zm-750 250h250v250h-250zm0 250h250v250h-250zm250 0h250v250h-250zm250 0h250v250h-250zm250-250v500h250V750zm-750 500h250v250h-250zm250 0h250v250h-250zm500 0h-250v250h500v-250zM2250 0h250v250h-250zm-250 250h250v250h-250zm0 750h250v250h-250zm250 0h250v250h-250zm0 250h250v250h-250zm-625-500h-250c0-69.04 55.96-125 125-125s125 55.96 125 125zm125 0h125V625c-69.04 0-125 55.96-125 125zm-875 375c0-69.04-55.96-125-125-125v125h125zm-125-125c0-69.04-55.96-125-125-125v125h125zm750-750c0-69.04-55.96-125-125-125v125h125zm-125 0c0-69.04-55.96-125-125-125v125h125zm-125 0c0-69.04-55.96-125-125-125v125h125zm-125 0c0-69.04-55.96-125-125-125v125h125zm1125 1000c138.07 0 250 111.93 250 250v-250h-250zM500 1000v250h250c-138.07 0-250-111.93-250-250zm125 0c0 69.04 55.96 125 125 125v-125H625zm1249.5-875h-.5v.01c-68.57.54-124 56.29-124 124.99h249c0-68.7-55.43-124.45-124-124.99V125h-.5zM0 375v.5h.01C.55 444.35 56.3 500 125 500V250C56.3 250 .55 305.65.01 374.5H0v.5zm125 0v.5h.01C125.55 444.35 181.3 500 250 500V250c-68.7 0-124.45 55.65-124.99 124.5H125v.5zm250 0v-.5h-.01C374.45 305.65 318.7 250 250 250v250c68.7 0 124.45-55.65 124.99-124.5h.01v-.5zm125 0v-.5h-.01C499.45 305.65 443.7 250 375 250v250c68.7 0 124.45-55.65 124.99-124.5h.01v-.5zm1875 750h-.5v.01c-68.85.54-124.5 56.29-124.5 124.99h250c0-68.7-55.65-124.45-124.5-124.99v-.01h-.5zM1375 375v-.5h-.01C1374.45 305.65 1318.7 250 1250 250v250c68.7 0 124.45-55.65 124.99-124.5h.01v-.5zm-625 875h250v-250c0 138.07-111.93 250-250 250zM500 874V749c-138.07 0-250 111.93-250 250h125c0-69.04 55.96-125 125-125zm875 626h125c0-138.07-111.93-250-250-250v125c69.04 0 125 55.96 125 125zm625-1250v125c69.04 0 125 55.96 125 125h125c0-138.07-111.93-250-250-250zm250 250h-125c0 69.04-55.96 125-125 125v125c138.07 0 250-111.93 250-250zm-1125 750h-125c0 138.07 111.93 250 250 250v-125c-69.04 0-125-55.96-125-125zM750 125v125c138.07 0 250-111.93 250-250H875c0 69.04-55.96 125-125 125zm437.5 125h62.5v250h-62.5zm-125 0h62.5v250h-62.5zM2500 125v62.5h-250V125zm0 625v62.5h-250V750zm0 125v62.5h-250V875zM750 750l250-250M750 250 500 500h500zm1000 0-250 250h500zM750 500l250 250m0 0 250-250m-500.5 500.5 123-123M2000 1250l250-250M250 1500l250-250-124.5.5m1372-248 250-250M0 1000l250-250v250L0 1250zm2250-500 250-250v250l-250 250zm-750-250L1750 0v250l-250 250zm250 1000 250 250h-250l-250-250zm0-500h250v500h-250zm125 125v375h62V813zm-125 375h62V938l-62 62zM250.5 1125.5c-69.04 0-125 55.96-125 125h125v125c69.04 0 125-55.96 125-125s-55.96-125-125-125zM1000 1000h250l-125-125zM0 750h250L125 625zm750 500H500v250h250l-125-125zm250 0h250l-125-125zm0-125h250l-125-125zm625-375h-250l125 125zM500 0H250v250h250l125-125zm2000 0h-250l125 125zM625 125h125m0 500v62.5H250V625zm0-125v62.5H250V500zm750 500V875m250 126-125 249-125-250M625 499l125-249 125 250M0 1250l125.5.5M1 500v250h250V500zm1311.5 562.5h125v125h-125zm781.25-218.75a106.7 106.7 0 0 0-31.25 75.44V1000H2250V812.5h-80.8a106.7 106.7 0 0 0-75.45 31.25zm-1687.5-750a106.7 106.7 0 0 0-75.44-31.25H250V250h187.5v-80.8a106.7 106.7 0 0 0-31.25-75.45zM125 62.5V125H62.5v125H250V62.5zM1999.98 1375l125-125 125 125-125 125zm-1213.38 1 88.38-88.4 88.4 88.4-88.4 88.38zm463.4-376h250v250h-250zm812.5-937.5h125v125h-125zm-1313 688 250 250M0 0h2500v1500H0zM1752 752A249.03 249.03 0 0 1 1502 1002c-138.07 0-250-111.93-250-250s111.93-250 250-250 250 111.93 250 250Z'/%3E%3C/g%3E%3C/svg%3E"); }

#SVGBG_UI.divider #svgName {
  border: none;
  padding-bottom: 15px; }
  #SVGBG_UI.divider #svgName h2 {
    color: #CCC;
    font-weight: 400; }
#SVGBG_UI.divider #UI_RANGES label {
  width: 25%;
  padding: 10px 0; }
#SVGBG_UI.divider #UI_RANGES input {
  width: 75%; }
#SVGBG_UI.divider #UI_RANGES > div.disabled label {
  color: #CCC; }
#SVGBG_UI.divider #UI_RANGES > div.disabled input {
  width: 75%; }
#SVGBG_UI.divider #shapeContent {
  border-bottom: 1px solid #EEE; }
#SVGBG_UI.divider #ShapeWindow {
  display: grid;
  justify-content: center;
  align-content: center;
  padding: 40px 0;
  margin: 15px 0 30px 0;
  background: #F8EFF8;
  box-shadow: inset 0 0 0 1px #F0DFF0;
  text-align: center;
  background-position: top center;
  background-size: 100%;
  background-repeat: no-repeat; }
  #SVGBG_UI.divider #ShapeWindow button {
    margin: 0;
    width: fit-content; }

#THE_PITCH {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  padding: 15px;
  background: #F8EFF8;
  box-shadow: inset 0 0 0 1px #F0DFF0;
  border-radius: 15px; }
  @media (min-width: 900px) {
    #THE_PITCH {
      grid-template-columns: 1fr 200px; } }
  @media (min-width: 1400px) {
    #THE_PITCH {
      grid-template-columns: 1fr 1fr; } }
  @media (min-width: 660px) {
    #THE_PITCH {
      padding: 30px; } }
  #THE_PITCH > div {
    padding: 15px 0px;
    max-width: 600px; }
    @media (min-width: 450px) {
      #THE_PITCH > div {
        padding: 15px; } }
    @media (min-width: 660px) {
      #THE_PITCH > div {
        padding: 30px; } }
  #THE_PITCH .thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    align-content: start;
    padding: 0px;
    max-width: 100%; }
    @media (min-width: 900px) {
      #THE_PITCH .thumbs {
        grid-template-columns: 1fr 1fr;
        grid-gap: 15px; } }
    @media (min-width: 1400px) {
      #THE_PITCH .thumbs {
        grid-template-columns: 1fr 1fr 1fr 1fr; } }
    #THE_PITCH .thumbs img {
      border-radius: 15px; }
      @media (min-width: 900px) {
        #THE_PITCH .thumbs img:first-child {
          grid-column: 1 / 3;
          grid-row: 1 / 3; } }

#YESVG {
  background: #FFF;
  box-shadow: inset 0 1px 0 0 #F0DFF0; }
  #YESVG .page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 30px; }
  #YESVG h1 span:first-of-type {
    color: #880088; }
  #YESVG h1 span:last-of-type {
    color: #F0DFF0; }
  #YESVG .collection_grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 60px;
    padding: 60px 0; }
  #YESVG a.element_set {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px; }
    @media (min-width: 900px) {
      #YESVG a.element_set {
        grid-template-columns: 1fr 1fr; } }
    @media (min-width: 1400px) {
      #YESVG a.element_set {
        grid-template-columns: 1fr 1.5fr; } }
    #YESVG a.element_set:hover .element_details {
      background: #808; }
      @media (min-width: 900px) {
        #YESVG a.element_set:hover .element_details {
          background: #808;
          transform: translateX(15px); } }
    #YESVG a.element_set:hover .thumb img {
      filter: brightness(1.2);
      transform: scale(1.05); }
    #YESVG a.element_set:hover .thumbs img {
      filter: brightness(1.2); }
      @media (min-width: 900px) {
        #YESVG a.element_set:hover .thumbs img {
          box-shadow: 5px 5px 15px 1px rgba(0, 0, 0, 0.3); }
          #YESVG a.element_set:hover .thumbs img:nth-of-type(1) {
            transform: scale(1) rotate(-10deg);
            filter: brightness(0.9); }
          #YESVG a.element_set:hover .thumbs img:nth-of-type(2) {
            transform: scale(1.75) rotate(5deg);
            filter: brightness(1.15); }
          #YESVG a.element_set:hover .thumbs img:nth-of-type(3) {
            transform: scale(1.25) rotate(-5deg);
            filter: brightness(0.95); }
          #YESVG a.element_set:hover .thumbs img:nth-of-type(4) {
            transform: scale(1.25) rotate(10deg);
            filter: brightness(1.05); }
          #YESVG a.element_set:hover .thumbs img:nth-of-type(5) {
            transform: scale(1.5) rotate(20deg);
            filter: brightness(1.1); } }
    #YESVG a.element_set:hover .element_details button {
      background: #101; }
    #YESVG a.element_set:hover .element_details button.yellow {
      background: #FFF;
      color: #808; }
    #YESVG a.element_set .thumb img {
      z-index: 99;
      border-radius: 10px;
      transition: transform .2s ease, filter .2s ease; }
    #YESVG a.element_set .thumbs {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
      align-content: start;
      padding: 0px;
      max-width: 100%; }
      #YESVG a.element_set .thumbs img {
        border-radius: 10px;
        transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
        #YESVG a.element_set .thumbs img:first-child {
          grid-column: 1 / 3;
          grid-row: 1 / 3; }
        #YESVG a.element_set .thumbs img:nth-of-type(2) {
          z-index: 5; }
        #YESVG a.element_set .thumbs img:nth-of-type(2) {
          z-index: 5; }
        #YESVG a.element_set .thumbs img:nth-of-type(3) {
          z-index: 1; }
        #YESVG a.element_set .thumbs img:nth-of-type(4) {
          z-index: 3; }
        #YESVG a.element_set .thumbs img:nth-of-type(5) {
          z-index: 4; }
    #YESVG a.element_set .element_details {
      display: grid;
      background: #404;
      padding: 30px;
      border-radius: 10px;
      align-items: center;
      transition: background .2s ease, transform .2s ease; }
      @media (min-width: 900px) {
        #YESVG a.element_set .element_details {
          padding: 30px 40px; } }
      @media (min-width: 1400px) {
        #YESVG a.element_set .element_details {
          padding: 30px 60px; } }
      #YESVG a.element_set .element_details h2 {
        color: #FFF; }
      #YESVG a.element_set .element_details button {
        background: #303;
        color: #FFF;
        border-radius: 99px;
        padding: 5px 10px;
        margin: 0 5px 5px 0;
        border: none;
        font-weight: bold;
        transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
        @media (min-width: 900px) {
          #YESVG a.element_set .element_details button {
            padding: 5px 25px; } }
        #YESVG a.element_set .element_details button:hover {
          box-shadow: 0 0 0 3px #FFF; }
        #YESVG a.element_set .element_details button svg {
          display: inline-block;
          width: 24px;
          margin-right: 8px; }
        #YESVG a.element_set .element_details button:first-of-type {
          margin-right: 10px; }
        #YESVG a.element_set .element_details button.yellow {
          color: #f09f33;
          fill: #f09f33; }
        #YESVG a.element_set .element_details button.orange {
          color: #de6f3d;
          fill: #de6f3d; }
        #YESVG a.element_set .element_details button.red {
          color: #cc3f47;
          fill: #cc3f47; }
        #YESVG a.element_set .element_details button.pink {
          color: #C380C3;
          fill: #C380C3; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
#blogContent a.thumb-collection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  margin: 60px 0;
  border-radius: 15px;
  text-decoration: none;
  box-shadow: 0px 0 0 5px #FFF, -0px 0 0 5px #FFF, 0px 0 0 6px #FFF, -0px 0 0 6px #FFF;
  transition: box-shadow .2s, background .2s; }
  @media (min-width: 450px) {
    #blogContent a.thumb-collection {
      grid-template-columns: 1fr 1fr 1fr; } }
  @media (min-width: 660px) {
    #blogContent a.thumb-collection {
      grid-template-columns: 1fr 1fr 1fr 1fr; } }
  @media (min-width: 775px) {
    #blogContent a.thumb-collection {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } }
  @media (min-width: 900px) {
    #blogContent a.thumb-collection {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-gap: 10px; } }
  @media (min-width: 1200px) {
    #blogContent a.thumb-collection {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } }
  #blogContent a.thumb-collection div, #blogContent a.thumb-collection p, #blogContent a.thumb-collection img {
    transition: transform .2s, background .2s; }
  #blogContent a.thumb-collection:hover {
    box-shadow: 0 0 0 10px #F8EFF8, 0 0 0 10px #F8EFF8, 0 0 0 11px #DAB0DA, 0 0 0 11px #DAB0DA;
    background: #F8EFF8; }
    @media (min-width: 1200px) {
      #blogContent a.thumb-collection:hover > img:nth-of-type(1) {
        transform: translateX(-20px); }
      #blogContent a.thumb-collection:hover > img:nth-of-type(2) {
        transform: translateX(-10px); }
      #blogContent a.thumb-collection:hover > img:nth-of-type(3) {
        transform: translateX(0px); }
      #blogContent a.thumb-collection:hover > img:nth-of-type(4) {
        transform: translateX(10px); }
      #blogContent a.thumb-collection:hover > img:nth-of-type(5) {
        transform: translateX(20px); }
      #blogContent a.thumb-collection:hover > img:nth-of-type(6) {
        transform: translateX(30px); } }
    @media (min-width: 1200px) {
      #blogContent a.thumb-collection:hover > div:first-of-type {
        transform: translateX(-30px); }
      #blogContent a.thumb-collection:hover > div:last-of-type {
        transform: translateX(30px); } }
    #blogContent a.thumb-collection:hover .title {
      background: #606; }
    @media (min-width: 1200px) {
      #blogContent a.thumb-collection:hover {
        box-shadow: 30px 0 0 10px #F8EFF8, -30px 0 0 10px #F8EFF8, 30px 0 0 11px #DAB0DA, -30px 0 0 11px #DAB0DA; } }
  #blogContent a.thumb-collection .title {
    grid-column: 1/-1;
    background: #404;
    color: #FFF;
    border-radius: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 1.5rem; }
    @media (min-width: 660px) {
      #blogContent a.thumb-collection .title {
        grid-column: 1/3; } }
    @media (min-width: 775px) {
      #blogContent a.thumb-collection .title {
        grid-column: 1/-1; } }
    @media (min-width: 900px) {
      #blogContent a.thumb-collection .title {
        grid-column: 1/3; } }
  #blogContent a.thumb-collection .counter {
    border-radius: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    #blogContent a.thumb-collection .counter p {
      text-align: center;
      border: none !important; }
    #blogContent a.thumb-collection .counter p:first-child {
      font-size: 2.4rem;
      font-weight: bold; }
    #blogContent a.thumb-collection .counter p:last-child {
      font-size: .9rem;
      text-transform: uppercase; }
  #blogContent a.thumb-collection img {
    border-radius: 15px; }
    #blogContent a.thumb-collection img:nth-child(4) {
      display: none; }
      @media (min-width: 450px) {
        #blogContent a.thumb-collection img:nth-child(4) {
          display: block; } }
    #blogContent a.thumb-collection img:nth-child(5) {
      display: none; }
      @media (min-width: 450px) {
        #blogContent a.thumb-collection img:nth-child(5) {
          display: block; } }
      @media (min-width: 775px) {
        #blogContent a.thumb-collection img:nth-child(5) {
          display: none; } }
      @media (min-width: 1200px) {
        #blogContent a.thumb-collection img:nth-child(5) {
          display: block; } }
  #blogContent a.thumb-collection p {
    line-height: 1;
    margin: 0;
    padding: 0; }

#imgPreviewWrap {
  display: grid;
  justify-content: center;
  overflow: hidden; }
  #imgPreviewWrap #imgPREVIEW {
    display: grid;
    justify-content: center;
    background-color: var(--IMG-backgroundColor);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    height: auto; }
    #imgPreviewWrap #imgPREVIEW.transparent {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg opacity='.1'%3E%3Cpath fill='%23FFF' d='M10 10h10v10H10zM0 0h10v10H0z'/%3E%3Cpath d='M10 0h10v10H10zM0 10h10v10H0z'/%3E%3C/g%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 20px; }
    #imgPreviewWrap #imgPREVIEW.active {
      margin: 30px; }
    #imgPreviewWrap #imgPREVIEW svg {
      display: block;
      width: 100%;
      height: 100%; }
      #imgPreviewWrap #imgPREVIEW svg * {
        transition: fill .2s ease, stroke .2s ease; }

#imgEXPORT #exportMethods {
  display: flex;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: #F8EFF8;
  box-shadow: inset 0 1px 0 0 #F0DFF0, inset 0 -1px 0 0 #F0DFF0; }
  #imgEXPORT #exportMethods button {
    padding: 20px 0 10px 0;
    text-align: center;
    background: none;
    color: rgba(34, 0, 34, 0.5);
    box-shadow: inset 0 0 0 0 #F8EFF8, inset -1px 1px 0 0 #F0DFF0;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
    #imgEXPORT #exportMethods button.selected {
      background: #FFF;
      color: #880088;
      font-weight: 500;
      box-shadow: inset 0 5px 0 0 #880088, inset -1px 0 0 0 #F0DFF0;
      cursor: context-menu;
      pointer-events: none; }
    #imgEXPORT #exportMethods button:last-of-type {
      box-shadow: inset 0 0 0 0 #880088, inset 0 0 0 0 #F0DFF0; }
      #imgEXPORT #exportMethods button:last-of-type.selected {
        box-shadow: inset 0 5px 0 0 #880088, inset 0 0 0 0 #F0DFF0; }
    #imgEXPORT #exportMethods button:hover:not(.selected) {
      color: #880088;
      background: #F0DFF0; }
    #imgEXPORT #exportMethods button:focus {
      outline: none;
      font-weight: 500;
      color: #202; }
      #imgEXPORT #exportMethods button:focus span {
        background: #F0DFF0;
        border-radius: 6px;
        padding: 3px 8px; }
#imgEXPORT #exportContent, #imgEXPORT #shapeContent {
  padding: 15px; }
  #imgEXPORT #exportContent label, #imgEXPORT #shapeContent label {
    width: auto; }
  #imgEXPORT #exportContent > div, #imgEXPORT #shapeContent > div {
    display: none; }
  #imgEXPORT #exportContent > div.selected, #imgEXPORT #shapeContent > div.selected {
    display: block; }
#imgEXPORT .uiRow {
  display: flex;
  align-items: center;
  padding: 5px 0;
  justify-content: space-between; }
  #imgEXPORT .uiRow.uiQuarters {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr .7fr; }
#imgEXPORT .shapeOptionCycle {
  display: grid;
  grid-template-columns: 2.5fr 7.5fr; }
  #imgEXPORT .shapeOptionCycle > div {
    display: grid;
    grid-template-columns: 1fr 5.5fr 1fr;
    box-shadow: 0 0 0 1px #F0DFF0;
    border-radius: 4px; }
  #imgEXPORT .shapeOptionCycle p {
    text-align: center;
    background: none;
    margin: 0;
    line-height: 30px; }
#imgEXPORT .uiWxH {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
  padding: 5px 0; }
  #imgEXPORT .uiWxH input {
    width: 100%;
    padding-right: 12px;
    z-index: 98;
    cursor: text; }
    #imgEXPORT .uiWxH input:focus {
      outline: none;
      box-shadow: inset 0 0 0 2px #880088; }
  #imgEXPORT .uiWxH > div {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1px; }
    #imgEXPORT .uiWxH > div::before {
      content: "PX";
      position: absolute;
      display: block;
      color: #880088;
      top: 1px;
      right: 0;
      bottom: 1px;
      width: 24px;
      padding: 5px 0;
      z-index: 99;
      pointer-events: none; }
#imgEXPORT button.btn-purple, #imgEXPORT button.btn-subtle {
  font-size: 1rem;
  padding: 10px 20px;
  margin: 0 5px 10px 0; }
#imgEXPORT button.btn-purple:hover, #imgEXPORT button.btn-purple:focus {
  outline: none;
  background: #505; }
#imgEXPORT #UI_NOTE.hide {
  display: none; }
#imgEXPORT #UI_NOTE > div {
  text-align: center;
  padding: 15px;
  background: #202;
  color: #FFF;
  border-radius: 0 0 10px 10px; }
#imgEXPORT #UI_NOTE a {
  color: #DAB0DA; }
  #imgEXPORT #UI_NOTE a:hover {
    color: #F0DFF0; }
#imgEXPORT #UI_NOTE p {
  margin: 0; }

#SVGBG_UI h3 {
  margin: 15px 0; }

#svgCustomize .color_row {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center; }
  #svgCustomize .color_row .color_row_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr; }
#svgCustomize .color_input {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  grid-gap: 5px;
  border-radius: 3px;
  padding: 4px 6px;
  background-color: #FFF;
  cursor: pointer; }
  #svgCustomize .color_input:hover {
    background-color: #F0DFF0; }
  #svgCustomize .color_input input {
    background: none;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 5px 5px 0 0;
    border-radius: 0;
    text-align: left;
    line-height: 26px;
    padding: 0 0 0 4px;
    transition: box-shadow .2s ease;
    box-shadow: inset 0 0 0 0 #880088, inset 0 0px 0 0 #FFF; }
    #svgCustomize .color_input input:focus {
      cursor: text;
      border: none;
      box-shadow: inset 0 -2px 0 0 #880088, inset 0 -30px 0 0 #FFF; }
  #svgCustomize .color_input .color_preview {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 99px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }

#UI_CHECKBOXES > div {
  display: grid;
  grid-template-columns: 1fr 50px;
  align-items: center; }
  #UI_CHECKBOXES > div label {
    width: 100%; }
#UI_CHECKBOXES input[type=checkbox] {
  accent-color: #880088;
  width: 20px;
  height: 20px;
  cursor: pointer; }

#UI_OPTIONS > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center; }
#UI_OPTIONS .select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  width: 100%;
  min-width: 80px;
  max-width: 250px;
  border: 1px solid #F0DFF0;
  border-radius: 0.25em;
  padding: 0;
  cursor: pointer;
  line-height: 1.1;
  background-color: #FFF;
  background-image: linear-gradient(to top, #FCF7FC, #FFF 40%); }
#UI_OPTIONS .select::after {
  pointer-events: none;
  justify-self: end;
  content: "";
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23808" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>'); }
#UI_OPTIONS select,
#UI_OPTIONS .select:after {
  grid-area: select; }
#UI_OPTIONS select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 4px 10px;
  margin: 0;
  width: 100%;
  cursor: inherit;
  outline: none;
  cursor: pointer; }
#UI_OPTIONS select:hover {
  background: #F8EFF8; }
#UI_OPTIONS select:focus-within, #UI_OPTIONS select:focus {
  box-shadow: 0 0 0 2px #808; }

.jscolor-picker-wrap .jscolor-picker {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 2px 2px 5px 1px rgba(0, 0, 0, 0.1); }
  .jscolor-picker-wrap .jscolor-picker > div:nth-child(3) > div:first-child::before, .jscolor-picker-wrap .jscolor-picker > div:nth-child(1) > div:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
  .jscolor-picker-wrap .jscolor-picker .jscolor-palette > div div {
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.jscolor-picker-wrap .jscolor_btn {
  display: block;
  position: absolute;
  left: 0;
  bottom: -26px;
  padding: 0 15px;
  max-width: 405px;
  overflow: hidden;
  height: 24px;
  line-height: 24px !important;
  white-space: nowrap;
  border: 0px solid white;
  color: black;
  font: 12px sans-serif;
  text-align: center;
  cursor: pointer;
  background: #F8EFF8;
  border-radius: 99px; }
  .jscolor-picker-wrap .jscolor_btn:hover {
    color: #880088;
    text-decoration: underline; }

/* Toggle Button */
.ui-switch {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  border: 0;
  outline: 0;
  cursor: pointer;
  margin: 0; }
  .ui-switch:hover:after, .ui-switch:focus:after {
    background: #DAB0DA; }
  .ui-switch:hover:checked:after, .ui-switch:focus:checked:after {
    background: #880088; }
  .ui-switch:hover:before, .ui-switch:focus:before {
    background: #F8EFF8;
    box-shadow: none;
    box-shadow: 0 0 0 2px #880088; }
  .ui-switch:hover:checked:before, .ui-switch:focus:checked:before {
    background: #505;
    box-shadow: 0 0 0 2px #505; }

.ui-switch:after {
  content: '';
  width: 54px;
  height: 18px;
  display: inline-block;
  background: #F0DFF0;
  border-radius: 18px;
  clear: both;
  box-shadow: inset 0 0 0 1px rgba(136, 0, 136, 0.1); }

.ui-switch:before {
  content: '';
  width: 24px;
  height: 24px;
  display: block;
  position: absolute;
  left: 0;
  top: -4px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 0 0 1px rgba(68, 0, 68, 0.1), 1px 1px 4px 0 rgba(102, 0, 102, 0.4); }

.ui-switch:checked:before {
  left: 32px;
  background: #880088;
  box-shadow: none; }

.ui-switch:checked:after {
  background: #880088;
  background: #C380C3;
  box-shadow: inset 0 0 0 1px rgba(68, 0, 68, 0.5); }

.ui-switch,
.ui-switch:before,
.ui-switch:after {
  transition: background .2s ease, left .2s ease, box-shadow .2s ease; }

.premium-header {
  color: #FFF;
  grid-column: 1 / -1;
  position: relative; }
  .premium-header h1, .premium-header h2 {
    font-size: 24px;
    line-height: 1;
    text-align: center;
    padding: 20px 30px;
    background: #880088; }
    @media (min-width: 660px) {
      .premium-header h1, .premium-header h2 {
        font-size: 28px;
        line-height: 1.5; } }
    @media (min-width: 775px) {
      .premium-header h1, .premium-header h2 {
        font-size: 32px;
        line-height: 1.4; } }
    @media (min-width: 900px) {
      .premium-header h1, .premium-header h2 {
        font-size: 36px;
        line-height: 1.2; } }
    @media (min-width: 1200px) {
      .premium-header h1, .premium-header h2 {
        font-size: 48px;
        line-height: 1; } }
  @media (min-width: 775px) {
    .premium-header {
      padding: 30px 75px 5px 75px; }
      .premium-header h1, .premium-header h2 {
        position: relative;
        min-height: 98px;
        color: #FFF;
        border-radius: 4px;
        box-shadow: inset 0 0 0 1px rgba(170, 32, 104, 0.5), inset 0 0 30px rgba(195, 128, 195, 0.5), 0 6px 25px rgba(0, 0, 0, 0.5); }
        .premium-header h1::before, .premium-header h1::after, .premium-header h2::before, .premium-header h2::after {
          content: '';
          position: absolute;
          z-index: -1;
          left: -86px;
          top: 40px;
          display: block;
          width: 115px;
          height: 0px;
          border: 49px solid #707;
          border-right: 30px solid #505;
          border-left-color: transparent;
          transform: rotate(-8deg);
          background: #707;
          clip-path: polygon(100% 0%, 100% 100%, 0 100%, 60% 45%, 0 0); }
        .premium-header h1::after, .premium-header h2::after {
          left: auto;
          right: -86px;
          border-left: 30px solid #505;
          border-right: 30px solid transparent;
          transform: rotate(5deg);
          clip-path: polygon(100% 0%, 40% 45%, 100% 100%, 0 100%, 0 0); } }

.cover {
  background-attachment: scroll !important;
  background-size: cover !important;
  background-position: center !important; }

.zoom {
  background-attachment: scroll !important;
  background-size: 200% !important;
  background-position: center !important; }

.full {
  background-size: 115% !important; }

.contain {
  background-size: 100% !important;
  background-attachment: scroll !important; }

.cover-left {
  background-attachment: scroll !important;
  background-size: cover !important;
  background-position: left !important; }

.cover-right {
  background-attachment: scroll !important;
  background-size: cover !important;
  background-position: right !important; }

.top {
  background-position: top !important; }

.bottom {
  background-position: bottom !important; }

.left {
  background-position: left !important; }

.right {
  background-position: right !important; }

#svgCustomize label, #exportContent label, #shapeContent label {
  width: 25%;
  display: inline-block;
  padding: 5px 0;
  margin: 0; }

#svgCustomize input {
  width: 75%;
  line-height: 1.4rem; }

#svgCustomize .colr1 input {
  width: 100%; }

#svgCustomize .colr2 input {
  width: 50%; }

#svgCustomize .colr3 input, #svgCustomize .colr4 input, #svgCustomize .colr5 input, #svgCustomize .colr6 input, #svgCustomize .colr7 input, #svgCustomize .colr8 input, #svgCustomize .colr9 input {
  width: 33.3333333%; }

#svgCustomize .colr4 .colr4-6 input {
  width: 100% !important; }

#svgCustomize .colr5 .colr4-6 input {
  width: 50% !important; }

#svgCustomize .colr7 .colr7-9 input {
  width: 100% !important; }

#svgCustomize .colr8 .colr7-9 input {
  width: 50% !important; }

#svgCustomize .colr1 .colr4-6, #svgCustomize .colr1 .colr7-9, #svgCustomize .colr2 .colr4-6, #svgCustomize .colr2 .colr7-9, #svgCustomize .colr3 .colr4-6, #svgCustomize .colr3 .colr7-9 {
  display: none; }

#svgCustomize .colr4 .colr7-9, #svgCustomize .colr5 .colr7-9, #svgCustomize .colr6 .colr7-9 {
  display: none; }

#credits {
  font-size: 0.8rem;
  margin: 0;
  color: #999; }
  #credits a {
    color: #222; }
  #credits a:hover {
    color: #73B; }

.heading-text {
  width: 52%;
  display: inline-block; }

.heading-button {
  width: 48%;
  display: inline-block;
  text-align: right; }

#controls button {
  border: none; }

.btn {
  background: #FFF;
  color: #880088;
  border-radius: 50px;
  padding: 4px 10px;
  transition: color 1s, background 0.2s; }

.btn:hover {
  background: #F8EFF8;
  color: #000;
  text-decoration: none; }

.btn:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px #CCC, inset 0 0 0 2px #FFF; }

.separator {
  color: #DDD; }

#custom-color {
  display: flex;
  margin: 4px 0 12px 0; }
  #custom-color #the_colors {
    display: block;
    width: 75%; }

#svgCustomize label#color-lock-label {
  display: block;
  width: 16%; }

#color-lock-btn {
  display: block;
  width: 9%;
  height: 28px;
  margin: 0;
  padding: 0;
  align-items: center;
  background: #FFF;
  transition: background 0.2s, color 1s; }
  #color-lock-btn:hover, #color-lock-btn:focus {
    color: #73B;
    background: #EEE;
    background: #F8EFF8;
    outline: none; }
    #color-lock-btn:hover svg#padlock .shackle, #color-lock-btn:focus svg#padlock .shackle {
      fill: #777;
      fill: #880088; }
    #color-lock-btn:hover svg#padlock .lock-base, #color-lock-btn:focus svg#padlock .lock-base {
      fill: #777;
      fill: #880088; }
  #color-lock-btn svg#padlock {
    width: 12px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-2px); }
    #color-lock-btn svg#padlock .shackle {
      fill: #CCC;
      fill: #C380C3;
      transition: fill 1s; }
    #color-lock-btn svg#padlock .lock-base {
      fill: #CCC;
      fill: #C380C3;
      transition: fill 1s; }

.locked .shackle {
  transform: translateY(3px);
  animation: lock 0.2s ease; }

@keyframes lock {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(3px); } }
.unlocked .shackle {
  transform: translateY(0);
  animation: unlock 0.2s ease; }

@keyframes unlock {
  0% {
    transform: translateY(3px); }
  100% {
    transform: translateY(0); } }
.hiddenColor, .hiddenSliderInit {
  display: none; }

.showSlider {
  display: flex;
  opacity: 1;
  height: 2.1rem;
  transform: translateX(0);
  animation: expand 0.2s ease-in-out;
  align-items: center; }

@keyframes expand {
  0% {
    opacity: 0;
    height: 0;
    transform: translateX(0); }
  50% {
    opacity: 0;
    height: 2rem;
    transform: translateX(0); }
  100% {
    opacity: 1;
    height: 2rem;
    transform: translateX(0); } }
.hideSlider {
  opacity: 0;
  height: 0px;
  transform: translateX(-1000px);
  animation: shrink 0.2s ease-in-out; }

@keyframes shrink {
  0% {
    opacity: 1;
    height: 2rem;
    transform: translateX(0); }
  50% {
    opacity: 0;
    height: 2rem;
    transform: translateX(0); }
  100% {
    opacity: 0;
    height: 0;
    transform: translateX(0); } }
input[type=text], input[type=password] {
  text-align: center;
  border: 1px solid #FFF;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 5px 0;
  border-radius: 3px;
  text-transform: uppercase; }

input[type=text]:focus, input[type=password]:focus {
  outline: none;
  border: 1px solid #333;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 0 3px #333;
  z-index: 999;
  position: relative; }

input[type=text]::selection, input[type=password]::selection {
  color: #FFF;
  background: #000; }

input[type=text]::-moz-selection, input[type=password]::-moz-selection {
  color: #FFF;
  background: #000; }

select {
  padding: 2px 6px;
  border: none;
  border-radius: 0 !important; }
  select option {
    background: #FFF; }
  select option:hover {
    background: #EEE; }

select:hover {
  background: #CCC; }

#uiDropdown {
  width: 100%;
  margin: 0 auto;
  position: relative; }

#dropdownBtn {
  position: relative;
  z-index: 1;
  width: 100%; }

#dropdownContent {
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.3), 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
  z-index: 2; }
  #dropdownContent button {
    text-transform: uppercase;
    width: 100%;
    background: #EEE;
    color: #777;
    padding: 5px 0 5px 15px;
    font-size: 0.8rem;
    border-top: 1px solid #DDD;
    text-align: left;
    transition: color 1s, background 0.2s; }
  #dropdownContent button:hover {
    background: #FFF;
    color: #000; }
  #dropdownContent button:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px #AAA, inset 0 0 0 2px #FFF; }
  #dropdownContent .dropdownSelection {
    background: #FFF;
    color: #73B; }

.showDropdown {
  display: block; }

.hideDropdown, .filterOut {
  display: none; }

textarea {
  font-size: 0.75rem;
  overflow-y: scroll;
  overflow-x: hidden; }

.blendBtn {
  width: 10% !important; }

.varyBtn {
  width: 55% !important; }

#blendMode, #varyMode {
  width: 55%;
  display: inline-block;
  text-align: center;
  margin: 0; }

input[type=button] {
  border: none;
  cursor: pointer;
  border-radius: 3px; }

.noselect {
  user-select: none; }

.hideUI {
  opacity: 0;
  animation: hide-UI 0.25s ease-in-out; }

@keyframes hide-UI {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
.showUI {
  opacity: 1;
  animation: show-UI 0.25s ease-in-out; }

@keyframes show-UI {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/* <home> */
.welcome {
  color: #FFF;
  font-weight: 300; }
  .welcome br {
    display: none; }
    @media (min-width: 450px) {
      .welcome br {
        display: inline; } }
  .welcome h1 {
    font-weight: bold;
    line-height: 1.2;
    font-size: 2.2rem; }
    @media (min-width: 450px) {
      .welcome h1 {
        font-size: 2.5rem; } }
    @media (min-width: 775px) {
      .welcome h1 {
        font-size: 3rem; } }
    @media (min-width: 1200px) {
      .welcome h1 {
        font-size: 3.5rem; } }
    @media (min-width: 1800px) {
      .welcome h1 {
        font-size: 4rem; } }
  .welcome .welcome-description {
    padding: 30px 15px;
    text-align: center;
    background-color: #330033;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.5'%3E%3Cpath fill='%23330033' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23330033' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23330033' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23330033' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23330033' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%233a003a' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23400040' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23470047' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%234e004e' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23550055' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    background-position: center; }
    @media (min-width: 660px) {
      .welcome .welcome-description {
        padding: 120px 30px 30px 30px; } }
    .welcome .welcome-description p {
      color: #DAB0DA;
      line-height: 1.4;
      font-size: 1.5rem; }
      @media (min-width: 450px) {
        .welcome .welcome-description p {
          font-size: 1.6rem; } }
      @media (min-width: 775px) {
        .welcome .welcome-description p {
          font-size: 1.8rem; } }
      @media (min-width: 1200px) {
        .welcome .welcome-description p {
          font-size: 2rem; } }
      @media (min-width: 1800px) {
        .welcome .welcome-description p {
          font-size: 2.2rem; } }

#demo {
  height: 50vh;
  min-height: 360px;
  padding-top: 30px; }
  #demo #tryMe {
    margin: 0 auto;
    max-width: 600px;
    position: relative;
    top: 0;
    left: 0; }
    #demo #tryMe #tryMeArrow {
      position: absolute;
      top: 75px;
      left: 0;
      z-index: 99;
      transform: rotate(5deg) translate(-5px, 0) scale(1);
      animation: floatingArrow 2s ease-in-out infinite;
      animation-iteration-count: 5;
      animation-delay: 5s; }
    #demo #tryMe img {
      width: 200px;
      height: 100px; }

@keyframes floatingArrow {
  0% {
    transform: translate(-5px, 0) rotate(5deg) scale(1); }
  50% {
    transform: translate(10px, 15px) rotate(10deg) scale(1); }
  100% {
    transform: translate(-5px, 0) rotate(5deg) scale(1); } }
#section-optimize h2 {
  text-align: center; }

.frontpage p {
  margin-bottom: 10px !important; }
.frontpage br {
  display: none; }
  @media (min-width: 775px) {
    .frontpage br {
      display: block; } }

/*  </home>  */
/*  <page elements>  */
.text-block {
  background: #FFF;
  color: #202;
  padding: 30px;
  margin: 15px 0 30px 0; }
  @media (min-width: 660px) {
    .text-block {
      padding: 30px 60px;
      margin: 30px 15px; } }
  @media (min-width: 1200px) {
    .text-block {
      padding: 60px 120px;
      margin: 60px 15px; } }

ul.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  padding: 0;
  list-style: none; }
  @media (min-width: 775px) {
    ul.category-grid {
      grid-template-columns: 1fr 1fr;
      grid-gap: 30px; } }
  @media (min-width: 1200px) {
    ul.category-grid {
      grid-template-columns: 1fr 1fr 1fr; } }
  ul.category-grid a {
    display: grid;
    grid-template-columns: 24px 1fr;
    grid-gap: 8px;
    padding: 8px;
    backface-visibility: hidden;
    /* prevent flickering */
    border-radius: 5px;
    background: #FFF;
    transition: box-shadow .2s ease, transform .2s ease, color .2s ease; }
    @media (min-width: 660px) {
      ul.category-grid a {
        grid-template-columns: 48px 1fr;
        grid-gap: 15px;
        padding: 15px; } }
    ul.category-grid a svg {
      display: block;
      width: 24px;
      fill: #880088;
      transition: fill .2s ease, transform .2s ease; }
      @media (min-width: 660px) {
        ul.category-grid a svg {
          width: 48px; } }
    ul.category-grid a:hover {
      box-shadow: inset 0 -8px 0 0 #C380C3, inset 0 -78px 0 0 #F8EFF8;
      text-decoration: none;
      transform: translateY(-5px);
      color: #404; }
      ul.category-grid a:hover svg {
        fill: #f09f33;
        transform: scale(1.5); }
  ul.category-grid p {
    line-height: 24px;
    margin: 0;
    font-weight: bold; }
    @media (min-width: 775px) {
      ul.category-grid p {
        line-height: 48px; } }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px; }
  @media (min-width: 900px) {
    .card-grid {
      grid-template-columns: 1fr 1fr; } }
  .card-grid a {
    overflow: hidden;
    display: grid;
    grid-template-columns: 78px 1fr;
    grid-gap: 15px;
    border-radius: 5px;
    background: #FFF;
    transition: background .2s ease, transform .2s ease, color .2s ease; }
    .card-grid a .svg-wrap {
      background: #F8EFF8;
      padding: 15px;
      transition: fill .2s ease, background .2s ease; }
    .card-grid a svg {
      display: block;
      width: 48px;
      fill: none;
      stroke: #880088;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: fill .2s ease, transform .2s ease, background .2s ease; }
    .card-grid a .content-wrap {
      padding: 15px; }
    .card-grid a:hover {
      color: #404;
      text-decoration: none;
      transform: translateY(-5px);
      background: #F8EFF8; }
      .card-grid a:hover .svg-wrap {
        background: #F0DFF0; }
      .card-grid a:hover svg {
        stroke: #cc3f47;
        transform: scale(1.2); }
  .card-grid p {
    line-height: 48px;
    margin: 0;
    font-weight: bold; }

#svgSearch {
  display: none;
  padding-bottom: 15px; }
  #svgSearch.show {
    display: block; }
  #svgSearch input {
    width: 100%;
    text-align: left;
    padding: 8px 10px 8px 36px;
    color: #808;
    text-transform: none;
    border: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    border-radius: 99px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23808"><path d="M22.1 20.1l-4.8-4.8C18.4 13.8 19 12 19 10c0-5-4-9-9-9s-9 4-9 9 4 9 9 9c2 0 3.8-.6 5.3-1.7l4.8 4.8c.6.6 1.4.6 2 0 .5-.6.5-1.5 0-2zM10 16.5c-3.6 0-6.5-2.9-6.5-6.5S6.4 3.5 10 3.5s6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5z"></path></svg>');
    background-size: 19px;
    background-repeat: no-repeat;
    background-position: left 10px top 11px;
    font-size: 1rem;
    transition: color .2s, box-shadow .2s; }
    #svgSearch input:focus {
      box-shadow: 0 0 0 2px #440044; }

#noElements {
  display: none;
  font-weight: bold;
  text-align: center;
  grid-column: 1/-1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  padding: 60px; }
  #noElements.show {
    display: block; }

/*  </page elements>   */
/*  <subscribe page>   */
.section-pad {
  padding: 60px 20px 40px 20px; }
  @media (min-width: 660px) {
    .section-pad {
      padding: 60px 30px; } }
  @media (min-width: 900px) {
    .section-pad {
      padding: 80px 40px; } }
  @media (min-width: 1200px) {
    .section-pad {
      padding: 120px 60px; } }

p.boost {
  font-size: 1.3rem; }
  @media (min-width: 450px) {
    p.boost {
      font-size: 1.4rem; } }
  @media (min-width: 660px) {
    p.boost {
      font-size: 1.5rem; } }
  @media (min-width: 900px) {
    p.boost {
      font-size: 1.6rem; } }
  @media (min-width: 1200px) {
    p.boost {
      font-size: 1.7rem; } }
  @media (min-width: 1400px) {
    p.boost {
      font-size: 1.8rem; } }

#section-subscribe, .LP {
  background: #FFF; }
  #section-subscribe h2, .LP h2 {
    font-size: 24px;
    color: #404; }
    @media (min-width: 450px) {
      #section-subscribe h2, .LP h2 {
        font-size: 27px; } }
    @media (min-width: 660px) {
      #section-subscribe h2, .LP h2 {
        font-size: 32px; } }
    @media (min-width: 900px) {
      #section-subscribe h2, .LP h2 {
        font-size: 36px; } }
    @media (min-width: 1200px) {
      #section-subscribe h2, .LP h2 {
        font-size: 44px; } }
    @media (min-width: 1400px) {
      #section-subscribe h2, .LP h2 {
        font-size: 48px; } }

#section-subscribe {
  box-shadow: inset 0 1px 0 0 #F0DFF0;
  /*
  #subscribe-hero{
  	h1{
  		font-size: 32px;
  		@include md-phone-up {font-size: 36px;}
  		@include sm-tablet-up {font-size: 40px;}
  		@include lg-tablet-up {font-size: 48px;}
  		@include sm-desktop-up {font-size: 56px;}
  	}
  	display: flex;
  	justify-content: center;
  	min-height: 250px;
  	@include sm-tablet-up {min-height: 300px;}
  	@include sm-desktop-up {min-height: 350px;}
  	.section-wrap{align-self: center;}
  	background-color: #404;
  	background-image: 
  		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 130'%3E%3Cpath d='M1600 130H0V20c400 0 400 100 800 100s400-100 800-100v110z' fill='%23FFF'/%3E%3ClinearGradient id='bg' gradientUnits='userSpaceOnUse' x1='0' y1='60' x2='1600' y2='60'%3E%3Cstop offset='0' stop-color='%23808'/%3E%3Cstop offset='.5' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cpath d='M0 10c400 0 400 100 800 100s400-100 800-100' fill='none' stroke='url(%23bg)' stroke-width='5'/%3E%3C/svg%3E"),
  		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23660066'/%3E%3Cstop offset='1' stop-color='%23440044'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23550055'/%3E%3Cstop offset='1' stop-color='%23440044'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.1' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  	background-size: 100% 50px, cover;
  	background-position: bottom center, center;
  	background-repeat: no-repeat;	
  	padding-bottom: 50px;
  	@include sm-tablet-up {
  		background-size: 100% 100px, cover;
  	}
  }*/ }
  #section-subscribe h1 {
    color: #404;
    line-height: 1.2; }
  #section-subscribe #subscribe-hero, #section-subscribe .section-CTA {
    background-color: #303;
    text-align: center; }
    #section-subscribe #subscribe-hero h1, #section-subscribe #subscribe-hero h2, #section-subscribe .section-CTA h1, #section-subscribe .section-CTA h2 {
      color: #FFF;
      line-height: 1.2; }
      #section-subscribe #subscribe-hero h1.d-emph, #section-subscribe #subscribe-hero h2.d-emph, #section-subscribe .section-CTA h1.d-emph, #section-subscribe .section-CTA h2.d-emph {
        color: #DAB0DA; }
    #section-subscribe #subscribe-hero p, #section-subscribe .section-CTA p {
      color: #DAB0DA; }
    #section-subscribe #subscribe-hero a, #section-subscribe .section-CTA a {
      margin-top: 30px; }
  #section-subscribe #subscribe-cols {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
    padding-bottom: 30px; }
    @media (min-width: 1200px) {
      #section-subscribe #subscribe-cols {
        grid-template-columns: 1.5fr 2fr; } }
    @media (min-width: 1400px) {
      #section-subscribe #subscribe-cols {
        grid-gap: 60px; } }
    @media (min-width: 900px) {
      #section-subscribe #subscribe-cols {
        max-width: 900px; } }
    @media (min-width: 1200px) {
      #section-subscribe #subscribe-cols {
        max-width: 1520px; } }
    @media (min-width: 1200px) {
      #section-subscribe #subscribe-cols {
        padding-bottom: 60px; } }
  #section-subscribe .desc-wrap h2 {
    padding-bottom: 15px; }
  #section-subscribe .desc-wrap p {
    margin: 0 auto;
    max-width: 700px;
    text-align: left;
    margin-bottom: 30px; }

#section-gfx {
  padding-top: 0px;
  max-width: 600px;
  margin: 0 auto; }
  @media (min-width: 900px) {
    #section-gfx {
      max-width: 1000px; } }
  @media (min-width: 1200px) {
    #section-gfx {
      max-width: 1520px; } }
  #section-gfx h2 {
    padding-bottom: 30px; }
  #section-gfx.gfx-mini {
    padding-bottom: 15px; }
    @media (min-width: 1200px) {
      #section-gfx.gfx-mini {
        max-width: 1200px; } }

.gfx-mini .gfx-card-wrap {
  grid-gap: 30px 45px; }
  .gfx-mini .gfx-card-wrap .gfx-card {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-gap: 10px;
    padding: 0px;
    background: #FFF; }
    .gfx-mini .gfx-card-wrap .gfx-card svg:first-child, .gfx-mini .gfx-card-wrap .gfx-card img:first-child {
      grid-column: span 1;
      grid-row: span 1; }
    .gfx-mini .gfx-card-wrap .gfx-card:nth-child(3) {
      display: grid; }

.gfx-card-wrap {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  grid-gap: 30px; }
  @media (min-width: 900px) {
    .gfx-card-wrap {
      grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1200px) {
    .gfx-card-wrap {
      grid-template-columns: 1fr 1fr 1fr; } }
  .gfx-card-wrap .gfx-card {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    background: #F8EFF8;
    border-radius: 20px;
    padding: 15px; }
    .gfx-card-wrap .gfx-card.gfx-no-pad svg {
      padding: 0px;
      background: #F8EFF8; }
    .gfx-card-wrap .gfx-card svg, .gfx-card-wrap .gfx-card img {
      display: block;
      width: 100%;
      height: auto;
      background: #DAB0DA;
      border-radius: 15px; }
      .gfx-card-wrap .gfx-card svg:first-child, .gfx-card-wrap .gfx-card img:first-child {
        grid-column: span 2;
        grid-row: span 2; }
    .gfx-card-wrap .gfx-card.gfx-expired svg {
      background: #F0DFF0;
      opacity: 50%; }
    .gfx-card-wrap .gfx-card svg {
      aspect-ratio: 1/1;
      padding: 15%; }
    .gfx-card-wrap .gfx-card p {
      grid-column: 1 / -1;
      margin: 0;
      text-align: left; }
    .gfx-card-wrap .gfx-card:nth-child(3) {
      display: none; }
    .gfx-card-wrap .gfx-card:nth-child(8), .gfx-card-wrap .gfx-card:nth-child(9) {
      display: none; }
    @media (min-width: 900px) {
      .gfx-card-wrap .gfx-card:nth-child(8), .gfx-card-wrap .gfx-card:nth-child(9) {
        display: grid; } }
    @media (min-width: 1200px) {
      .gfx-card-wrap .gfx-card:nth-child(3) {
        display: grid; } }

.social-card-wrap .social-img-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 15px; }

.social-blurb {
  background: #F8EFF8;
  border-radius: 10px;
  padding: 15px;
  margin: 30px 0; }
  @media (min-width: 660px) {
    .social-blurb {
      padding: 30px; } }
  .social-blurb a, .social-blurb button {
    border: none; }

.coupon-box {
  padding: 15px;
  max-width: 550px;
  margin: 0 auto;
  font-size: 1rem;
  border-radius: 10px; }
  @media (min-width: 660px) {
    .coupon-box {
      padding: 30px 60px 15px 60px; } }
  .coupon-box .lead {
    font-size: 1.2rem; }
    .coupon-box .lead .tag {
      font-size: 1.2rem; }
  .coupon-box .tag {
    font-weight: bold; }

#DEMO-VIDEO {
  max-width: 1280px;
  max-height: 720px;
  margin: 0 auto; }
  #DEMO-VIDEO video {
    border-radius: 20px;
    width: 100% !important;
    height: auto !important; }

#section-workflow h2 {
  text-align: center; }

.section-centered {
  text-align: center; }

.icon-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .icon-buttons:hover a {
    color: #AAA; }
    .icon-buttons:hover a svg .hover {
      fill: #AAA; }
    .icon-buttons:hover a svg .hover-white {
      fill: #FFF; }
  .icon-buttons a {
    display: inline-block;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    color: #202;
    transition: color .2s ease, background .2s ease; }
    .icon-buttons a svg {
      display: inline-block;
      width: 100px;
      heigh: 100px; }
      .icon-buttons a svg * {
        transition: fill .2s ease; }
    .icon-buttons a p {
      margin: 0; }
    .icon-buttons a:hover {
      color: #880088;
      background: #F8EFF8;
      text-decoration: none; }
      .icon-buttons a:hover svg .hover {
        fill: #880088; }
      .icon-buttons a:hover svg .hover-white {
        fill: #F8EFF8; }

.icon-boxes {
  display: grid;
  grid-gap: 30px;
  padding: 0;
  max-width: 1400px;
  margin: 0 auto; }
  @media (min-width: 660px) {
    .icon-boxes {
      grid-gap: 30px; } }
  @media (min-width: 1200px) {
    .icon-boxes {
      grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1400px) {
    .icon-boxes {
      grid-gap: 60px; } }

.icon-box {
  display: grid;
  grid-gap: 15px;
  padding: 20px;
  background: #F8EFF8;
  border-radius: 10px;
  align-items: center;
  max-width: 660px;
  margin: 0 auto; }
  @media (min-width: 450px) {
    .icon-box {
      grid-template-columns: 48px 1fr;
      grid-gap: 15px;
      padding: 20px; } }
  @media (min-width: 660px) {
    .icon-box {
      grid-template-columns: 72px 1fr; } }
  @media (min-width: 775px) {
    .icon-box {
      grid-template-columns: 96px 1fr;
      grid-gap: 24px;
      padding: 30px; } }
  .icon-box h2, .icon-box h3 {
    color: #880088;
    font-weight: bold; }
  .icon-box p {
    margin: 0; }
  .icon-box svg {
    max-width: 48px;
    display: block;
    fill: #404; }
    @media (min-width: 450px) {
      .icon-box svg {
        max-width: 96px; } }
    .icon-box svg .splash {
      fill: #cc3f47; }

.bg-belt-buckle {
  background-color: #303;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 130'%3E%3Cpath d='M0 0h1600v110c-400 0-400-100-800-100S400 110 0 110V0z' fill='%23FFF'/%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='70' x2='1600' y2='70'%3E%3Cstop offset='0' stop-color='%23808'/%3E%3Cstop offset='.5' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cpath d='M1600 120c-400 0-400-100-800-100S400 120 0 120' fill='none' stroke='url(%23g)' stroke-width='5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 130'%3E%3Cpath d='M1600 130H0V20c400 0 400 100 800 100s400-100 800-100v110z' fill='%23FFF'/%3E%3ClinearGradient id='bg' gradientUnits='userSpaceOnUse' x1='0' y1='60' x2='1600' y2='60'%3E%3Cstop offset='0' stop-color='%23808'/%3E%3Cstop offset='.5' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cpath d='M0 10c400 0 400 100 800 100s400-100 800-100' fill='none' stroke='url(%23bg)' stroke-width='5'/%3E%3C/svg%3E"), linear-gradient(#303, #303);
  background-repeat: no-repeat;
  background-size: 100% 50px, 100% 50px, 100%;
  background-position: top center, bottom center, 50%;
  padding: 50px 0; }
  @media (min-width: 660px) {
    .bg-belt-buckle {
      background-size: 100% 100px, 100% 100px, 100%;
      padding: 100px 0; } }

#section-bottom-cta {
  /*
  background: #404;
  background-image:
  	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 130'%3E%3Cpath d='M1600 130H0V20c400 0 400 100 800 100s400-100 800-100v110z' fill='%23FFF'/%3E%3ClinearGradient id='bg' gradientUnits='userSpaceOnUse' x1='0' y1='60' x2='1600' y2='60'%3E%3Cstop offset='0' stop-color='%23808'/%3E%3Cstop offset='.5' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cpath d='M0 10c400 0 400 100 800 100s400-100 800-100' fill='none' stroke='url(%23bg)' stroke-width='5'/%3E%3C/svg%3E"),
  	linear-gradient(#404, #404);
  background-repeat: no-repeat;
  background-size: 100% 50px, 100%;
  background-position: bottom center, 50%;
  padding: 0 0 50px 0;
  @include sm-tablet-up {
  	background-size: 100% 100px, 100%;
  	padding: 0 0 100px 0;
  }
  */ }
  #section-bottom-cta h2 {
    color: #FFF; }
  #section-bottom-cta p {
    color: #DAB0DA; }
  #section-bottom-cta a {
    margin: 12px 0; }
  #section-bottom-cta .section-wrap {
    padding: 60px 30px;
    align-items: center; }
    @media (min-width: 775px) {
      #section-bottom-cta .section-wrap {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-gap: 30px;
        max-width: 900px;
        margin: 0 auto; } }
    @media (min-width: 1200px) {
      #section-bottom-cta .section-wrap {
        max-width: 1000px;
        padding: 60px 30px; } }
    #section-bottom-cta .section-wrap div {
      max-width: 450px;
      margin: 0 auto; }
      @media (min-width: 775px) {
        #section-bottom-cta .section-wrap div {
          max-width: 750px; } }

#section-icon-row {
  padding-bottom: 15px; }
  @media (min-width: 660px) {
    #section-icon-row {
      padding-bottom: 30px; } }
  @media (min-width: 1200px) {
    #section-icon-row {
      padding-bottom: 60px; } }
  #section-icon-row .section-wrap {
    padding: 10px; }
    @media (min-width: 450px) {
      #section-icon-row .section-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 15px; } }
    @media (min-width: 660px) {
      #section-icon-row .section-wrap {
        padding: 15px; } }
    @media (min-width: 1200px) {
      #section-icon-row .section-wrap {
        grid-gap: 30px;
        max-width: 840px;
        margin: 0 auto; } }
  #section-icon-row p {
    font-weight: bold;
    color: #880088;
    font-size: 1rem; }
    @media (min-width: 660px) {
      #section-icon-row p {
        font-size: 1.125rem; } }
    @media (min-width: 1200px) {
      #section-icon-row p {
        font-size: 1.25rem; } }
  #section-icon-row svg {
    width: 48px;
    height: 48px;
    display: inline-block;
    fill: #404; }
    @media (min-width: 450px) {
      #section-icon-row svg {
        width: 64px;
        height: 64px; } }
    @media (min-width: 660px) {
      #section-icon-row svg {
        width: 72px;
        height: 72px; } }
    @media (min-width: 1200px) {
      #section-icon-row svg {
        width: 96px;
        height: 96px; } }
    #section-icon-row svg .splash {
      fill: #cc3f47; }

#section-superpowers h2 {
  text-align: center; }
#section-superpowers .section-wrap {
  padding: 15px 0;
  max-width: 1400px;
  margin: 0 auto; }
  @media (min-width: 900px) {
    #section-superpowers .section-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr; } }
  @media (min-width: 660px) {
    #section-superpowers .section-wrap {
      grid-gap: 30px;
      padding: 30px 0; } }
  @media (min-width: 1200px) {
    #section-superpowers .section-wrap {
      grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1400px) {
    #section-superpowers .section-wrap {
      grid-gap: 60px;
      padding: 60px 0; } }
  #section-superpowers .section-wrap h3 {
    color: #880088; }
  #section-superpowers .section-wrap .button-box {
    padding: 30px;
    max-width: 600px;
    margin: 30px auto;
    border-radius: 10px; }
    @media (min-width: 775px) {
      #section-superpowers .section-wrap .button-box {
        padding: 60px; } }
    @media (min-width: 1400px) {
      #section-superpowers .section-wrap .button-box {
        padding: 60px 120px;
        max-width: 700px; } }

.button-box {
  border: 3px #F8EFF8;
  border-style: solid solid dotted solid; }

.outline-pro {
  border-color: #C380C3;
  background-color: #FFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1200'%3E%3Cpath fill='none' stroke='%23F8EFF8' stroke-width='128' d='M0 0v5000M0 0l312.5 4687.5M0 0l625 4375M0 0l937.5 4062.5M0 0l1250 3750M0 0l1562.5 3437.5M0 0l1875 3125M0 0l2187.5 2812.5M0 0l2500 2500M0 0l2812.5 2187.5M0 0l3125 1875M0 0l3437.5 1562.5M0 0l3750 1250M0 0l4062.5 937.5M0 0l4375 625M0 0l4687.5 312.5M0 0h5000'/%3E%3C/svg%3E");
  background-size: cover;
  box-shadow: inset 0 1px 0 2px #FFF; }

#section-stock-graphics {
  /*
  background-color: #303;
  background: #303;
  background-image: 
  	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 130'%3E%3Cpath d='M0 0h1600v110c-400 0-400-100-800-100S400 110 0 110V0z' fill='%23FFF'/%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='70' x2='1600' y2='70'%3E%3Cstop offset='0' stop-color='%23808'/%3E%3Cstop offset='.5' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cpath d='M1600 120c-400 0-400-100-800-100S400 120 0 120' fill='none' stroke='url(%23g)' stroke-width='5'/%3E%3C/svg%3E"),
  	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 130'%3E%3Cpath d='M1600 130H0V20c400 0 400 100 800 100s400-100 800-100v110z' fill='%23FFF'/%3E%3ClinearGradient id='bg' gradientUnits='userSpaceOnUse' x1='0' y1='60' x2='1600' y2='60'%3E%3Cstop offset='0' stop-color='%23808'/%3E%3Cstop offset='.5' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cpath d='M0 10c400 0 400 100 800 100s400-100 800-100' fill='none' stroke='url(%23bg)' stroke-width='5'/%3E%3C/svg%3E"),
  	linear-gradient(#404, #404);
  background-repeat: no-repeat;
  background-size: 100% 50px, 100% 50px, 100%;
  background-position: top center, bottom center, 50%;
  padding: 50px 0;
  @include sm-tablet-up {
  	background-size: 100% 100px, 100% 100px, 100%;
  	padding: 100px 0;
  }
  */ }
  #section-stock-graphics .section-wrap {
    padding: 45px 30px;
    margin: 0 auto; }
    @media (min-width: 1200px) {
      #section-stock-graphics .section-wrap {
        display: grid;
        justify-content: center;
        align-items: center;
        grid-template-columns: 1fr 1fr;
        max-width: 900px; } }
    @media (min-width: 1400px) {
      #section-stock-graphics .section-wrap {
        padding: 60px 0;
        max-width: 1000px; } }
    #section-stock-graphics .section-wrap h2, #section-stock-graphics .section-wrap ul {
      color: #FFF; }
    #section-stock-graphics .section-wrap ul {
      padding-left: 30px; }
      @media (min-width: 1200px) {
        #section-stock-graphics .section-wrap ul {
          padding-left: 15px; } }
    #section-stock-graphics .section-wrap p {
      color: #DAB0DA; }
  #section-stock-graphics .junk-box {
    max-width: 600px;
    margin: 0 auto;
    padding: 0; }
    @media (min-width: 1200px) {
      #section-stock-graphics .junk-box {
        padding: 30px 0;
        max-width: 450px; } }
    @media (min-width: 1800px) {
      #section-stock-graphics .junk-box {
        padding: 60px;
        max-width: 550px; } }
  #section-stock-graphics ul {
    margin: 0; }
    #section-stock-graphics ul li {
      margin: 0;
      padding: 12px 15px 18px 50px;
      list-style: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 57 57'%3E%3Cpath fill='%23CC3F47' d='M48.7 8.3C37.5-2.8 19.5-2.8 8.3 8.3s-11.1 29.2 0 40.3 29.2 11.1 40.3 0 11.2-29.1.1-40.3zm-35.4 5C20.8 5.7 32.6 5 41 11L11 41c-6-8.4-5.3-20.2 2.3-27.7zm30.4 30.4C36.2 51.3 24.4 52 16 46l30-30c6 8.4 5.3 20.2-2.3 27.7z'/%3E%3C/svg%3E");
      background-position: left center;
      background-repeat: no-repeat;
      background-size: 36px;
      font-size: 1.25rem; }
      @media (min-width: 660px) {
        #section-stock-graphics ul li {
          font-size: 1.4rem; } }
      @media (min-width: 1200px) {
        #section-stock-graphics ul li {
          font-size: 1.5rem; } }
      @media (min-width: 1800px) {
        #section-stock-graphics ul li {
          font-size: 1.6rem; } }

#section-value-packed {
  background-color: #303;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 130'%3E%3Cpath d='M0 0h1600v110c-400 0-400-100-800-100S400 110 0 110V0z' fill='%23FFF'/%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='70' x2='1600' y2='70'%3E%3Cstop offset='0' stop-color='%23808'/%3E%3Cstop offset='.5' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cpath d='M1600 120c-400 0-400-100-800-100S400 120 0 120' fill='none' stroke='url(%23g)' stroke-width='5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 130'%3E%3Cpath d='M1600 130H0V20c400 0 400 100 800 100s400-100 800-100v110z' fill='%23FFF'/%3E%3ClinearGradient id='bg' gradientUnits='userSpaceOnUse' x1='0' y1='60' x2='1600' y2='60'%3E%3Cstop offset='0' stop-color='%23808'/%3E%3Cstop offset='.5' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cpath d='M0 10c400 0 400 100 800 100s400-100 800-100' fill='none' stroke='url(%23bg)' stroke-width='5'/%3E%3C/svg%3E"), linear-gradient(#303, #303);
  background-repeat: no-repeat;
  background-size: 100% 50px, 100% 50px, 100%;
  background-position: top center, bottom center, 50%;
  padding: 50px 0; }
  @media (min-width: 660px) {
    #section-value-packed {
      background-size: 100% 100px, 100% 100px, 100%;
      padding: 100px 0; } }
  #section-value-packed .section-wrap {
    display: grid;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto; }
    @media (min-width: 1200px) {
      #section-value-packed .section-wrap {
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px; } }
    @media (min-width: 1800px) {
      #section-value-packed .section-wrap {
        grid-template-columns: 1fr 1fr;
        grid-gap: 60px; } }
  #section-value-packed .heading-stack {
    text-align: center;
    padding: 30px 0; }
    #section-value-packed .heading-stack h2 {
      color: #FFF; }
  #section-value-packed .icon-stack {
    display: grid;
    grid-gap: 60px; }
    @media (min-width: 1800px) {
      #section-value-packed .icon-stack .icon-box:nth-child(2) {
        transform: translateX(40px); } }

svg#prism {
  display: block;
  width: 100%;
  max-width: 150px;
  margin: 20px auto; }

#PRICES.plan-yearly .showMonth {
  display: none; }
#PRICES.plan-monthly .showYear {
  display: none; }
#PRICES svg.the-crown {
  position: absolute;
  top: -80px;
  left: 50%;
  background: #880088;
  border-radius: 99px;
  padding: 20px;
  width: 120px;
  height: 120px;
  transform: translateX(-60px);
  box-shadow: inset 0 0 0 4px #505;
  border: solid #cc3f47 4px; }
@media (min-width: 1200px) {
  #PRICES {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 0 2200 250'%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23CC3F47'/%3E%3Cstop offset='1' stop-color='%23F09F33'/%3E%3C/linearGradient%3E%3Cg stroke='url(%23a)' opacity='.2' fill='none' stroke-width='2'%3E%3Ccircle cx='100' cy='125' r='100'/%3E%3Cpath d='M2354 152 2186 31l-21 195z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; } }
#PRICES .section-wrap {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0; }
  @media (min-width: 900px) {
    #PRICES .section-wrap {
      grid-template-columns: 1fr 1fr;
      grid-gap: 30px; } }
#PRICES hr {
  margin: 15px -15px;
  border-top: 1px dotted rgba(136, 0, 136, 0.2); }
  @media (min-width: 660px) {
    #PRICES hr {
      margin: 15px -30px; } }
#PRICES .price-duration {
  display: inline-flex;
  align-items: center;
  line-height: 0px;
  padding: 10px 20px;
  margin-bottom: 15px;
  background: #F8EFF8;
  border-radius: 20px;
  font-size: 1rem; }
  #PRICES .price-duration input {
    margin: 0 15px; }
#PRICES .price-card {
  position: relative;
  margin-bottom: 30px;
  padding: 30px 15px 15px 15px;
  font-size: 1.2rem;
  background: #F8EFF8;
  border-radius: 20px; }
  @media (min-width: 660px) {
    #PRICES .price-card {
      padding: 30px 30px 15px 30px; } }
  #PRICES .price-card svg {
    width: 20px;
    height: 15px;
    stroke-width: 3px;
    margin-right: 8px;
    fill: none;
    stroke: #880088;
    stroke-linejoin: round;
    stroke-linecap: round;
    transform: translateY(2px); }
    @media (min-width: 660px) {
      #PRICES .price-card svg {
        width: 24px;
        height: 18px;
        stroke-width: 4px;
        margin-right: 15px; } }
    #PRICES .price-card svg.not-included {
      opacity: .4; }
  #PRICES .price-card .plan-details {
    display: grid;
    grid-template-columns: 1fr 100px;
    grid-template-rows: 26px;
    line-height: 1; }
    #PRICES .price-card .plan-details p {
      margin: 0; }
  #PRICES .price-card .plan-name {
    font-size: 1.2rem;
    line-height: 1; }
    @media (min-width: 660px) {
      #PRICES .price-card .plan-name {
        font-size: 1.5rem; } }
  #PRICES .price-card .plan-savings {
    background: #F8EFF8;
    font-size: 1rem;
    line-height: 1;
    padding: 5px 8px;
    text-align: center;
    background: #C380C3;
    border-radius: 5px;
    color: #FFF; }
#PRICES .the-price {
  padding: 30px 0 15px 0; }
  #PRICES .the-price p.price {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0; }
    #PRICES .the-price p.price span {
      font-size: 1.2rem;
      font-weight: 400; }
      @media (min-width: 660px) {
        #PRICES .the-price p.price span {
          font-size: 1.5rem; } }
  #PRICES .the-price .price-explainer {
    font-size: .9rem; }
  #PRICES .the-price a {
    min-width: 180px;
    text-align: center; }
#PRICES .the-details p {
  text-align: left;
  margin-bottom: 5px; }

#section-testimonials {
  padding: 120px 20px 60px 20px;
  background-image: radial-gradient(#606, #404, #202); }
  @media (min-width: 660px) {
    #section-testimonials {
      padding: 215px 30px 140px 30px; } }
  @media (min-width: 1200px) {
    #section-testimonials {
      padding: 215px 60px 140px 60px; } }
  @media (min-width: 660px) {
    #section-testimonials {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 100'%3E%3Cpath fill='%23FFF' d='M800 100 0 0 1600 0Z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='100' viewBox='0 0 1600 100'%3E%3Cpath fill='%23FFF' d='M800 0 0 100 1600 100Z'/%3E%3C/svg%3E"), radial-gradient(#606, #404, #202);
      background-repeat: no-repeat;
      background-size: 100% 100px, 100% 100px, 100%;
      background-position: top center, bottom center, 50%; } }
  #section-testimonials .section-wrap {
    grid-gap: 90px;
    display: grid;
    max-width: 1400px;
    margin: 0 auto; }
    @media (min-width: 1200px) {
      #section-testimonials .section-wrap {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 60px; } }

.testimonial-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 30px 30px 30px;
  background: #202;
  color: #FFF;
  text-align: center;
  align-items: center; }
  .testimonial-box img {
    margin: -64px auto 20px auto;
    width: 128px;
    height: 128px;
    padding: 4px;
    background: linear-gradient(55deg, #880088, #cc3f47, #f09f33);
    border-radius: 64px; }
  .testimonial-box a {
    font-size: 14px;
    color: #C380C3; }
  .testimonial-box .div-quote {
    display: table;
    flex-grow: 1;
    align-self: center; }
  .testimonial-box .t-quote {
    display: table-cell;
    padding: 15px 0;
    vertical-align: middle; }
  .testimonial-box .t-name {
    margin: 20px auto 0 auto; }
  .testimonial-box .t-source {
    line-height: 14px;
    margin: 0 auto; }
  @media (min-width: 1200px) {
    .testimonial-box {
      transform: translateY(20px); }
      .testimonial-box:nth-of-type(2) {
        transform: translateY(-20px); } }

a.hover-info svg {
  width: 16px;
  height: 16px;
  vertical-align: -1px; }
  a.hover-info svg circle {
    fill: #F0DFF0;
    transition: fill .2s ease; }
a.hover-info:hover svg circle {
  fill: #C380C3; }

a.btn-img {
  margin: 30px auto 0 auto;
  display: block;
  width: 100%;
  max-width: 1000px; }
  a.btn-img img {
    padding: 5px;
    border-radius: 12px;
    transition: opacity .2s ease; }
  a.btn-img:hover img {
    opacity: 0.8; }

.gallery-section {
  background: #FFF;
  padding: 0.25%;
  overflow: hidden; }

.gallery-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10%; }

@media (min-width: 900px) {
  .gallery-section .gallery-wrap:nth-child(2) {
    margin: 0 -17.5% 0 -7.5%; }

  .gallery-wrap:nth-child(1) {
    margin: 0 -5% 0 -20%; }
    .gallery-wrap:nth-child(1) img:nth-child(6) {
      display: none; } }
.gallery-section img {
  display: block;
  margin: 0;
  border-radius: 10px;
  width: 33%;
  height: 33%;
  padding: 0.25%; }
  @media (min-width: 660px) {
    .gallery-section img {
      width: 25%;
      height: 25%;
      padding: 0.25%; } }
  @media (min-width: 900px) {
    .gallery-section img {
      width: 20%;
      height: 20%;
      padding: 0.25%; } }

.gallery-section .gallery-wrap:nth-child(2) img:nth-child(n+4) {
  display: none; }
@media (min-width: 660px) {
  .gallery-section img:nth-child(6) {
    display: none; }
  .gallery-section .gallery-wrap:nth-child(1) img:nth-child(1) {
    display: none; }
  .gallery-section .gallery-wrap:nth-child(2) img:nth-child(4) {
    display: block; } }
@media (min-width: 900px) {
  .gallery-section .gallery-wrap:nth-child(1) img:nth-child(1) {
    display: block; }
  .gallery-section .gallery-wrap:nth-child(2) img:nth-child(5) {
    display: block; } }

#faq {
  max-width: 760px;
  margin: 0 auto;
  transition: height .2s ease-in-out; }

.faq-show p {
  display: block !important;
  color: #444;
  opacity: 1;
  animation: showFAQ 0.25s ease-in-out; }

@keyframes showFAQ {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.section-faq {
  padding: 120px 60px; }
  .section-faq h2 {
    text-align: center; }
  .section-faq h3 {
    color: #880088;
    margin: 0;
    line-height: 48px;
    padding: 7px 30px; }
    .section-faq h3:hover {
      text-decoration: underline; }
  .section-faq .faq-question {
    cursor: pointer;
    background: #F8EFF8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9' /%3E%3C/svg%3E");
    background-position: top 14px right 14px;
    background-repeat: no-repeat;
    background-size: 40px;
    border-radius: 10px;
    margin-bottom: 15px; }
    .section-faq .faq-question.faq-show {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 15 12 9 18 15' /%3E%3C/svg%3E"); }
    .section-faq .faq-question p {
      display: none;
      padding: 7px 30px 30px 60px; }

/*  </subscribe page>   */
/*  could extend farther out  */
#promo {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center; }
  #promo a {
    display: block;
    padding: 50px;
    font-size: 1.4rem;
    color: #FFF !important;
    background: rgba(68, 0, 68, 0.8);
    box-shadow: inset 0 0 0 1px #880088;
    border-radius: 15px;
    transition: background .2s ease, box-shadow .2s ease; }
    #promo a h2 {
      font-size: 3.5rem;
      text-shadow: 1px 1px 2px #303, 2px 2px 5px #303; }
    #promo a p {
      margin: 0;
      padding: 15px;
      font-size: 1.4rem;
      border-radius: 50px;
      background: #880088;
      transition: background 2s ease; }
  #promo a:hover {
    background: #202;
    box-shadow: inset 0 0 0 2px #FFF;
    text-decoration: none; }
    #promo a:hover p {
      background: #e78738; }

.cover-text {
  font-size: 400%;
  font-size: 5vw;
  text-align: center;
  padding: 175px 0; }

.thank-you {
  background-color: #606 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpolygon fill='%23FFF' points='800 100 0 200 0 800 1600 800 1600 200'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: cover  !important;
  background-position: top center  !important;
  padding-top: 20px !important;
  border-radius: 3px; }
  .thank-you .thank-you-icon {
    max-width: 100px;
    margin: 0 auto;
    padding: 5px; }

.thank-you ul {
  list-style: none;
  font-size: 1.2rem; }
  .thank-you ul li:before {
    content: "\2713\0020";
    font-weight: bold;
    color: #20A820; }

ul.detailed-list li {
  padding-bottom: 15px; }

.membership-content.large-post {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='1600' height='200' viewBox='0 0 1600 100'%3E%3Cpath fill='%23722178' d='M800 100 0 50 0 0 1600 0 1600 50Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  padding-top: 20px !important;
  border-radius: 3px; }
  .membership-content.large-post .thank-you-icon {
    max-width: 100px;
    margin: 0 auto;
    padding: 5px; }

.lead {
  font-size: 1.5rem; }

.cta-btn {
  color: #FFF !important;
  background: #fe4a54;
  transition: background .2s ease;
  display: inline-block;
  padding: 8px 16px;
  margin: 0 auto;
  border-radius: 50px; }
  @media (min-width: 660px) {
    .cta-btn {
      font-size: 1.2rem;
      padding: 10px 40px; } }

.cta-btn:hover {
  background: #962646;
  text-decoration: none; }

@media (max-width: 659px) {
  .phone-hide {
    display: none; } }
@media (min-width: 660px) {
  .phone-show {
    display: none; } }
.section-white {
  background: #FFF;
  padding-bottom: 50px;
  background-color: #dddddd;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.19'%3E%3Cpath fill='%23e0e0e0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23e4e4e4' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23e7e7e7' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ebebeb' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23eeeeee' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23f1f1f1' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23f5f5f5' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23f8f8f8' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23fcfcfc' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23ffffff' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-position: center; }

/* login form */
#login-section {
  padding: 30px 10px; }
  @media (min-width: 660px) {
    #login-section {
      padding: 50px 10px; } }
  #login-section h1 {
    text-align: center; }
  #login-section .login-form {
    margin: 0 auto;
    max-width: 500px;
    background: #FFF;
    padding: 30px; }
    @media (min-width: 660px) {
      #login-section .login-form {
        padding: 60px; } }
  #login-section .mp-form-row {
    padding: 5px 0; }

.mp_login_form input[type=text], .mp_login_form input[type=password], .mp_login_form input[type=email], .mp_login_form input[type=tel], .mp_login_form textarea, .mepr-form input[type=text], .mepr-form input[type=password], .mepr-form input[type=email], .mepr-form input[type=tel], .mepr-form textarea, .contact-form input[type=text], .contact-form input[type=password], .contact-form input[type=email], .contact-form input[type=tel], .contact-form textarea, #mepr-stripe-payment-form input[type=text], #mepr-stripe-payment-form input[type=password], #mepr-stripe-payment-form input[type=email], #mepr-stripe-payment-form input[type=tel], #mepr-stripe-payment-form textarea {
  width: 100%;
  background: #FFF;
  text-align: left;
  cursor: text;
  text-transform: none;
  font-size: 1.5rem;
  padding: 6px;
  border: 1px solid #CCC;
  box-shadow: 0 0 0 0 #404;
  margin-bottom: 10px;
  border-width: 1px !important;
  border-radius: 2px; }
.mp_login_form input[type=text]:focus, .mp_login_form input[type=password]:focus, .mp_login_form input[type=email]:focus, .mp_login_form input[type=tel]:focus, .mp_login_form textarea:focus, .mepr-form input[type=text]:focus, .mepr-form input[type=password]:focus, .mepr-form input[type=email]:focus, .mepr-form input[type=tel]:focus, .mepr-form textarea:focus, .contact-form input[type=text]:focus, .contact-form input[type=password]:focus, .contact-form input[type=email]:focus, .contact-form input[type=tel]:focus, .contact-form textarea:focus, #mepr-stripe-payment-form input[type=text]:focus, #mepr-stripe-payment-form input[type=password]:focus, #mepr-stripe-payment-form input[type=email]:focus, #mepr-stripe-payment-form input[type=tel]:focus, #mepr-stripe-payment-form textarea:focus {
  border: 1px solid #404;
  box-shadow: 0 0 0 1px #404;
  box-shadow: 0 0 0 0 #404;
  background: #F7F7F7;
  outline: none; }
.mp_login_form .mp-password-strength-area, .mepr-form .mp-password-strength-area, .contact-form .mp-password-strength-area, #mepr-stripe-payment-form .mp-password-strength-area {
  text-align: center; }
.mp_login_form .mp-password-strength-display, .mepr-form .mp-password-strength-display, .contact-form .mp-password-strength-display, #mepr-stripe-payment-form .mp-password-strength-display {
  width: 180px;
  margin: 0;
  border: none;
  border-radius: 50px;
  font-size: 0.8rem;
  padding: 2px; }
.mp_login_form .mepr_password_confirm, .mepr-form .mepr_password_confirm, .contact-form .mepr_password_confirm, #mepr-stripe-payment-form .mepr_password_confirm {
  margin: 0; }
.mp_login_form .submit, .mepr-form .submit, .contact-form .submit, #mepr-stripe-payment-form .submit {
  text-align: center; }
.mp_login_form input[type=submit], .mepr-form input[type=submit], .contact-form input[type=submit], #mepr-stripe-payment-form input[type=submit] {
  width: 100%;
  min-width: 150px;
  max-width: 300px;
  font-size: 1.2rem;
  border-radius: 50px;
  border: none;
  color: #FFF;
  background: #aa2068;
  cursor: pointer;
  padding: 10px;
  transition: background .2s ease, box-shadow .2s ease;
  text-transform: uppercase;
  margin: 0 auto;
  display: block;
  box-shadow: inset 8px -18px 20px -20px rgba(136, 0, 136, 0.2), inset -34px 73px 20px -60px rgba(240, 159, 51, 0.2); }
.mp_login_form input[type=submit]:hover, .mepr-form input[type=submit]:hover, .contact-form input[type=submit]:hover, #mepr-stripe-payment-form input[type=submit]:hover {
  background: #d55742;
  box-shadow: inset 40px -65px 60px -60px #880088, inset -30px 70px 20px -60px rgba(240, 159, 51, 0.8); }
.mp_login_form .form-row, .mepr-form .form-row, .contact-form .form-row, #mepr-stripe-payment-form .form-row {
  padding: 5px 0; }
.mp_login_form .emailfield, .mepr-form .emailfield, .contact-form .emailfield, #mepr-stripe-payment-form .emailfield {
  display: none; }
.mp_login_form .errormessage, .mepr-form .errormessage, .contact-form .errormessage, #mepr-stripe-payment-form .errormessage {
  color: #cc3f47 !important; }
.mp_login_form .mepr_mepr_trial_period, .mp_login_form .mepr_mepr_trial_type, .mp_login_form .mepr_mepr_registration_url, .mp_login_form .mepr_mepr_ip_address, .mp_login_form .mepr_mepr_current_url, .mp_login_form .mepr_mepr_checkout_code, .mepr-form .mepr_mepr_trial_period, .mepr-form .mepr_mepr_trial_type, .mepr-form .mepr_mepr_registration_url, .mepr-form .mepr_mepr_ip_address, .mepr-form .mepr_mepr_current_url, .mepr-form .mepr_mepr_checkout_code, .contact-form .mepr_mepr_trial_period, .contact-form .mepr_mepr_trial_type, .contact-form .mepr_mepr_registration_url, .contact-form .mepr_mepr_ip_address, .contact-form .mepr_mepr_current_url, .contact-form .mepr_mepr_checkout_code, #mepr-stripe-payment-form .mepr_mepr_trial_period, #mepr-stripe-payment-form .mepr_mepr_trial_type, #mepr-stripe-payment-form .mepr_mepr_registration_url, #mepr-stripe-payment-form .mepr_mepr_ip_address, #mepr-stripe-payment-form .mepr_mepr_current_url, #mepr-stripe-payment-form .mepr_mepr_checkout_code {
  display: none;
  display: none !important; }

.email-image {
  max-width: 300px;
  padding: 10px 30px; }

.grecaptcha {
  text-align: center; }

.g-recaptcha {
  display: inline-block; }

.mp-form-submit {
  text-align: center; }
  .mp-form-submit span::before {
    content: "\A";
    white-space: pre; }

.mepr-form-has-errors {
  width: 100%;
  color: #C00;
  font-weight: bold;
  font-size: 1.5rem; }

.cc-error {
  color: #C00; }

.mepr-account-change-password {
  display: block;
  width: 100%;
  text-align: center; }

#mepr-account-nav .mepr-nav-item #mepr-account-logout {
  display: none; }

.mepr-account-table th:nth-child(5) {
  display: none !important; }

.mepr-subscription-row td:nth-child(5) {
  display: none !important; }

.creditcard {
  padding: 5px;
  border: 1px solid #C380C3;
  background: #F8EFF8;
  border-radius: 10px;
  text-align: center; }

/*  membership template  */
.membership-content {
  margin: 0 auto;
  background: #FFF;
  padding: 50px;
  max-width: 600px; }

/* <Converter> */
#converter .wrap {
  padding: 30px 0; }
#converter textarea {
  scrollbar-color: #404 #880088;
  resize: none; }
  #converter textarea::-webkit-scrollbar {
    width: 20px; }
  #converter textarea::-webkit-scrollbar-track {
    background: #404; }
  #converter textarea::-webkit-scrollbar-thumb {
    background-color: #880088;
    border-radius: 6px;
    border: 3px solid #404; }

.pitchLine {
  padding: 10px 20px;
  border: 1px solid #F0DFF0;
  font-style: italic; }
  .pitchLine svg {
    width: 24px;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: -3px; }

.pitch-card {
  max-width: 1200px;
  padding: 10px;
  margin: -30px auto;
  background: #505;
  color: #FFF;
  text-align: center; }
  @media (min-width: 1200px) {
    .pitch-card {
      margin: -60px auto; } }
  .pitch-card p {
    padding: 0;
    margin: 0; }

.content-card,
.content-box {
  background: #FFF;
  max-width: 1200px;
  margin: 30px auto; }
  @media (min-width: 1200px) {
    .content-card,
    .content-box {
      margin: 60px auto; } }
  .content-card .wrap,
  .content-box .wrap {
    padding: 15px 30px; }
    @media (min-width: 660px) {
      .content-card .wrap,
      .content-box .wrap {
        padding: 30px; } }
    @media (min-width: 1200px) {
      .content-card .wrap,
      .content-box .wrap {
        padding: 60px 90px; } }
  .content-card textarea,
  .content-box textarea {
    background-color: #F8EFF8;
    border: 1px solid #F0DFF0;
    overflow: auto;
    padding: 15px;
    font-size: 1rem;
    line-height: 20px;
    box-shadow: inset 0 0 0 0 #F8EFF8;
    transition: box-shadow .2s ease; }
    .content-card textarea:active, .content-card textarea:focus, .content-card textarea:focus-within, .content-card textarea:focus-visible,
    .content-box textarea:active,
    .content-box textarea:focus,
    .content-box textarea:focus-within,
    .content-box textarea:focus-visible {
      outline: none;
      border-color: #880088;
      box-shadow: inset 0 0 0 3px #880088; }

.tight h2 {
  margin: 0; }

span.code {
  background: #F8EFF8;
  color: #404;
  padding: 0 5px; }

@media (min-width: 660px) {
  .content-card {
    display: grid;
    grid-template-columns: 1fr .4fr; } }
.content-card .svg-wrap {
  background: #F8EFF8;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media (min-width: 660px) {
    .content-card .svg-wrap {
      padding: 30px; } }
  .content-card .svg-wrap svg {
    fill: none;
    stroke: #880088;
    stroke-width: 2px;
    max-width: 192px; }

.purple-stroke {
  stroke-width: 2px;
  fill: none;
  stroke: #880088; }

.s2c_output,
.copyCodeDiv {
  position: relative; }
  .s2c_output button.btn-purple,
  .copyCodeDiv button.btn-purple {
    position: absolute;
    bottom: 38px;
    right: 0;
    border-radius: 0;
    padding: 10px;
    border: none; }
    .s2c_output button.btn-purple svg,
    .copyCodeDiv button.btn-purple svg {
      display: block;
      width: 32px;
      height: 32px;
      fill: none;
      stroke: #880088;
      stroke: #FFF;
      stroke-width: 2px; }

.s2c {
  padding: 15px 0; }
  @media (min-width: 1200px) {
    .s2c {
      padding: 30px 0; } }

.s2c_wrap {
  padding: 15px; }
  @media (min-width: 660px) {
    .s2c_wrap {
      padding: 15px 30px; } }
  @media (min-width: 1200px) {
    .s2c_wrap {
      padding: 15px 60px; } }
  .s2c_wrap fieldset {
    border: #DAB0DA solid 1px; }
  .s2c_wrap.s2c_options {
    padding-bottom: 30px; }
    @media (min-width: 1200px) {
      .s2c_wrap.s2c_options {
        padding-bottom: 60px; } }

@media (min-width: 660px) {
  .s2c_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px; } }
@media (min-width: 1200px) {
  .s2c_grid {
    grid-gap: 60px; } }

/* </Converter> */
.white-emoji {
  line-height: 50px;
  vertical-align: middle !important; }
  .white-emoji img.emoji {
    background: #FFF !important;
    border-radius: 99px;
    padding: 6px !important;
    width: 40px !important;
    height: 40px !important; }
  .white-emoji img {
    vertical-align: -6px !important; }

/*<blog>*/
svg.blog-art {
  background: #F8EFF8;
  fill: #880088;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 37px; }

#section-FvP h2 {
  color: #808; }
#section-FvP h2, #section-FvP h3 {
  margin: 0; }
#section-FvP .section-pad {
  max-width: 1000px;
  margin: 0 auto; }

#section-signup {
  background: #FFF;
  padding-top: 0px; }
  #section-signup .info-column {
    max-width: 400px;
    margin: 0 auto; }
  #section-signup .icon-boxes {
    padding-top: 0px;
    max-width: 1200px; }
    #section-signup .icon-boxes .icon-box-stack {
      display: grid;
      grid-template-columns: 1fr;
      grid-gap: 15px; }
  #section-signup .icon-box {
    padding: 15px 30px;
    width: 100%; }
  #section-signup .section-wrap {
    padding: 30px 30px;
    background: rgba(248, 239, 248, 0.4);
    border-radius: 20px;
    box-shadow: 0 0 0 1px #F8EFF8;
    max-width: 1200px;
    margin: 0 auto; }

.center_vertically {
  display: flex;
  flex-wrap: wrap;
  align-content: center; }

.center {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center; }

#blogContent, .blogContent {
  background: #FFF !important;
  box-shadow: inset 0 1px 0 0 #F0DFF0; }
  #blogContent.blogHome, .blogContent.blogHome {
    background-color: #F8EFF8 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23808' stroke-width='16' stroke-opacity='0.03'%3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E") !important; }
    #blogContent.blogHome .post, .blogContent.blogHome .post {
      background: none; }
  #blogContent img, .blogContent img {
    max-width: 100%;
    height: auto; }
  #blogContent a, .blogContent a {
    transition: color .2s ease, background .2s ease; }
  #blogContent .post, .blogContent .post {
    background: #FFF;
    border: none;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    font-size: 1.25rem;
    line-height: 37px;
    padding: 23px; }
    @media (min-width: 660px) {
      #blogContent .post, .blogContent .post {
        font-size: 22px; } }
    @media (min-width: 900px) {
      #blogContent .post, .blogContent .post {
        padding: 37px; } }
    #blogContent .post.updates, .blogContent .post.updates {
      max-width: 970px; }
      #blogContent .post.updates .update, .blogContent .post.updates .update {
        display: grid;
        background: #F8EFF8;
        margin: 37px auto 37px auto;
        padding: 15px;
        border-radius: 15px; }
        @media (min-width: 660px) {
          #blogContent .post.updates .update, .blogContent .post.updates .update {
            grid-template-columns: 100px 1fr; } }
        #blogContent .post.updates .update:not(#message), .blogContent .post.updates .update:not(#message) {
          display: block; }
        @media (min-width: 660px) {
          #blogContent .post.updates .update, .blogContent .post.updates .update {
            padding: 15px 30px; } }
        @media (min-width: 1200px) {
          #blogContent .post.updates .update, .blogContent .post.updates .update {
            padding: 30px 60px; } }
        #blogContent .post.updates .update h3, .blogContent .post.updates .update h3 {
          font-size: 1.5rem;
          margin: 0;
          line-height: 1.2; }
          @media (min-width: 660px) {
            #blogContent .post.updates .update h3, .blogContent .post.updates .update h3 {
              font-size: 1.8rem; } }
          @media (min-width: 1200px) {
            #blogContent .post.updates .update h3, .blogContent .post.updates .update h3 {
              font-size: 2rem; } }
        #blogContent .post.updates .update p, .blogContent .post.updates .update p {
          margin: 0; }
        #blogContent .post.updates .update .video-player, .blogContent .post.updates .update .video-player {
          margin-bottom: 37px; }
        #blogContent .post.updates .update .emoji, .blogContent .post.updates .update .emoji {
          font-size: 2rem;
          padding: 15px;
          text-align: center;
          align-self: center;
          padding: 15px; }
          @media (min-width: 660px) {
            #blogContent .post.updates .update .emoji, .blogContent .post.updates .update .emoji {
              font-size: 3rem;
              padding: 0;
              text-align: left; } }
  @media (min-width: 1000px) {
    #blogContent .dual_lists, .blogContent .dual_lists {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 60px; }
      #blogContent .dual_lists > div, .blogContent .dual_lists > div {
        padding: 30px 30px 30px 0; }
        #blogContent .dual_lists > div:first-child, .blogContent .dual_lists > div:first-child {
          border-right: 1px solid #F0DFF0; } }
  #blogContent div.postTeaser, .blogContent div.postTeaser {
    padding: 0 10px;
    margin: 30px 0;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0.8px 2.2px rgba(68, 0, 68, 0.02), 0 2px 5.3px rgba(68, 0, 68, 0.028), 0 3.8px 10px rgba(68, 0, 68, 0.035), 0 6.7px 17.9px rgba(68, 0, 68, 0.042), 0 12.5px 33.4px rgba(68, 0, 68, 0.05), 0 30px 80px rgba(68, 0, 68, 0.07);
    border-radius: 5px; }
    #blogContent div.postTeaser h3, .blogContent div.postTeaser h3 {
      margin-top: 15px; }
    @media (min-width: 660px) {
      #blogContent div.postTeaser, .blogContent div.postTeaser {
        margin: 60px 0; } }
  #blogContent p.blogDetails, .blogContent p.blogDetails {
    font-size: 1rem;
    color: #C380C3; }
    @media (min-width: 660px) {
      #blogContent p.blogDetails, .blogContent p.blogDetails {
        font-size: 22px; } }
    #blogContent p.blogDetails img, .blogContent p.blogDetails img {
      width: 48px;
      height: 48px;
      border-radius: 32px;
      margin: 0 10px; }
    #blogContent p.blogDetails a, .blogContent p.blogDetails a {
      color: #C380C3; }
      #blogContent p.blogDetails a:hover, .blogContent p.blogDetails a:hover {
        color: #880088; }
    #blogContent p.blogDetails.blogPost, .blogContent p.blogDetails.blogPost {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0; }
      #blogContent p.blogDetails.blogPost a, .blogContent p.blogDetails.blogPost a {
        color: #FFF;
        padding: 5px 30px; }
  #blogContent li > code,
  #blogContent p > code, .blogContent li > code,
  .blogContent p > code {
    display: inline-block;
    background: #F8EFF8;
    color: #404;
    padding: 0 5px;
    border-radius: 5px; }
  #blogContent h1, .blogContent h1 {
    color: #880088;
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 14px; }
    @media (min-width: 660px) {
      #blogContent h1, .blogContent h1 {
        font-size: 48px; } }
    @media (min-width: 900px) {
      #blogContent h1, .blogContent h1 {
        font-size: 58px; } }
  #blogContent h2, #blogContent h3, #blogContent h4, #blogContent h5, .blogContent h2, .blogContent h3, .blogContent h4, .blogContent h5 {
    color: #404;
    line-height: 1.5; }
  #blogContent h2, .blogContent h2 {
    font-size: 32px;
    margin-bottom: 37px; }
    @media (min-width: 660px) {
      #blogContent h2, .blogContent h2 {
        font-size: 36px; } }
    @media (min-width: 900px) {
      #blogContent h2, .blogContent h2 {
        font-size: 45px; } }
    @media (min-width: 900px) {
      #blogContent h2, .blogContent h2 {
        line-height: 71px; } }
  #blogContent h3, .blogContent h3 {
    font-size: 24px;
    margin-top: 60px;
    margin-bottom: 23px; }
    @media (min-width: 660px) {
      #blogContent h3, .blogContent h3 {
        font-size: 28px; } }
    @media (min-width: 900px) {
      #blogContent h3, .blogContent h3 {
        font-size: 36px; } }
    @media (min-width: 900px) {
      #blogContent h3, .blogContent h3 {
        line-height: 58px; } }
  #blogContent h4, .blogContent h4 {
    font-size: 22px;
    margin-top: 37px;
    margin-bottom: 14px; }
    @media (min-width: 660px) {
      #blogContent h4, .blogContent h4 {
        font-size: 24px; } }
    @media (min-width: 900px) {
      #blogContent h4, .blogContent h4 {
        font-size: 28px; } }
    @media (min-width: 900px) {
      #blogContent h4, .blogContent h4 {
        line-height: 46px; } }
  #blogContent h5, .blogContent h5 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 9px; }
    @media (min-width: 900px) {
      #blogContent h5, .blogContent h5 {
        font-size: 24px; } }
    @media (min-width: 900px) {
      #blogContent h5, .blogContent h5 {
        line-height: 37px; } }
  #blogContent strong, #blogContent b, .blogContent strong, .blogContent b {
    color: #404; }
  #blogContent p, #blogContent ul, #blogContent ol, #blogContent blockquote, #blogContent pre, #blogContent .alert, #blogContent .note, #blogContent .box, #blogContent .footnotes, .blogContent p, .blogContent ul, .blogContent ol, .blogContent blockquote, .blogContent pre, .blogContent .alert, .blogContent .note, .blogContent .box, .blogContent .footnotes {
    margin-bottom: 37px; }
  #blogContent ul, #blogContent ol, .blogContent ul, .blogContent ol {
    margin-left: 37px;
    padding: 0;
    position: relative; }
  #blogContent li, .blogContent li {
    margin-bottom: 14px; }
  #blogContent ol li::marker, .blogContent ol li::marker {
    color: #880088; }
  #blogContent ul li:before, .blogContent ul li:before {
    content: '';
    position: absolute;
    display: block;
    left: -32px;
    transform: translateY(7px);
    height: 24px;
    width: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23E5C8E5'%3E%3Cpath d='M11 5.8c0 .4.1.7.4.9L16 11c.5.5.5 1.4 0 1.9l-4.6 4.3c-.3.2-.4.6-.4.9 0 1.1 1.3 1.7 2.1.9l6.8-6.2c.6-.5.6-1.4 0-1.9l-6.8-6.2c-.8-.5-2.1.1-2.1 1.1zM3 5.8c0 .4.1.7.4.9L8 11.1c.5.5.5 1.4 0 1.9l-4.6 4.3c-.3.2-.4.5-.4.9 0 1.1 1.3 1.7 2.1.9l6.8-6.2c.6-.5.6-1.4 0-1.9L5.1 4.9c-.8-.7-2.1-.1-2.1.9z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat; }
  #blogContent ul li li:before, .blogContent ul li li:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23E5C8E5'%3E%3Cpath d='M7 16.2V7.8c0-.8.8-1.3 1.5-.9l7.1 4.2c.6.4.6 1.3 0 1.7L8.5 17c-.7.5-1.5 0-1.5-.8z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    left: -29px; }
  #blogContent ul, .blogContent ul {
    list-style: none; }
  #blogContent blockquote, .blogContent blockquote {
    display: grid;
    grid-template-columns: 63px 1fr;
    align-items: center;
    padding: 14px 23px 14px 0;
    background: #F8EFF8;
    box-shadow: inset 63px 0 0 0 #C380C3; }
    #blogContent blockquote p, .blogContent blockquote p {
      margin: 0;
      padding-left: 23px; }
    #blogContent blockquote::before, .blogContent blockquote::before {
      content: "";
      display: block;
      margin: 0 auto;
      width: 40px;
      height: 40px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 116 0 3.5 3.5 0 00-1 3 2 2 0 01-4 0 3.5 3.5 0 00-1-3M9.7 17h4.6'/%3E%3C/svg%3E");
      background-position: center left;
      background-size: 40px;
      background-repeat: no-repeat; }
    #blogContent blockquote.author img, .blogContent blockquote.author img {
      max-width: 100px;
      border-radius: 99px; }
    #blogContent blockquote.author::before, .blogContent blockquote.author::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23FFF' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4' /%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /%3E%3C/svg%3E"); }
  #blogContent .pagination .nav-links, .blogContent .pagination .nav-links {
    text-align: center; }
  #blogContent .screen-reader-text, .blogContent .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important; }
  #blogContent sub, #blogContent sup, .blogContent sub, .blogContent sup {
    padding: 0 1px; }
  #blogContent code, #blogContent pre, #blogContent kbd, .blogContent code, .blogContent pre, .blogContent kbd {
    font-size: 1.25rem; }
  #blogContent pre, .blogContent pre {
    padding: 14px 23px; }
  #blogContent kbd, .blogContent kbd {
    background-color: #fff;
    padding: 5px 6px;
    border-radius: 6px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.45);
    margin: 0 1px; }
  #blogContent .alert, #blogContent .note, #blogContent .box, .blogContent .alert, .blogContent .note, .blogContent .box {
    padding: 23px; }
  #blogContent .footnotes, .blogContent .footnotes {
    font-size: 17px;
    line-height: 30px;
    padding-top: 23px;
    border-top: 1px dotted rgba(0, 0, 0, 0.15); }
  #blogContent .footnotes p, .blogContent .footnotes p {
    margin-bottom: 23px; }
  #blogContent ul ul, #blogContent ul ol, #blogContent ol ul, #blogContent ol ol, #blogContent blockquote.right p, #blogContent blockquote.left p, #blogContent .alert :last-child, #blogContent .note :last-child, #blogContent .box :last-child, #blogContent .footnotes :last-child, .blogContent ul ul, .blogContent ul ol, .blogContent ol ul, .blogContent ol ol, .blogContent blockquote.right p, .blogContent blockquote.left p, .blogContent .alert :last-child, .blogContent .note :last-child, .blogContent .box :last-child, .blogContent .footnotes :last-child {
    margin-bottom: 0; }
  #blogContent pre.language-markup,
  #blogContent pre.language-css, .blogContent pre.language-markup,
  .blogContent pre.language-css {
    background: #202;
    color: #FFF;
    border-radius: 5px;
    margin: 0 0 37px 0;
    scrollbar-color: #404 #880088;
    resize: none; }
    #blogContent pre.language-markup.sharp,
    #blogContent pre.language-css.sharp, .blogContent pre.language-markup.sharp,
    .blogContent pre.language-css.sharp {
      border-radius: 0; }
    #blogContent pre.language-markup code *,
    #blogContent pre.language-css code *, .blogContent pre.language-markup code *,
    .blogContent pre.language-css code * {
      background: none !important; }
    #blogContent pre.language-markup::-webkit-scrollbar,
    #blogContent pre.language-css::-webkit-scrollbar, .blogContent pre.language-markup::-webkit-scrollbar,
    .blogContent pre.language-css::-webkit-scrollbar {
      width: 20px; }
    #blogContent pre.language-markup::-webkit-scrollbar-track,
    #blogContent pre.language-css::-webkit-scrollbar-track, .blogContent pre.language-markup::-webkit-scrollbar-track,
    .blogContent pre.language-css::-webkit-scrollbar-track {
      background: #404; }
    #blogContent pre.language-markup::-webkit-scrollbar-thumb,
    #blogContent pre.language-css::-webkit-scrollbar-thumb, .blogContent pre.language-markup::-webkit-scrollbar-thumb,
    .blogContent pre.language-css::-webkit-scrollbar-thumb {
      background-color: #880088;
      border-radius: 6px;
      border: 3px solid #404; }
    #blogContent pre.language-markup.wrap code,
    #blogContent pre.language-css.wrap code, .blogContent pre.language-markup.wrap code,
    .blogContent pre.language-css.wrap code {
      white-space: normal !important;
      word-break: break-word !important; }
  #blogContent .wp-block-columns, .blogContent .wp-block-columns {
    display: grid;
    grid-gap: 15px; }
    @media (min-width: 660px) {
      #blogContent .wp-block-columns, .blogContent .wp-block-columns {
        grid-template-columns: 1fr 1fr; } }
    @media (min-width: 900px) {
      #blogContent .wp-block-columns, .blogContent .wp-block-columns {
        grid-gap: 30px; } }
  #blogContent .wp-block-gallery ul, .blogContent .wp-block-gallery ul {
    margin: 0 0 37px 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-gap: 14px;
    grid-template-columns: 1fr; }
    @media (min-width: 660px) {
      #blogContent .wp-block-gallery ul, .blogContent .wp-block-gallery ul {
        grid-template-columns: 1fr 1fr; } }
    #blogContent .wp-block-gallery ul li, .blogContent .wp-block-gallery ul li {
      margin: 0; }
      #blogContent .wp-block-gallery ul li figure, .blogContent .wp-block-gallery ul li figure {
        margin: 0;
        position: relative; }
  @media (min-width: 900px) {
    #blogContent .wp-block-gallery.columns-3 ul, .blogContent .wp-block-gallery.columns-3 ul {
      grid-template-columns: 1fr 1fr 1fr; } }
  @media (min-width: 900px) {
    #blogContent .wp-block-gallery.columns-4 ul, .blogContent .wp-block-gallery.columns-4 ul {
      grid-template-columns: 1fr 1fr 1fr 1fr; } }
  #blogContent .wp-block-gallery figcaption, .blogContent .wp-block-gallery figcaption {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    display: inline-block;
    background: #404;
    color: #FFF;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 22px;
    border-radius: 0 5px 0 0; }
  #blogContent .wp-block-image, .blogContent .wp-block-image {
    margin-bottom: 37px; }
    #blogContent .wp-block-image figcaption, .blogContent .wp-block-image figcaption {
      padding: 7px;
      line-height: 1.2;
      font-size: 14px;
      font-style: italic;
      color: #C380C3;
      text-align: center; }
  #blogContent .example, .blogContent .example {
    display: flex;
    background: #F8EFF8;
    padding: 37px;
    margin-top: -37px;
    margin-bottom: 37px; }
    #blogContent .example p, .blogContent .example p {
      display: inline-block;
      margin-bottom: 0; }
  #blogContent ul.short li, .blogContent ul.short li {
    margin-bottom: 0; }

.has-purple-color {
  color: #880088; }

.has-dark-color {
  color: #404; }

.acf-form .wp-picker-container .wp-color-result.button {
  min-height: 48px;
  margin: 0 6px 0 0;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
  padding: 0 0 0 48px;
  border-radius: 6px;
  transition: background .2s ease, box-shadow .2s ease; }
  .acf-form .wp-picker-container .wp-color-result.button .wp-color-result-text {
    font-size: 1rem;
    line-height: 48px;
    background: rgba(255, 255, 255, 0.95);
    padding: 0 15px;
    border-radius: 0 5px 5px 0;
    border: none;
    box-shadow: -3px 0 3px -3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: background .2s ease, box-shadow .2s ease; }
  .acf-form .wp-picker-container .wp-color-result.button:hover {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 3px 0 rgba(0, 0, 0, 0.2); }
    .acf-form .wp-picker-container .wp-color-result.button:hover .wp-color-result-text {
      box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
      background: rgba(255, 255, 255, 0.85); }
.acf-form .wp-picker-container input[type=text].wp-color-picker {
  width: 100px; }
.acf-form .wp-picker-container input[type=button].button.wp-picker-clear {
  padding: 0 15px;
  font-size: 1.2rem;
  line-height: 48px; }
.acf-form .wp-picker-container input[type=button]:hover.button.wp-picker-clear {
  background: #F8EFF8; }
.acf-form .acf-true-false .acf-switch {
  border-radius: 999px !important;
  font-size: 1rem;
  height: 45px;
  border: none;
  background-color: #F0DFF0;
  box-shadow: inset 0 0 3px 0 rgba(136, 0, 136, 0.2), inset -1px -1px 0 0 rgba(68, 0, 68, 0.1); }
  .acf-form .acf-true-false .acf-switch.-on {
    background-color: #880088; }
    .acf-form .acf-true-false .acf-switch.-on .acf-switch-slider {
      left: 50%;
      right: 4px; }
    .acf-form .acf-true-false .acf-switch.-on span {
      color: #FFF; }
  .acf-form .acf-true-false .acf-switch .acf-switch-slider {
    border-radius: 999px;
    border: none;
    top: 4px;
    left: 4px;
    bottom: 4px;
    right: 50%;
    box-shadow: 1px 1px 3px 0 rgba(136, 0, 136, 0.2), 1px 1px 0 0 rgba(68, 0, 68, 0.1); }
  .acf-form .acf-true-false .acf-switch span {
    font-size: 1.2rem;
    line-height: 42px;
    vertical-align: middle;
    padding: 0 16px;
    color: #404; }
  .acf-form .acf-true-false .acf-switch:hover {
    background-color: #DAB0DA; }
    .acf-form .acf-true-false .acf-switch:hover span {
      color: #808; }
    .acf-form .acf-true-false .acf-switch:hover.-on {
      background-color: #606; }
      .acf-form .acf-true-false .acf-switch:hover.-on span {
        color: #FFF; }
.acf-form .acf-form-submit {
  text-align: center; }
  .acf-form .acf-form-submit button {
    border: none; }
.acf-form > .acf-fields > .acf-field {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-gap: 30px;
  padding: 30px 0; }

/*</blog>*/
/*<dashboard>*/
#dashboard.page-wrap h2 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 15px; }
  @media (min-width: 660px) {
    #dashboard.page-wrap h2 {
      font-size: 1.75rem; } }
  @media (min-width: 1200px) {
    #dashboard.page-wrap h2 {
      font-size: 2rem; } }
#dashboard.page-wrap h3 {
  font-size: 1.25rem;
  margin-bottom: 10px; }
  @media (min-width: 660px) {
    #dashboard.page-wrap h3 {
      font-size: 1.5rem; } }
  @media (min-width: 1200px) {
    #dashboard.page-wrap h3 {
      font-size: 1.75rem; } }
#dashboard.page-wrap .dash-content h2 {
  border-bottom: 1px solid #F0DFF0; }
#dashboard.page-wrap .dashboard-welcome {
  position: relative;
  background: #e9f3e7;
  border-radius: 10px;
  padding: 20px 30px;
  margin-bottom: 1.5em;
  font-size: 1.125em; }
  #dashboard.page-wrap .dashboard-welcome p {
    margin: 0.2em 0 0 0;
    line-height: 1.4;
    padding: 0; }

.welcome-dismiss-x {
  position: absolute;
  top: 3px;
  right: 10px;
  color: #808;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
  z-index: 2;
  text-decoration: none;
  transition: color 0.2s; }

.welcome-dismiss-x:hover {
  color: #202;
  text-decoration: none; }

.dash-intro {
  display: block; }
  @media (min-width: 900px) {
    .dash-intro {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 60px; } }
  .dash-intro .dash-text {
    max-width: 550px; }
  .dash-intro .dash-account a {
    display: block; }

.dash-full {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 15px 60px; }
  @media (min-width: 660px) {
    .dash-full {
      grid-template-columns: 1fr 1fr; } }
  @media (min-width: 900px) {
    .dash-full {
      grid-template-columns: 1fr 1fr 1fr; } }

.dash-intro, .dash-full {
  padding-bottom: 30px; }
  @media (min-width: 660px) {
    .dash-intro, .dash-full {
      padding-bottom: 45px; } }
  @media (min-width: 900px) {
    .dash-intro, .dash-full {
      padding-bottom: 60px; } }

#dashboard a.dash-card {
  position: relative;
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-gap: 15px;
  background: #F8EFF8;
  border-radius: 6px;
  padding: 15px;
  color: #202;
  text-decoration: none;
  transition: background-color .2s ease; }
  #dashboard a.dash-card img, #dashboard a.dash-card svg {
    width: 50px;
    height: 50px;
    aspect-ratio: 1/1;
    background-color: #DAB0DA;
    border-radius: 4px; }
  #dashboard a.dash-card img {
    outline: 1px solid rgba(136, 0, 136, 0.1);
    outline-offset: -1px; }
  #dashboard a.dash-card p {
    margin-bottom: 0;
    line-height: 1.2; }
  #dashboard a.dash-card:hover {
    background-color: #F0DFF0; }
  #dashboard a.dash-card.dash-featured {
    background: #404;
    color: #FFF; }
    #dashboard a.dash-card.dash-featured p strong {
      color: #FFF; }
    #dashboard a.dash-card.dash-featured:hover {
      background: #606; }
  #dashboard a.dash-card::after {
    content: "NEW";
    position: absolute;
    top: -5px;
    right: -5px;
    background: #C380C3;
    color: #FFF;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 0.75em;
    line-height: 1;
    display: none;
    /* hidden by default */ }
  #dashboard a.dash-card.new::after {
    display: block;
    /* show only when .new class is present */ }

/*</dashboard>*/
.li-pointer {
  font-size: 1em;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 0 28 24" fill="%23bb2f57"><path d="M18 4c-4-1-6 3-6 3s-2-4-6-3-4 6-2 8l8 8 8-8c2-2 2-7-2-8z"></path></svg>'); }

.li-pointer::marker {
  font-size: 1.6em;
  line-height: .1; }

#CLIPBOARD {
  position: fixed;
  bottom: 9999px;
  right: 9999px;
  width: 500px; }

.notifyBox {
  padding: 0;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  position: absolute;
  z-index: 9999999;
  opacity: 1;
  font-size: 1rem;
  background-color: #C380C3;
  color: #FFF;
  transition: opacity .5s ease;
  pointer-events: none; }
  .notifyBox.fadeOut {
    opacity: 0; }

#slider-width,
#slider-height,
#slider-align,
#slider-1,
#slider-2,
#slider-3,
#slider-4,
#slider-5 {
  position: relative;
  z-index: 1; }

.tooltipBubble {
  background: #c380c3;
  color: white;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.45;
  position: absolute;
  z-index: 9;
  border-radius: 4px;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease; }
  .tooltipBubble.active {
    opacity: 1; }

.tooltipBubble::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 6px;
  background: #c380c3;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0); }

.disabled .tooltipBubble {
  display: none; }

.disable_arrows li:before {
  content: none !important; }

#mepr-account-subscriptions-table .mepr-account-suspend:after, #mepr-account-subscriptions-table .mepr-account-cancel:after {
  content: " subscription"; }
#mepr-account-subscriptions-table .mepr-account-update:after {
  content: " payment"; }

.mepr-account-actions a, td[data-label="Download"] a {
  white-space: nowrap;
  padding: 5px; }
  .mepr-account-actions a:hover, td[data-label="Download"] a:hover {
    background: #F8EFF8; }

.mepr-account-table tbody {
  font-size: 1.2rem;
  line-height: 1.25; }

/* <registration form> */
@media (min-width: 900px) {
  #blogContent .register .mp-form-row:not(.mepr-hidden) {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    line-height: 1.5; }
  #blogContent .register label {
    font-weight: bold;
    display: block !important;
    font-size: 1.25rem; }
  #blogContent .register .mp_wrapper .cc-error,
  #blogContent .register .mp_wrapper .mepr-validation-error {
    padding-left: 0;
    color: #cc3f47; } }
#blogContent .register input,
#blogContent .register select {
  height: min-content; }
  #blogContent .register input.invalid,
  #blogContent .register select.invalid {
    border: 1px solid #cc3f47 !important;
    box-shadow: 0 0 0 2px solid #cc3f47 !important;
    background-color: #faeced !important; }
#blogContent .register .mepr_price {
  margin: 0 auto 37px 0;
  padding: 4px 20px;
  background: #880088;
  color: white;
  display: flex !important;
  border-radius: 99px; }
#blogContent .register ul {
  position: static; }
#blogContent .register .custom-captcha p {
  margin: 0; }
#blogContent .register .custom-captcha-sequence {
  display: none !important; }
#blogContent .register .mepr_error {
  background-color: #f7e2e3 !important; }
  @media (min-width: 900px) {
    #blogContent .register .mepr_error ul li {
      padding-left: 83px !important;
      text-indent: -83px; } }

/* <contact forms (wpform)> */
#blogContent form input[type=text], #blogContent form input[type=email], #blogContent form textarea {
  text-align: left;
  font-size: 1.25rem; }
#blogContent form label.wpforms-field-label {
  font-size: 1.25rem; }
#blogContent form button.wpforms-submit {
  background: #880088;
  color: #FFF;
  border-radius: 99px;
  padding: 10px 30px; }
  #blogContent form button.wpforms-submit:hover {
    background: #aa2068; }

/* </contact forms (wpform)> */
/* <Mailer Lite footer form> */
.ml-subscribe-form a:hover {
  cursor: pointer !important; }
.ml-subscribe-form .subscribe-form {
  padding: 20px 0 0 0; }
.ml-subscribe-form button {
  border: none;
  width: 100%;
  border-radius: 5px;
  height: 45px;
  background-color: #808;
  color: #FFF;
  font-size: 1.125rem;
  text-align: center;
  position: relative; }
  @media (min-width: 660px) {
    .ml-subscribe-form button {
      border-radius: 0 5px 5px 0; } }
  .ml-subscribe-form button:hover {
    background-color: #aa2068; }
.ml-subscribe-form button[disabled] {
  cursor: not-allowed !important; }
.ml-subscribe-form .ml-error {
  color: red; }
.ml-subscribe-form .ml-block-success {
  color: #880088;
  font-size: 1.125rem; }
.ml-subscribe-form form.ml-block-form .subscribe-form {
  display: grid; }
  @media (min-width: 660px) {
    .ml-subscribe-form form.ml-block-form .subscribe-form {
      grid-template-columns: 7fr 3fr; }
      .ml-subscribe-form form.ml-block-form .subscribe-form .form-section.horizontal,
      .ml-subscribe-form form.ml-block-form .subscribe-form .form-section.horizontal.ml-button-position,
      .ml-subscribe-form form.ml-block-form .subscribe-form .form-section.horizontal .form-group {
        width: 100%;
        padding: 0; }
      .ml-subscribe-form form.ml-block-form .subscribe-form .ml-form-visible-xs {
        display: block; }
      .ml-subscribe-form form.ml-block-form .subscribe-form .ml-form-hidden-xs {
        display: none; } }
  .ml-subscribe-form form.ml-block-form .subscribe-form .form-section.horizontal .form-group .form-control {
    height: 45px; }
  .ml-subscribe-form form.ml-block-form .subscribe-form .ml-form-visible-xs {
    display: none; }
  .ml-subscribe-form form.ml-block-form .subscribe-form .form-section.horizontal.ml-button-position.top-padding {
    padding-top: 24px; }
  .ml-subscribe-form form.ml-block-form .subscribe-form .form-section p,
  .ml-subscribe-form form.ml-block-form .subscribe-form .form-section li {
    line-height: 150%; }
.ml-subscribe-form .form-group .form-control {
  width: 100%;
  font-size: 1.125rem;
  padding: 0 10px;
  line-height: 45px;
  border-radius: 5px;
  border: 1px solid #DAB0DA;
  color: #000;
  background-color: #FFF;
  clear: left; }
  @media (min-width: 660px) {
    .ml-subscribe-form .form-group .form-control {
      border-radius: 5px 0 0 5px;
      border-right-width: 0px; } }
.ml-subscribe-form .form-group.ml-error .form-control {
  border-color: red; }

.ml-embedded {
  width: 100%;
  min-height: 260px;
  background: #F8EFF8;
  border-radius: 15px; }
  .ml-embedded input[type=text], .ml-embedded input[type=email] {
    text-align: left;
    text-transform: none;
    box-shadow: none !important; }
    .ml-embedded input[type=text]:focus, .ml-embedded input[type=text] :focus-visible, .ml-embedded input[type=email]:focus, .ml-embedded input[type=email] :focus-visible {
      border-color: #000;
      outline: 2px solid #000; }

/* </Mailer Lite footer form> */