@font-face {
  font-family: "oot-font";
  src: url("../fonts/fontastic/oot-font.eot");
  src: url("../fonts/fontastic/oot-font.eot?#iefix") format("embedded-opentype"), url("../fonts/fontastic/oot-font.woff") format("woff"), url("../fonts/fontastic/oot-font.ttf") format("truetype"), url("../fonts/fontastic/oot-font.svg#oot-font") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* line 12, ../sass/_base-typography-app.scss */
.oot-icon-before:before, .oot-icon-before--twitter:before,
.oot-icon-before--up:before,
.oot-icon-before--down:before, .oot-icon-after:after, .mailchimp-signup .btn-newsletter-signup-submit, .ty-icon-before:before, .ty-icon-before--arrow-down:before,
.ty-icon-before--arrow-right-long:before,
.ty-icon-before--tick:before,
.ty-icon-before--cross:before,
.ty-icon-before--hamburger:before,
.ty-icon-before--close-filled:before,
.ty-icon-before--heart-filled:before,
.ty-icon-before--heart:before, .ty-icon-after:after, .ty-icon-after--arrow-down:after,
.ty-icon-after--arrow-right-long:after,
.ty-icon-after--tick:after,
.ty-icon-after--cross:after,
.ty-icon-after--hamburger:after,
.ty-icon-after--colourpicker:after,
.ty-icon-after--close-filled:after,
.ty-icon-after--heart-filled:after,
.icon-like.is-on:after,
.ty-icon-after--heart:after,
.icon-like:after {
  vertical-align: top;
  font-family: "oot-font";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 23, ../sass/_base-typography-app.scss */
.oot-icon-before, .oot-icon-before--twitter,
.oot-icon-before--up,
.oot-icon-before--down, .oot-icon-after {
  padding: 0;
  line-height: 1;
  text-decoration: none;
}

/* line 31, ../sass/_base-typography-app.scss */
.oot-icon-before:before, .oot-icon-before--twitter:before,
.oot-icon-before--up:before,
.oot-icon-before--down:before {
  font-size: 22px;
  position: relative;
}

/* line 39, ../sass/_base-typography-app.scss */
.oot-icon-after:after {
  font-size: 22px;
  position: relative;
}

/* line 50, ../sass/_base-typography-app.scss */
.oot-icon-before--twitter:before {
  content: 'e';
}

/* line 53, ../sass/_base-typography-app.scss */
.oot-icon-before--up:before {
  content: 'k';
}

/* line 56, ../sass/_base-typography-app.scss */
.oot-icon-before--down:before {
  content: 'l';
}

/* line 5, ../../../../../../Users/reflection/.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../Users/reflection/.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../Users/reflection/.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../Users/reflection/.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../Users/reflection/.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../Users/reflection/.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../Users/reflection/.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../Users/reflection/.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../Users/reflection/.rvm/gems/ruby-2.4.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* line 1, ../sass/_reset.scss */
* {
  text-decoration: none;
}

/* line 4, ../sass/_reset.scss */
address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul,
li {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 9, ../sass/_reset.scss */
a {
  outline: none;
  border-color: transparent;
  -moz-transition: color 0.2s, background-color 0.2s;
  -o-transition: color 0.2s, background-color 0.2s;
  -webkit-transition: color 0.2s, background-color 0.2s;
  transition: color 0.2s, background-color 0.2s;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* line 14, ../sass/_reset.scss */
a:hover {
  -moz-transition: color 0.3s, background-color 0.3s;
  -o-transition: color 0.3s, background-color 0.3s;
  -webkit-transition: color 0.3s, background-color 0.3s;
  transition: color 0.3s, background-color 0.3s;
}

/* line 18, ../sass/_reset.scss */
.no-touch * {
  -webkit-tap-highlight-color: transparent;
}

/* line 21, ../sass/_reset.scss */
input::-ms-clear {
  display: none;
}

/* line 16, ../sass/utilities/_variables.scss */
.ty-typeschool-main .ty-typeschool-intro, .modular-scale-preview-row {
  height: 100%;
}
/* line 18, ../sass/utilities/_variables.scss */
.ty-typeschool-main .ty-typeschool-intro:before, .modular-scale-preview-row:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.35em;
  /* Adjusts for spacing */
}
/* line 26, ../sass/utilities/_variables.scss */
.ty-typeschool-main .ty-typeschool-intro > *, .modular-scale-preview-row > * {
  display: inline-block;
  vertical-align: middle;
}

/* line 1, ../sass/utilities/_helpers.scss */
.overflow-hidden {
  overflow: hidden;
}

/* Typography */
/* line 3, ../sass/templates/_typography-app.scss */
.grid-switch {
  margin: 18px 21px 0 0;
  display: inline-block;
  float: right;
  font-size: 14px;
}
/* line 8, ../sass/templates/_typography-app.scss */
.grid-switch:before {
  margin-right: 10px;
  vertical-align: middle;
}
/* line 12, ../sass/templates/_typography-app.scss */
.grid-switch span {
  position: relative;
  top: 2px;
  display: inline-block;
  vertical-align: middle;
}

/* line 19, ../sass/templates/_typography-app.scss */
.grid-switch {
  margin-top: 23px;
}

/* line 23, ../sass/templates/_typography-app.scss */
.ty-toolbox,
.element-settings-panel {
  position: fixed;
  width: 230px;
  height: 100vh;
  padding: 0 0 6px;
  overflow: auto;
  z-index: 1000;
  color: #30716b;
  background: #313131;
}
/* line 33, ../sass/templates/_typography-app.scss */
.popup-is-showing .ty-toolbox, .popup-is-showing
.element-settings-panel {
  opacity: 0.2;
  transition: opacity 0.3s;
}
/* line 37, ../sass/templates/_typography-app.scss */
.ty-toolbox h2, .ty-toolbox h3, .ty-toolbox h4,
.element-settings-panel h2,
.element-settings-panel h3,
.element-settings-panel h4 {
  margin: 0;
}
/* line 40, ../sass/templates/_typography-app.scss */
.ty-toolbox h2,
.element-settings-panel h2 {
  margin: 0;
  padding: 0;
}
/* line 44, ../sass/templates/_typography-app.scss */
.ty-toolbox h3,
.element-settings-panel h3 {
  font-size: 18px;
  font-weight: 600;
}
/* line 48, ../sass/templates/_typography-app.scss */
.ty-toolbox h4,
.element-settings-panel h4 {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
}

/* line 56, ../sass/templates/_typography-app.scss */
.ty-toolbox h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid #79aca7;
}

/* line 61, ../sass/templates/_typography-app.scss */
.element-settings-panel {
  left: -230px;
  padding-top: 22px;
  transition: left 0.3s;
}
/* line 65, ../sass/templates/_typography-app.scss */
.element-settings-panel.is-showing {
  left: 0px;
  transition: left 0.3s;
}
/* line 69, ../sass/templates/_typography-app.scss */
.element-settings-panel .element-settings-panel__title {
  margin: 0px 35px 27px 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #b2b2b2;
}
/* line 75, ../sass/templates/_typography-app.scss */
.element-settings-panel .element-settings-panel__title em {
  padding: 11px 0 0;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #f2f8f8;
}
/* line 84, ../sass/templates/_typography-app.scss */
.element-settings-panel .ty-toolbox__toolset {
  position: relative;
  overflow: visible;
  margin-bottom: 5px;
}
/* line 89, ../sass/templates/_typography-app.scss */
.element-settings-panel .ty-button--small:last-child {
  margin: 30px 0 0 20px;
}

/* line 93, ../sass/templates/_typography-app.scss */
.font-source-container {
  position: relative;
  overflow: visible;
}
/* line 96, ../sass/templates/_typography-app.scss */
.font-source-container .ty-toolbox__toolset {
  position: relative;
  margin-bottom: 15px;
  overflow: visible;
}

/* line 102, ../sass/templates/_typography-app.scss */
.ty-toolbox__footer {
  padding: 0 20px;
  position: relative;
  overflow: visible;
}
/* line 106, ../sass/templates/_typography-app.scss */
.ty-toolbox__footer .ty-button {
  margin-bottom: 8px;
}
/* line 111, ../sass/templates/_typography-app.scss */
.is-showing-helper--pick-fonts .ty-toolbox__footer:not(:last-child), .is-showing-font-pairing .ty-toolbox__footer:not(:last-child) {
  opacity: 0.1;
}

/* line 116, ../sass/templates/_typography-app.scss */
.toolbox-small-label {
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #b2b2b2;
  display: block;
}

/* line 124, ../sass/templates/_typography-app.scss */
.nb-text {
  padding: 10px 0 0 3px;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #6F6F6F;
  line-height: 1.5;
}
/* line 132, ../sass/templates/_typography-app.scss */
.nb-text span {
  color: #E6E6E6;
}
/* line 135, ../sass/templates/_typography-app.scss */
.nb-text a {
  color: #706AF1;
}

/* line 139, ../sass/templates/_typography-app.scss */
.element-settings-panel__colour-container,
.element-settings-panel__caps-container {
  margin-bottom: 10px;
  display: inline-block;
  vertical-align: top;
}
/* line 144, ../sass/templates/_typography-app.scss */
.element-settings-panel__colour-container > label,
.element-settings-panel__caps-container > label {
  margin-bottom: 8px;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #b2b2b2;
}

/* line 153, ../sass/templates/_typography-app.scss */
.element-settings-panel__colour-container {
  width: 125px;
  margin-left: 20px;
}
/* line 156, ../sass/templates/_typography-app.scss */
.element-settings-panel__colour-container > label {
  margin-bottom: 10px;
}

/* line 160, ../sass/templates/_typography-app.scss */
.element-settings-panel__caps-container {
  width: 63px;
  display: inline-block;
}
/* line 163, ../sass/templates/_typography-app.scss */
.element-settings-panel__caps-container > label {
  text-align: center;
}

/* line 167, ../sass/templates/_typography-app.scss */
.logo-text {
  margin: 18px 0 14px 22px;
  color: #1e1e1e;
  font-size: 28px;
  text-transform: uppercase;
}
/* line 172, ../sass/templates/_typography-app.scss */
.logo-text img {
  width: 110px;
}

/* line 176, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion {
  border-top: 1px solid #1f1f1f;
  border-bottom: 1px solid #1f1f1f;
}
/* line 179, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion li {
  position: relative;
  padding-bottom: 5px;
  border-top: 1px solid #1f1f1f;
  border-bottom: 1px solid #1f1f1f;
}
/* line 184, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion li h3 {
  padding: 19px 0 13px 20px;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #f2f8f8;
  cursor: pointer;
}
/* line 194, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion .ty-icon-after--arrow-down:after {
  position: absolute;
  top: 18px;
  right: 15px;
  font-size: 26px;
  color: #494949;
}
/* line 202, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion .ty-icon-after--arrow-down.is-open:after {
  color: #706af1;
}
/* line 207, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion + .ty-toolbox__footer {
  margin-top: 40px;
}
/* line 210, ../sass/templates/_typography-app.scss */
.is-showing-helper--pick-fonts .ty-toolbox__accordion, .is-showing-font-pairing .ty-toolbox__accordion {
  border-bottom: 1px solid rgba(31, 31, 31, 0.17);
}
/* line 213, ../sass/templates/_typography-app.scss */
.is-showing-helper--pick-fonts .ty-toolbox__accordion li:nth-child(2),
.is-showing-helper--pick-fonts .ty-toolbox__accordion li:nth-child(3), .is-showing-font-pairing .ty-toolbox__accordion li:nth-child(2),
.is-showing-font-pairing .ty-toolbox__accordion li:nth-child(3) {
  opacity: 0.1;
}

/* line 219, ../sass/templates/_typography-app.scss */
.ty-toolbox__toolset {
  margin: 0 20px;
}
/* line 221, ../sass/templates/_typography-app.scss */
.ty-toolbox__toolset .ty-button--action {
  margin-top: 10px;
  margin-bottom: 14px;
}
/* line 225, ../sass/templates/_typography-app.scss */
.ty-toolbox__toolset h4 {
  margin-bottom: 7px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: #b2b2b2;
  text-align: left;
}
/* line 232, ../sass/templates/_typography-app.scss */
.ty-toolbox__toolset .filter-list {
  margin: 10px 0;
}
/* line 234, ../sass/templates/_typography-app.scss */
.ty-toolbox__toolset .filter-list li {
  padding-bottom: 0;
  border-bottom: 0;
}

/* line 240, ../sass/templates/_typography-app.scss */
.ty-toolbox__find-container {
  margin: 0 20px 11px;
}

/* line 243, ../sass/templates/_typography-app.scss */
.ty-input,
.ty-dropdown {
  width: 100%;
  padding: 0 13px;
  margin-bottom: 8px;
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 34px;
  color: #f2f8f8;
  border: 1px solid #181818;
  border-radius: 5px;
  background-color: #1f1f1f;
}

/* line 260, ../sass/templates/_typography-app.scss */
.ty-input-range {
  width: 100%;
}

/* line 263, ../sass/templates/_typography-app.scss */
.ty-typeschool-main {
  position: fixed;
  left: 230px;
  top: 0;
  width: calc(100% - 230px);
  height: 100vh;
  z-index: 100;
  color: #fcfdfd;
  background-color: #706af1;
}
/* line 272, ../sass/templates/_typography-app.scss */
.ty-typeschool-main.is-closed {
  left: calc(100% - 10px);
  transition: left 0.5s;
}
/* line 276, ../sass/templates/_typography-app.scss */
.ty-typeschool-main .ty-typeschool-intro {
  width: 500px;
  display: inline-block;
  float: right;
  margin-right: 80px;
}
/* line 283, ../sass/templates/_typography-app.scss */
.ty-typeschool-main .ty-title {
  margin-bottom: 41px;
  font-size: 80px;
  line-height: 1.12;
  text-align: right;
  overflow: visible;
}
/* line 289, ../sass/templates/_typography-app.scss */
.ty-typeschool-main .ty-title span {
  text-decoration: line-through;
}
/* line 293, ../sass/templates/_typography-app.scss */
.ty-typeschool-main p {
  margin: 40px 0 0;
  font-size: 18px;
  line-height: 1.5;
  text-align: right;
}

/* line 300, ../sass/templates/_typography-app.scss */
.input-button {
  position: relative;
  left: 8px;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
/* line 306, ../sass/templates/_typography-app.scss */
.input-button:before {
  color: #494949;
  font-size: 19px !important;
}
/* line 311, ../sass/templates/_typography-app.scss */
.input-button:hover:before {
  color: #636363;
}
/* line 315, ../sass/templates/_typography-app.scss */
.input-button.input-button--add {
  left: 6px;
  transform: rotate(45deg);
}

/* line 320, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion__modular-scale .ty-input.input-global-base-font-size-two,
.ty-toolbox__accordion__modular-scale .ty-input.input-modular-scale-ratio-two {
  display: none;
}
/* line 323, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion__modular-scale .ty-input.input-global-base-font-size-two + .input-button,
.ty-toolbox__accordion__modular-scale .ty-input.input-modular-scale-ratio-two + .input-button {
  display: none;
}
/* line 326, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion__modular-scale .ty-input.input-global-base-font-size-two.is-showing,
.ty-toolbox__accordion__modular-scale .ty-input.input-modular-scale-ratio-two.is-showing {
  display: inline-block;
}
/* line 328, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion__modular-scale .ty-input.input-global-base-font-size-two.is-showing + .input-button,
.ty-toolbox__accordion__modular-scale .ty-input.input-modular-scale-ratio-two.is-showing + .input-button {
  display: inline-block;
  vertical-align: middle;
}

/* line 334, ../sass/templates/_typography-app.scss */
.close-element-settings-icon.ty-icon-after--cross {
  position: fixed;
  top: 22px;
  right: 30px;
  display: none;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}
/* line 343, ../sass/templates/_typography-app.scss */
.close-element-settings-icon.ty-icon-after--cross:after {
  font-size: 19px;
  color: #494949;
  transition: color 0.2s;
}
/* line 349, ../sass/templates/_typography-app.scss */
.close-element-settings-icon.ty-icon-after--cross:hover:after {
  color: #706af1;
  transition: color 0.3s;
}
/* line 354, ../sass/templates/_typography-app.scss */
.preview-container.is-showing .close-element-settings-icon.ty-icon-after--cross {
  display: block;
}

/* line 358, ../sass/templates/_typography-app.scss */
.ty-typeschool-intro__centred {
  margin-top: -40px;
}

/* line 361, ../sass/templates/_typography-app.scss */
.ty-typeschool-intro__start-link {
  position: relative;
  margin-top: 70px;
  padding-right: 42px;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  color: #fcfdfd;
  text-align: right;
  text-decoration: underline;
}
/* line 373, ../sass/templates/_typography-app.scss */
.ty-typeschool-intro__start-link.ty-icon-after--arrow-right-long:after {
  position: absolute;
  top: 5px;
  right: 2px;
  margin-left: 0px;
  font-size: 32px;
}

/* line 381, ../sass/templates/_typography-app.scss */
.ty-header {
  position: fixed;
  left: 230px;
  width: calc(100% - 230px);
  height: 61px;
  padding: 0 30px 0 22px;
  z-index: 10;
  float: right;
  text-align: left;
  background-color: #e6e6e6;
  border-bottom: 1px solid #cccccc;
}

/* line 393, ../sass/templates/_typography-app.scss */
.ty-project-name {
  margin-top: 13px;
  display: inline-block;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
}
/* line 398, ../sass/templates/_typography-app.scss */
.ty-project-name img, .ty-project-name .project-name {
  display: inline-block;
  vertical-align: middle;
}
/* line 402, ../sass/templates/_typography-app.scss */
.ty-project-name img {
  width: 28px;
  max-height: 34px;
  margin-right: 15px;
}
/* line 407, ../sass/templates/_typography-app.scss */
.ty-project-name .project-name {
  max-width: 350px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  font-weight: 500;
}
/* line 415, ../sass/templates/_typography-app.scss */
.ty-project-name a.project-name {
  color: #706AF1;
  transition: color 0.3s;
}
/* line 418, ../sass/templates/_typography-app.scss */
.ty-project-name a.project-name:hover {
  color: #544fb4;
}
/* line 422, ../sass/templates/_typography-app.scss */
.ty-project-name button {
  margin-left: 40px;
}

/* line 426, ../sass/templates/_typography-app.scss */
.ty-account-name-container {
  padding-top: 14px;
  float: right;
  display: inline-block;
  font-size: 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}
/* line 433, ../sass/templates/_typography-app.scss */
.ty-account-name-container > div, .ty-account-name-container img, .ty-account-name-container span, .ty-account-name-container button {
  display: inline-block;
  vertical-align: middle;
}
/* line 437, ../sass/templates/_typography-app.scss */
.ty-account-name-container span {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  color: #1F1F1F;
}
/* line 442, ../sass/templates/_typography-app.scss */
.ty-account-name-container a {
  position: relative;
  top: 1px;
  font-size: 12px;
  color: #706AF1;
  transition: color 0.3s;
}
/* line 448, ../sass/templates/_typography-app.scss */
.ty-account-name-container a:hover {
  color: #544fb4;
}

/* line 453, ../sass/templates/_typography-app.scss */
.ty-save-changes-container {
  display: inline-block;
  vertical-align: middle;
}
/* line 456, ../sass/templates/_typography-app.scss */
.ty-save-changes-container .save-state {
  position: relative;
  top: 1px;
  margin-left: 15px;
  font-size: 12px;
  font-weight: 500;
  color: #6F6F6F;
}

/* line 466, ../sass/templates/_typography-app.scss */
.ty-user-info span {
  position: relative;
  top: 1px;
  margin-right: 17px;
  font-weight: 500;
}

/* line 473, ../sass/templates/_typography-app.scss */
.ty-user-avatar {
  width: 32px;
  margin-right: 10px;
  border-radius: 16px;
}

/* line 478, ../sass/templates/_typography-app.scss */
.header-drop-down-menu {
  position: fixed;
  left: 230px;
  width: calc(100% - 230px);
  height: calc(100vh - 61px);
  top: 61px;
  z-index: 10;
  background-color: rgba(31, 31, 31, 0.3);
}
/* line 486, ../sass/templates/_typography-app.scss */
.header-drop-down-menu nav, .header-drop-down-menu .header-drop-down-menu__content {
  width: 100%;
  padding: 20px;
  background-color: #E6E6E6;
}
/* line 491, ../sass/templates/_typography-app.scss */
.header-drop-down-menu h2 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
}
/* line 496, ../sass/templates/_typography-app.scss */
.header-drop-down-menu ul, .header-drop-down-menu li {
  width: 100%;
}
/* line 499, ../sass/templates/_typography-app.scss */
.header-drop-down-menu li {
  padding: 13px 0 13px 1px;
  border-bottom: 1px solid #CCC;
}
/* line 502, ../sass/templates/_typography-app.scss */
.header-drop-down-menu li:last-child {
  border-bottom: none;
}
/* line 505, ../sass/templates/_typography-app.scss */
.header-drop-down-menu li a {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #706AF1;
  transition: color 0.3s;
}
/* line 511, ../sass/templates/_typography-app.scss */
.header-drop-down-menu li a:hover {
  color: #544fb4;
}

/* line 517, ../sass/templates/_typography-app.scss */
.header-drop-down-menu.header-drop-down-menu--full-page {
  left: 0;
  width: 100%;
  height: 100vh;
  top: 0;
  z-index: 1000;
  background-color: rgba(31, 31, 31, 0.5);
}
/* line 524, ../sass/templates/_typography-app.scss */
.header-drop-down-menu.header-drop-down-menu--full-page .header-drop-down-menu__content {
  padding: 70px 0 50px;
}

/* line 529, ../sass/templates/_typography-app.scss */
.header-drop-down-menu .header-drop-down-menu__center {
  text-align: center;
  background-color: #E6E6E6;
}

/* line 533, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content {
  width: auto;
  padding: 42px 0 30px;
  margin: 0 auto;
  display: inline-block;
  text-align: left;
}
/* line 539, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content img,
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__text,
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions {
  display: inline-block;
  vertical-align: top;
}
/* line 545, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .icon-save-docs {
  position: relative;
  top: 4px;
  width: 107px;
  margin-right: 40px;
}
/* line 551, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__text {
  width: 387px;
  margin-right: 50px;
}
/* line 554, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__text h2 {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
}
/* line 559, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__text p {
  font-size: 16px;
  line-height: 1.5;
}
/* line 564, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions {
  position: relative;
  top: 5px;
  width: 190px;
}
/* line 568, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions .ty-button {
  margin-bottom: 24px;
}
/* line 571, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions span + .ty-button {
  margin-top: 24px;
}
/* line 574, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions .text-action {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  color: #706AF1;
  transition: color 0.3s;
}
/* line 583, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions .text-action:hover {
  color: #544fb4;
}
/* line 587, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions span {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
  color: #6F6F6F;
}
/* line 594, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions span a {
  color: #706AF1;
  transition: color 0.3s;
}
/* line 597, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions span a:hover {
  color: #544fb4;
}
/* line 602, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content .header-drop-down-menu__content__actions .header-drop-down-menu__price-container + span {
  font-weight: 500;
  text-align: left;
}
/* line 607, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content a {
  color: #706AF1;
  transition: color 0.3s;
}
/* line 610, ../sass/templates/_typography-app.scss */
.header-drop-down-menu div.header-drop-down-menu__content a:hover {
  color: #544fb4;
}

/* line 615, ../sass/templates/_typography-app.scss */
.info-box {
  padding: 16px;
  margin-bottom: 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #313131;
  border-radius: 8px;
  background-color: rgba(72, 186, 142, 0.5);
}

/* line 626, ../sass/templates/_typography-app.scss */
.header-drop-down-menu__price-container {
  margin-bottom: 16px;
  color: #313131;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 16px;
}
/* line 632, ../sass/templates/_typography-app.scss */
.header-drop-down-menu__price-container b {
  font-size: 30px;
}
/* line 635, ../sass/templates/_typography-app.scss */
.header-drop-down-menu__price-container s {
  text-decoration: line-through;
  color: #9c9c9c;
}

/* line 640, ../sass/templates/_typography-app.scss */
.page-settings-container {
  position: absolute;
  top: 56px;
  right: 22px;
  z-index: 5;
}

/* line 646, ../sass/templates/_typography-app.scss */
.grid-toggle-container,
.caps-toggle-container {
  padding: 5px 9px 5px 6px;
  margin-top: 14px;
  border: 1px solid #b2b2b2;
  border-radius: 6px;
  display: inline-block;
  vertical-align: middle;
  background-color: #e6e6e6;
}

/* line 659, ../sass/templates/_typography-app.scss */
.toggle-container label,
.grid-toggle-container label,
.caps-toggle-container label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
/* line 664, ../sass/templates/_typography-app.scss */
.toggle-container .label-checkbox,
.grid-toggle-container .label-checkbox,
.caps-toggle-container .label-checkbox {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  background-color: transparent;
  border: 1px solid #b2b2b2;
  border-radius: 3px;
  transition: background-color 0.2s;
}
/* line 672, ../sass/templates/_typography-app.scss */
.toggle-container .label-checkbox.ty-icon-before--tick:before,
.grid-toggle-container .label-checkbox.ty-icon-before--tick:before,
.caps-toggle-container .label-checkbox.ty-icon-before--tick:before {
  position: relative;
  top: 3px;
  font-size: 12px;
  color: #e6e6e6;
}
/* line 677, ../sass/templates/_typography-app.scss */
.preview-container .toggle-container .label-checkbox.ty-icon-before--tick:before, .preview-container
.grid-toggle-container .label-checkbox.ty-icon-before--tick:before, .preview-container
.caps-toggle-container .label-checkbox.ty-icon-before--tick:before {
  color: #fcfdfd;
}
/* line 682, ../sass/templates/_typography-app.scss */
.toggle-container input[type=checkbox],
.grid-toggle-container input[type=checkbox],
.caps-toggle-container input[type=checkbox] {
  position: absolute;
  left: -9999rem;
}
/* line 686, ../sass/templates/_typography-app.scss */
.toggle-container input[type=checkbox]:checked + .label-checkbox,
.grid-toggle-container input[type=checkbox]:checked + .label-checkbox,
.caps-toggle-container input[type=checkbox]:checked + .label-checkbox {
  border: 1px solid #e6e6e6;
  background-color: #706af1;
  transition: background-color 0.3s;
}
/* line 691, ../sass/templates/_typography-app.scss */
.toggle-container .label-text,
.grid-toggle-container .label-text,
.caps-toggle-container .label-text {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2a2a2a;
}

/* line 701, ../sass/templates/_typography-app.scss */
.grid-toggle-container .label-checkbox.ty-icon-before--tick:before,
.caps-toggle-container .label-checkbox.ty-icon-before--tick:before {
  left: 3px;
}

/* line 706, ../sass/templates/_typography-app.scss */
.caps-toggle-container {
  margin-top: 0;
  background-color: #3d3d3d;
  border: 1px solid #181818;
}
/* line 710, ../sass/templates/_typography-app.scss */
.caps-toggle-container .label-text {
  font-family: "Montserrat", sans-serif;
  font-size: 14.5px;
  color: #bcbcbc;
}
/* line 714, ../sass/templates/_typography-app.scss */
.caps-toggle-container .label-text span {
  padding-right: 1px;
  display: inline-block;
}

/* line 721, ../sass/templates/_typography-app.scss */
.caps-toggle-container.caps-toggle-container--dark .label-checkbox {
  border: none;
  background: #313131;
}
/* line 724, ../sass/templates/_typography-app.scss */
.caps-toggle-container.caps-toggle-container--dark .label-checkbox.ty-icon-before--tick:before {
  color: #313131;
  transition: color 0.2s;
}
/* line 729, ../sass/templates/_typography-app.scss */
.caps-toggle-container.caps-toggle-container--dark input[type=checkbox]:checked + .label-checkbox {
  border: none;
  background: #313131;
}
/* line 732, ../sass/templates/_typography-app.scss */
.caps-toggle-container.caps-toggle-container--dark input[type=checkbox]:checked + .label-checkbox.ty-icon-before--tick:before {
  color: #fcfdfd;
  border: none;
  transition: color 0.2s;
}

/* line 739, ../sass/templates/_typography-app.scss */
.label-colourpicker.ty-icon-after--colourpicker {
  margin: 12px 5px 0 13px;
  display: inline-block;
  vertical-align: middle;
}
/* line 743, ../sass/templates/_typography-app.scss */
.label-colourpicker.ty-icon-after--colourpicker:after {
  font-size: 17px;
  color: #2a2a2a;
}

/* line 748, ../sass/templates/_typography-app.scss */
.colourpicker {
  margin-top: 14px;
  vertical-align: top;
  font-size: 0;
  display: inline-block;
  border: 1px solid #b2b2b2;
  border-radius: 6px;
  background-color: #e6e6e6;
}
/* line 756, ../sass/templates/_typography-app.scss */
.colourpicker .colourpicker__text-button,
.colourpicker .colourpicker__background-button {
  width: 34px;
  height: 30px;
  line-height: 27px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
}

/* line 767, ../sass/templates/_typography-app.scss */
.colourpicker__text-button {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #2a2a2a;
  border-right: 1px solid #b2b2b2;
}
/* line 773, ../sass/templates/_typography-app.scss */
.colourpicker__text-button:hover {
  color: #5d5d5d;
}

/* line 778, ../sass/templates/_typography-app.scss */
.colourpicker__background-button span {
  width: 12px;
  height: 12px;
  margin-top: 8px;
  display: inline-block;
  border: 1px solid #313131;
  border-radius: 3px;
}
/* line 787, ../sass/templates/_typography-app.scss */
.colourpicker__background-button:hover span {
  border-color: #646464;
}

/* line 792, ../sass/templates/_typography-app.scss */
.input-set-global-custom-colour {
  position: absolute;
  left: -9999em;
}

/* line 796, ../sass/templates/_typography-app.scss */
.ty-site-links {
  padding-top: 23px;
  padding-right: 10px;
  float: right;
  display: inline-block;
  vertical-align: middle;
}
/* line 802, ../sass/templates/_typography-app.scss */
.ty-site-links li {
  padding-right: 23px;
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
}
/* line 809, ../sass/templates/_typography-app.scss */
.ty-site-links a {
  font-size: 14px;
  font-weight: 500;
  color: #706AF1;
  transition: color 0.3s;
}
/* line 814, ../sass/templates/_typography-app.scss */
.ty-site-links a:hover {
  color: #544fb4;
}

/* line 819, ../sass/templates/_typography-app.scss */
.ty-main {
  position: relative;
  width: calc(100% - 230px);
  padding: 0 22px;
  float: right;
  text-align: left;
  overflow: visible;
}
/* line 826, ../sass/templates/_typography-app.scss */
.popup-is-showing .ty-main {
  opacity: 0.2;
  transition: opacity 0.3s;
}
/* line 830, ../sass/templates/_typography-app.scss */
.page-takeover-is-showing .ty-main {
  background-color: #a7a7a7;
}
/* line 835, ../sass/templates/_typography-app.scss */
.is-showing-helper--pick-fonts .ty-main *, .is-showing-font-pairing .ty-main * {
  opacity: 0.6;
  transition: opacity 0.2s;
}

/* line 841, ../sass/templates/_typography-app.scss */
.ty-main-content {
  position: relative;
  top: 61px;
  left: 50%;
  width: 660px;
  margin-top: 6rem;
  margin-left: -330px;
  padding-bottom: 6rem;
  display: inline-block;
  text-align: left;
  overflow: visible;
  transition: width 1s;
}
/* line 853, ../sass/templates/_typography-app.scss */
.ty-main-content .js-element {
  overflow: visible;
}
/* line 856, ../sass/templates/_typography-app.scss */
.page-takeover-is-showing .ty-main-content {
  left: 0;
  margin-left: 22px;
}
/* line 860, ../sass/templates/_typography-app.scss */
.ty-main-content.is-720 {
  width: 320px;
  transition: width 1s;
}

/* line 866, ../sass/templates/_typography-app.scss */
.baseline-grid-overlay ul {
  position: absolute;
  width: 100%;
  top: 61px;
  left: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
/* line 875, ../sass/templates/_typography-app.scss */
.baseline-grid-overlay ul li {
  height: 3rem;
  margin: 0;
  display: block;
  border-bottom: 1px solid #c9c5c5;
}
/* line 880, ../sass/templates/_typography-app.scss */
.page-takeover-is-showing .baseline-grid-overlay ul li {
  border-bottom: 1px solid #a7a7a7;
}
/* line 884, ../sass/templates/_typography-app.scss */
.baseline-grid-overlay ul.baseline-overlay-on {
  opacity: 0.6;
  transition: opacity 0.3s;
}

/* line 890, ../sass/templates/_typography-app.scss */
.popup {
  position: fixed;
  visibility: hidden;
  opacity: 0;
}
/* line 894, ../sass/templates/_typography-app.scss */
.popup.is-showing {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.3s;
}

/* line 900, ../sass/templates/_typography-app.scss */
.popup--font-list {
  left: -230px;
  width: 230px;
  height: 100vh;
  padding: 20px 0 0 0;
  z-index: 2000;
  overflow: visible;
  opacity: 1;
  color: #fff;
  background-color: #313131;
  transition: left 0.2s;
}
/* line 911, ../sass/templates/_typography-app.scss */
.popup--font-list.is-showing {
  left: 0;
  transition: left 0.3s;
}

/* line 916, ../sass/templates/_typography-app.scss */
.popup--font-list-container {
  padding-top: 20px;
  height: calc(100vh - 217px);
  overflow: auto;
  border-top: 1px solid #1f1f1f;
}
/* line 921, ../sass/templates/_typography-app.scss */
.popup--font-list-container li {
  height: 30px;
  padding-right: 20px;
  padding-left: 30px;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 933, ../sass/templates/_typography-app.scss */
.popup__heading {
  margin-left: 20px;
  margin-bottom: 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #f2f8f8;
}

/* line 940, ../sass/templates/_typography-app.scss */
.filter-list {
  margin: 20px 20px 14px;
  font-size: 0;
  border-radius: 5px;
  border: 1px solid #000;
  border-top: 0;
}
/* line 946, ../sass/templates/_typography-app.scss */
.filter-list li {
  width: 50%;
  display: inline-block;
  border-top: 1px solid #000;
}
/* line 950, ../sass/templates/_typography-app.scss */
.filter-list li label {
  padding: 9px 0 8px;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 11px;
  text-align: center;
  background-color: #3d3d3d;
  cursor: pointer;
}
/* line 961, ../sass/templates/_typography-app.scss */
.filter-list li input {
  display: none;
}
/* line 964, ../sass/templates/_typography-app.scss */
.filter-list li input:checked + label {
  background-color: #5753b9;
}
/* line 967, ../sass/templates/_typography-app.scss */
.filter-list li:nth-child(odd) {
  border-right: 1px solid #000;
}
/* line 970, ../sass/templates/_typography-app.scss */
.filter-list li:first-child, .filter-list li:nth-child(2) {
  border-top: 0;
}
/* line 975, ../sass/templates/_typography-app.scss */
.filter-list.theme-light {
  border-radius: 0;
  border: none;
}
/* line 978, ../sass/templates/_typography-app.scss */
.filter-list.theme-light li {
  border: none;
}
/* line 981, ../sass/templates/_typography-app.scss */
.filter-list.theme-light li:first-child label {
  border-radius: 5px 0 0 5px;
}
/* line 986, ../sass/templates/_typography-app.scss */
.filter-list.theme-light li:last-child label {
  border-radius: 0 5px 5px 0;
}
/* line 990, ../sass/templates/_typography-app.scss */
.filter-list.theme-light li label {
  color: #706AF1;
  border: 1px solid #B2B2B2;
  background: #E6E6E6;
}
/* line 995, ../sass/templates/_typography-app.scss */
.filter-list.theme-light li input:checked + label {
  color: #fff;
  border-color: #706AF1;
  background-color: #706AF1;
}

/* line 1003, ../sass/templates/_typography-app.scss */
.find-input {
  display: block;
  box-sizing: border-box;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 34px;
  color: #6f6f6f;
  border: 1px solid #181818;
  border-radius: 5px;
  background-color: #1f1f1f;
}

/* line 1016, ../sass/templates/_typography-app.scss */
.popup--css-styles {
  top: 60px;
  left: 50%;
  width: 600px;
  height: 800px;
  margin-left: -300px;
  padding: 20px;
  overflow: auto;
  font-family: "Lora", serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
  background-color: #222;
}

/* line 1031, ../sass/templates/_typography-app.scss */
.page-takeover,
.page-takeover-element-editing,
.page-takeover-font-pairing {
  position: fixed;
  height: 100vh;
  overflow: auto;
  top: 0;
  right: -100%;
  z-index: 101;
  background-color: #e6e6e6;
  transition: right 0.5s ease-in;
}

/* line 1044, ../sass/templates/_typography-app.scss */
.page-takeover-is-showing .page-takeover {
  right: 0;
  transition: right 0.5s ease-out;
}

/* line 1049, ../sass/templates/_typography-app.scss */
.page-takeover-element-editing {
  width: calc(100% - 230px);
}

/* line 1052, ../sass/templates/_typography-app.scss */
.page-takeover-element-editing.is-showing,
.is-showing-font-pairing .page-takeover-font-pairing {
  right: 0;
  z-index: 1000;
  transition: right 0.5s;
}

/* line 1058, ../sass/templates/_typography-app.scss */
.page-takeover-font-pairing {
  top: 61px;
  width: calc(100% - 230px);
  height: calc(100vh - 61px);
  text-align: center;
  border-left: 10px solid #706af1;
}

/* line 1065, ../sass/templates/_typography-app.scss */
.page-takeover--modular-scale {
  top: 61px;
  width: calc(100% - 421px);
  padding-bottom: 61px;
  border-left: 10px solid #706af1;
}
/* line 1070, ../sass/templates/_typography-app.scss */
.page-takeover-is-showing .page-takeover--modular-scale {
  right: -20px;
}
/* line 1073, ../sass/templates/_typography-app.scss */
.page-takeover--modular-scale li.is-hidden {
  display: none;
}

/* line 1077, ../sass/templates/_typography-app.scss */
.modular-scale-preview-row {
  min-height: 75px;
  border-bottom: 1px solid #d4d4d4;
}
/* line 1081, ../sass/templates/_typography-app.scss */
.modular-scale-preview-row:before {
  min-height: 75px;
}
/* line 1084, ../sass/templates/_typography-app.scss */
.modular-scale-preview-row .modular-scale-components {
  width: 223px;
  padding-left: 30px;
  display: inline-block;
  vertical-align: middle;
}
/* line 1090, ../sass/templates/_typography-app.scss */
.modular-scale-preview-row .modular-scale-font-label {
  padding-bottom: 11px;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2a2a2a;
}
/* line 1097, ../sass/templates/_typography-app.scss */
.modular-scale-preview-row .modular-scale-font-label span {
  font-size: 12px;
  font-weight: 400;
}
/* line 1102, ../sass/templates/_typography-app.scss */
.modular-scale-preview-row .modular-scale-font-size {
  width: calc(100% - 230px);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  line-height: 1.5;
  color: #aaa;
}

/* line 1114, ../sass/templates/_typography-app.scss */
.selected-element .modular-scale-font-size {
  color: #313131;
}

/* line 1117, ../sass/templates/_typography-app.scss */
.modular-scale-select-element {
  width: 145px;
  display: inline-block;
  float: left;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
}

/* line 1124, ../sass/templates/_typography-app.scss */
.element-container {
  position: relative;
  overflow: visible;
}

/* line 1128, ../sass/templates/_typography-app.scss */
.element-container--static {
  margin-right: 30px;
  border-bottom: 1px solid #c2c2c2;
}

/* line 1132, ../sass/templates/_typography-app.scss */
.element-name {
  margin-bottom: 7px;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2a2a2a;
}

/* line 1140, ../sass/templates/_typography-app.scss */
.edit-element-button {
  z-index: 10;
}

/* line 1143, ../sass/templates/_typography-app.scss */
.margin-edit-container {
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 10;
}
/* line 1148, ../sass/templates/_typography-app.scss */
.margin-edit-container label, .margin-edit-container input {
  font-size: 12px;
  display: inline-block;
  color: grey;
}
/* line 1153, ../sass/templates/_typography-app.scss */
.margin-edit-container label {
  padding-right: 3px;
}
/* line 1156, ../sass/templates/_typography-app.scss */
.margin-edit-container input {
  padding: 2px;
}

/* line 1160, ../sass/templates/_typography-app.scss */
.margin-bottom-indicator {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3rem;
  background-color: rgba(247, 148, 29, 0.3);
}

/* line 1168, ../sass/templates/_typography-app.scss */
.edit-element-options {
  position: absolute;
  top: calc(50% - 26px);
  left: -157px;
  width: 140px;
  padding-right: 10px;
  text-align: right;
  border-right: 2px solid #ccc;
}
/* line 1176, ../sass/templates/_typography-app.scss */
.edit-element-options .ty-button--small {
  padding-left: 13px;
  padding-right: 13px;
}

/* line 1182, ../sass/templates/_typography-app.scss */
.element-container .margin-edit-container,
.element-container .element-edit-indicator,
.element-container .margin-bottom-indicator,
.element-container .edit-element-options {
  opacity: 1;
}
/* line 1190, ../sass/templates/_typography-app.scss */
.element-container:hover .margin-edit-container,
.element-container:hover .element-edit-indicator,
.element-container:hover .margin-bottom-indicator,
.element-container:hover .edit-element-options, .element-container.is-being-edited .margin-edit-container,
.element-container.is-being-edited .element-edit-indicator,
.element-container.is-being-edited .margin-bottom-indicator,
.element-container.is-being-edited .edit-element-options {
  opacity: 1;
  transition: opacity 0.3s;
}

/* line 1199, ../sass/templates/_typography-app.scss */
.all-caps {
  text-transform: uppercase;
}

/* line 1202, ../sass/templates/_typography-app.scss */
.filter-list.font-source-toggles {
  margin-top: 15px;
  margin-bottom: 20px;
}
/* line 1205, ../sass/templates/_typography-app.scss */
.filter-list.font-source-toggles + .popup__heading {
  margin-left: 22px;
}

/* line 1209, ../sass/templates/_typography-app.scss */
.close-panel-link {
  position: absolute;
  top: 21px;
  right: 21px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;
  color: white;
}
/* line 1217, ../sass/templates/_typography-app.scss */
.close-panel-link.ty-icon-before--cross:before {
  left: -3px;
  top: -2px;
  font-size: 14px;
}

/* line 1223, ../sass/templates/_typography-app.scss */
.collapse {
  display: none;
}

/* line 1227, ../sass/templates/_typography-app.scss */
.ty-toolbox__accordion__modular-scale .ty-input {
  width: calc(100% - 28px);
  display: inline-block;
  vertical-align: middle;
  text-align: right;
}

/* line 1235, ../sass/templates/_typography-app.scss */
.mailchimp-signup .mc-field-group {
  position: relative;
}
/* line 1238, ../sass/templates/_typography-app.scss */
.mailchimp-signup .ty-input {
  padding-right: 42px;
  font-size: 12px;
  font-weight: 400;
}
/* line 1243, ../sass/templates/_typography-app.scss */
.mailchimp-signup .btn-newsletter-signup-submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  display: block;
  color: #e6e6e6;
  font-size: 14px;
  border: 1px solid #000;
  border-radius: 0 6px 6px 0;
  background-color: #5753b9;
  transition: background-color 0.2s;
}
/* line 1257, ../sass/templates/_typography-app.scss */
.mailchimp-signup .btn-newsletter-signup-submit:hover {
  background-color: #423f9a;
  transition: background-color 0.3s;
}

/* line 1263, ../sass/templates/_typography-app.scss */
#mc_embed_signup input.mce_inline_error {
  border-color: #7f7cd2 !important;
}

/* line 1266, ../sass/templates/_typography-app.scss */
#mc_embed_signup div.mce_inline_error {
  margin: 0 0 1em 0 !important;
  padding: 5px 10px !important;
  z-index: 1 !important;
  color: #7f7cd2 !important;
  font-size: 12px !important;
  font-family: "Montserrat", sans-serif !important;
  line-height: 1.4;
  font-weight: bold !important;
  background-color: transparent !important;
}

/* line 1277, ../sass/templates/_typography-app.scss */
#mce-responses #mce-success-response,
#mce-responses #mce-error-response {
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-family: "Montserrat", sans-serif !important;
  line-height: 1.4;
  font-weight: bold !important;
  color: #a2a2a2 !important;
  background-color: transparent !important;
}

/* line 1287, ../sass/templates/_typography-app.scss */
.newsletter-signup-form-note {
  padding: 4px 0 0 0;
  display: block;
  color: #7e7e7e;
  font-size: 11px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
}

/* line 1296, ../sass/templates/_typography-app.scss */
.ty-page-export .container {
  width: 100%;
  min-height: 100vh;
  border-left: 10px solid #706AF1;
  background-color: #E6E6E6;
}
/* line 1302, ../sass/templates/_typography-app.scss */
.ty-page-export .ty-header {
  width: calc(100% - 10px);
  left: 10px;
}

/* line 1307, ../sass/templates/_typography-app.scss */
.ty-archetype-logo-light {
  width: 121px;
  margin-top: 19px;
  float: left;
  display: inline-block;
}

/* line 1313, ../sass/templates/_typography-app.scss */
.sign-in-out {
  margin-right: 20px;
  display: inline-block;
  vertical-align: top;
  float: right;
}

/* line 1319, ../sass/templates/_typography-app.scss */
.ty-button--large.button-sign-in {
  width: auto;
  margin: 10px 0 0 20px;
  padding: 11px 21px 11px;
  text-align: center;
}

/* line 1325, ../sass/templates/_typography-app.scss */
.signedInUserName {
  padding: 26px 0px 0 20px;
  display: inline-block;
  vertical-align: top;
  color: #7e7e7e;
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

@keyframes popupOpen {
  0% {
    opacity: 0.7;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* line 1344, ../sass/templates/_typography-app.scss */
.popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10000;
  text-align: center;
  background-color: rgba(31, 31, 31, 0.3);
}
/* line 1353, ../sass/templates/_typography-app.scss */
.popup-container.popup-container--welcome {
  background-color: rgba(112, 106, 241, 0.85);
}
/* line 1356, ../sass/templates/_typography-app.scss */
.popup-container:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  margin-right: -3.5px;
  /* Adjusts for spacing */
}
/* line 1364, ../sass/templates/_typography-app.scss */
.popup-container .ty-icon-before--close-filled {
  position: absolute;
  top: 10px;
  right: 10px;
}
/* line 1368, ../sass/templates/_typography-app.scss */
.popup-container .ty-icon-before--close-filled:before {
  font-size: 21px;
  color: #706AF1;
  transition: color 0.2s;
}
/* line 1373, ../sass/templates/_typography-app.scss */
.popup-container .ty-icon-before--close-filled span {
  display: inline-block;
  text-align: left;
  text-indent: -9999em;
}
/* line 1379, ../sass/templates/_typography-app.scss */
.popup-container .ty-icon-before--close-filled:hover:before {
  color: #433bed;
  transition: color 0.3s;
}
/* line 1385, ../sass/templates/_typography-app.scss */
.popup-container > * {
  display: inline-block;
  vertical-align: middle;
}
/* line 1389, ../sass/templates/_typography-app.scss */
.popup-container .popup-action {
  width: 310px;
  padding: 27px 40px 10px;
  display: inline-block;
  font-weight: 500;
  border: 3px solid #706AF1;
  background-color: #E6E6E6;
  border-radius: 6px;
  animation: popupOpen 0.25s ease-out forwards;
}
/* line 1398, ../sass/templates/_typography-app.scss */
.popup-container .popup-action h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;
}
/* line 1403, ../sass/templates/_typography-app.scss */
.popup-container .popup-action p {
  font-size: 14px;
  line-height: 1.4;
}
/* line 1406, ../sass/templates/_typography-app.scss */
.popup-container .popup-action p a {
  font-weight: 700;
  color: #706af1;
  transition: color 0.3s;
}
/* line 1410, ../sass/templates/_typography-app.scss */
.popup-container .popup-action p a:hover {
  color: #433bed;
}
/* line 1415, ../sass/templates/_typography-app.scss */
.popup-container .popup-action .icon-save-docs {
  width: 107px;
  margin-bottom: 20px;
}
/* line 1419, ../sass/templates/_typography-app.scss */
.popup-container .popup-action button {
  margin-bottom: 10px;
}
/* line 1422, ../sass/templates/_typography-app.scss */
.popup-container .popup-action .foot-text {
  margin-top: 10px;
  font-size: 12px;
}
/* line 1427, ../sass/templates/_typography-app.scss */
.popup-container .popup-font-pair-access {
  position: relative;
  margin-left: 230px;
  padding: 10px 40px 50px 45px;
  display: inline-block;
  font-weight: 500;
  border: 3px solid #706AF1;
  background-color: #E6E6E6;
  border-radius: 6px;
  animation: popupOpen 0.25s ease-out forwards;
}
/* line 1437, ../sass/templates/_typography-app.scss */
.popup-container .popup-font-pair-access .save-font-pairs-empty-container img {
  margin-top: 19px;
  margin-right: 36px;
}
/* line 1441, ../sass/templates/_typography-app.scss */
.popup-container .popup-font-pair-access .save-font-pairs-empty-container .save-font-pairs-empty-container__content {
  width: 260px;
}
/* line 1445, ../sass/templates/_typography-app.scss */
.popup-container .popup-full-screen {
  width: 390px;
}
/* line 1447, ../sass/templates/_typography-app.scss */
.popup-container .popup-full-screen img {
  width: 100%;
  margin-bottom: 30px;
}
/* line 1451, ../sass/templates/_typography-app.scss */
.popup-container .popup-full-screen h2 {
  margin-bottom: 40px;
  font-size: 31px;
  font-weight: 400;
  color: #F2F8F8;
  line-height: 1.2;
}

/* line 1461, ../sass/templates/_typography-app.scss */
.popup-container--welcome .ty-button--action-on-light--link-button,
.popup-container--welcome .ty-button--action-on-light--continue-button {
  width: calc(50% - 9px);
  display: inline-block;
}
/* line 1466, ../sass/templates/_typography-app.scss */
.popup-container--welcome .ty-button--action-on-light--link-button {
  float: left;
}
/* line 1469, ../sass/templates/_typography-app.scss */
.popup-container--welcome .ty-button--action-on-light--continue-button {
  float: right;
}

@keyframes hearton {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes heartoff {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
/* line 1483, ../sass/templates/_typography-app.scss */
.icon-like {
  animation: heartoff 0.4s forwards;
}
/* line 1486, ../sass/templates/_typography-app.scss */
.icon-like.is-on {
  animation: hearton 0.5s forwards;
}
/* line 1490, ../sass/templates/_typography-app.scss */
.icon-like span {
  display: inline-block;
  text-align: left;
  text-indent: -9999em;
}

/* line 1496, ../sass/templates/_typography-app.scss */
.intro-label-container {
  display: flex;
  justify-content: center;
}

/* line 1500, ../sass/templates/_typography-app.scss */
.intro-label {
  padding: 4px 11px;
  margin: 0 auto 10px;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #F2F8F8 !important;
  border-radius: 15px;
  background-color: #48BA8E;
}

/* line 1, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-main {
  position: relative;
  width: 100%;
  min-height: 530px;
  padding-top: 112px;
  padding-bottom: 4rem;
  text-align: center;
  border-bottom: 1px solid #ccc;
  background-color: #E6E6E6;
  transition: background-color 0.3s;
}
/* line 11, ../sass/templates/_font-pairing-overlay.scss */
.is-theme-dark .font-pairing-main {
  background-color: #313131;
  transition: background-color 0.3s;
}
/* line 15, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-main .icon-like {
  position: absolute;
  right: 0;
  bottom: 0;
}
/* line 19, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-main .icon-like:after {
  font-size: 20px;
}

/* line 24, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-main__elements {
  width: 490px;
  margin: 0 auto;
  text-align: left;
}
/* line 28, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-main__elements h1 {
  margin-bottom: 22px;
  overflow: visible;
  font-size: 62px;
  color: #313131;
  line-height: 1.16;
}
/* line 35, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-main__elements p {
  font-size: 18px;
  color: #313131;
  line-height: 1.6;
}
/* line 40, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-main__elements h1, .font-pairing-main__elements p {
  transition: color 0.3s;
}
/* line 42, ../sass/templates/_font-pairing-overlay.scss */
.is-theme-dark .font-pairing-main__elements h1, .is-theme-dark .font-pairing-main__elements p {
  color: #F2F8F8;
  transition: color 0.3s;
}

/* line 48, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-custom-like-container {
  position: absolute;
  left: 50%;
  bottom: 30px;
  right: 0;
  max-width: 708px;
  margin-left: -354px;
  overflow: visible;
  text-align: center;
}
/* line 57, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-custom-like-container div {
  overflow: visible;
}

/* line 61, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-tools-container {
  position: absolute;
  top: 20px;
  right: 30px;
}

/* line 66, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-tools__colour-switch {
  display: inline-block;
  vertical-align: top;
  background-color: #E6E6E6;
}
/* line 70, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-tools__colour-switch:first-child {
  border-bottom: 2px solid #706AF1;
}
/* line 74, ../sass/templates/_font-pairing-overlay.scss */
.is-theme-dark .font-pairing-tools__colour-switch:first-child {
  border-bottom: none;
}

/* line 79, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-tools__colour-switch span {
  width: 34px;
  height: 30px;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 26px;
  text-align: center;
  color: #2A2A2A;
  border: 1px solid #B2B2B2;
  cursor: pointer;
}

/* line 93, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-tools__colour-switch:nth-child(2) span {
  color: #F2F8F8;
  background-color: #313131;
  border: 1px solid #313131;
}
/* line 98, ../sass/templates/_font-pairing-overlay.scss */
.is-theme-dark .font-pairing-tools__colour-switch:nth-child(2) {
  border-bottom: 2px solid #706AF1;
}

/* line 102, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-header-link {
  position: absolute;
  top: 29px;
  right: 125px;
}

/* line 107, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-header-link,
.font-pairing-blog-post-link {
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  color: #706AF1;
  transition: color 0.2s;
}
/* line 113, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-header-link:visited,
.font-pairing-blog-post-link:visited {
  color: #706AF1;
}
/* line 116, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-header-link:hover,
.font-pairing-blog-post-link:hover {
  color: #433bed;
  transition: color 0.3s;
}
/* line 119, ../sass/templates/_font-pairing-overlay.scss */
.is-theme-dark .font-pairing-header-link:hover, .is-theme-dark
.font-pairing-blog-post-link:hover {
  color: #9d99f5;
}

/* line 124, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-blog-post-link {
  position: absolute;
  top: 7px;
  right: 0;
}

/* line 129, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-container {
  position: relative;
  width: 708px;
  min-height: calc(100vh - 400px);
  margin: 31px auto 100px;
}
/* line 134, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-container .filter-list {
  width: 260px;
  margin: 0 0 46px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* line 148, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li {
  position: relative;
  width: 326px;
  margin-bottom: 30px;
  padding-bottom: 10px;
  display: inline-block;
  float: left;
  text-align: left;
  animation: fadeIn 1s forwards;
}
/* line 157, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li:nth-child(even) {
  float: right;
}
/* line 160, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li h2, .font-pairing-browse-pairs-list li p {
  overflow: hidden;
  color: #313131;
}
/* line 164, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li h2 {
  height: 100px;
  margin-bottom: 24px;
  font-size: 40px;
  line-height: 1.25;
}
/* line 170, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li p {
  height: 78px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.625;
}
/* line 176, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li .font-pairing__family-names {
  margin-bottom: 7px;
  padding-right: 15px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: #6F6F6F;
}
/* line 188, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li .font-pair__try-pair-link {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #706AF1;
  transition: color 0.2s;
}
/* line 193, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li .font-pair__try-pair-link:hover {
  color: #433bed;
  transition: color 0.3s;
}
/* line 198, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li .icon-like {
  position: absolute;
  right: 10px;
  bottom: 9px;
}
/* line 202, ../sass/templates/_font-pairing-overlay.scss */
.font-pairing-browse-pairs-list li .icon-like:after {
  font-size: 20px;
}

/* line 208, ../sass/templates/_font-pairing-overlay.scss */
.save-font-pairs-empty-container {
  padding-top: 22px;
}
/* line 210, ../sass/templates/_font-pairing-overlay.scss */
.save-font-pairs-empty-container img {
  width: 60px;
  margin-right: 51px;
  display: inline-block;
  vertical-align: top;
}
/* line 216, ../sass/templates/_font-pairing-overlay.scss */
.save-font-pairs-empty-container .save-font-pairs-empty-container__content {
  width: 400px;
  padding-top: 11px;
  display: inline-block;
  vertical-align: top;
  text-align: left;
}
/* line 222, ../sass/templates/_font-pairing-overlay.scss */
.save-font-pairs-empty-container .save-font-pairs-empty-container__content h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
/* line 228, ../sass/templates/_font-pairing-overlay.scss */
.save-font-pairs-empty-container .save-font-pairs-empty-container__content p {
  font-size: 16px;
  line-height: 1.625;
}
/* line 232, ../sass/templates/_font-pairing-overlay.scss */
.save-font-pairs-empty-container .save-font-pairs-empty-container__content button {
  width: 190px;
}

/* line 10, ../sass/components/_typography-app-typography.scss */
.ty-main-content h1, .ty-main-content h2, .ty-main-content h3, .ty-main-content h4, .ty-main-content h5, .ty-main-content h6 {
  margin: 0 0 3rem;
}
/* line 13, ../sass/components/_typography-app-typography.scss */
.ty-page-export .ty-main-content {
  width: 600px;
  margin-left: -300px;
}
/* line 17, ../sass/components/_typography-app-typography.scss */
.ty-main-content h1 {
  font-size: 6.56916em;
  line-height: 3rem;
}
/* line 20, ../sass/components/_typography-app-typography.scss */
.ty-page-export .ty-main-content h1 {
  font-size: 6.1rem;
  line-height: 1.2;
}
/* line 25, ../sass/components/_typography-app-typography.scss */
.ty-main-content h2 {
  font-size: 5.4743em;
  line-height: 3rem;
}
/* line 29, ../sass/components/_typography-app-typography.scss */
.ty-main-content h3 {
  font-size: 4.56192em;
  line-height: 3rem;
}
/* line 32, ../sass/components/_typography-app-typography.scss */
.ty-page-export .ty-main-content h3 {
  font-size: 3.13rem;
  line-height: 1.4;
}
/* line 37, ../sass/components/_typography-app-typography.scss */
.ty-main-content h4 {
  font-size: 3.8016em;
  line-height: 3rem;
}
/* line 41, ../sass/components/_typography-app-typography.scss */
.ty-main-content h5 {
  font-size: 3.168em;
  line-height: 3rem;
}
/* line 45, ../sass/components/_typography-app-typography.scss */
.ty-main-content h6 {
  font-size: 2.64em;
  line-height: 3rem;
}
/* line 49, ../sass/components/_typography-app-typography.scss */
.ty-main-content p {
  margin: 0 0 3rem;
  font-size: 2.2em;
  line-height: 3rem;
}
/* line 53, ../sass/components/_typography-app-typography.scss */
.ty-main-content p strong {
  font-weight: 700;
}
/* line 56, ../sass/components/_typography-app-typography.scss */
.ty-page-export .ty-main-content p {
  font-size: 1.6rem;
  line-height: 1.7;
}
/* line 59, ../sass/components/_typography-app-typography.scss */
.ty-page-export .ty-main-content p em {
  font-style: italic;
  font-weight: bold;
}
/* line 63, ../sass/components/_typography-app-typography.scss */
.ty-page-export .ty-main-content p + img {
  margin-top: 1rem;
  margin-bottom: 5rem;
}
/* line 67, ../sass/components/_typography-app-typography.scss */
.ty-page-export .ty-main-content p a {
  color: #706AF1;
}
/* line 69, ../sass/components/_typography-app-typography.scss */
.ty-page-export .ty-main-content p a:hover {
  color: #5a53ef;
}
/* line 76, ../sass/components/_typography-app-typography.scss */
.ty-page-export .ty-main-content img {
  width: 100%;
}

@font-face {
  font-family: "archetype";
  src: url("../fonts/fontastic/archetype.eot");
  src: url("../fonts/fontastic/archetype.eot?#iefix") format("embedded-opentype"), url("../fonts/fontastic/archetype.woff") format("woff"), url("../fonts/fontastic/archetype.ttf") format("truetype"), url("../fonts/fontastic/archetype.svg#ty-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* line 93, ../sass/components/_typography-app-typography.scss */
.oot-icon-before:before, .oot-icon-before--twitter:before,
.oot-icon-before--up:before,
.oot-icon-before--down:before, .oot-icon-after:after, .mailchimp-signup .btn-newsletter-signup-submit, .ty-icon-before:before, .ty-icon-before--arrow-down:before,
.ty-icon-before--arrow-right-long:before,
.ty-icon-before--tick:before,
.ty-icon-before--cross:before,
.ty-icon-before--hamburger:before,
.ty-icon-before--close-filled:before,
.ty-icon-before--heart-filled:before,
.ty-icon-before--heart:before, .ty-icon-after:after, .ty-icon-after--arrow-down:after,
.ty-icon-after--arrow-right-long:after,
.ty-icon-after--tick:after,
.ty-icon-after--cross:after,
.ty-icon-after--hamburger:after,
.ty-icon-after--colourpicker:after,
.ty-icon-after--close-filled:after,
.ty-icon-after--heart-filled:after,
.icon-like.is-on:after,
.ty-icon-after--heart:after,
.icon-like:after {
  vertical-align: top;
  speak: none;
  font-family: "archetype";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 106, ../sass/components/_typography-app-typography.scss */
[class^="ty-icon-"]:before, [class^="ty-icon-"]:after, [class*=" ty-icon-"]:before, [class*=" ty-icon-"]:after {
  display: inline-block;
  fill: currentColor;
}

/* line 113, ../sass/components/_typography-app-typography.scss */
.ty-icon-before:before, .ty-icon-before--arrow-down:before,
.ty-icon-before--arrow-right-long:before,
.ty-icon-before--tick:before,
.ty-icon-before--cross:before,
.ty-icon-before--hamburger:before,
.ty-icon-before--close-filled:before,
.ty-icon-before--heart-filled:before,
.ty-icon-before--heart:before {
  font-size: 22px;
  position: relative;
}

/* line 120, ../sass/components/_typography-app-typography.scss */
.ty-icon-after:after, .ty-icon-after--arrow-down:after,
.ty-icon-after--arrow-right-long:after,
.ty-icon-after--tick:after,
.ty-icon-after--cross:after,
.ty-icon-after--hamburger:after,
.ty-icon-after--colourpicker:after,
.ty-icon-after--close-filled:after,
.ty-icon-after--heart-filled:after,
.icon-like.is-on:after,
.ty-icon-after--heart:after,
.icon-like:after {
  font-size: 22px;
  position: relative;
}

/* line 149, ../sass/components/_typography-app-typography.scss */
.ty-icon-before--arrow-down:before {
  content: "a";
}

/* line 154, ../sass/components/_typography-app-typography.scss */
.ty-icon-after--arrow-down:after {
  content: "a";
}

/* line 159, ../sass/components/_typography-app-typography.scss */
.ty-icon-before--arrow-right-long:before {
  content: "d";
}

/* line 164, ../sass/components/_typography-app-typography.scss */
.ty-icon-after--arrow-right-long:after {
  content: "d";
}

/* line 169, ../sass/components/_typography-app-typography.scss */
.ty-icon-before--tick:before {
  content: "e";
}

/* line 174, ../sass/components/_typography-app-typography.scss */
.ty-icon-after--tick:after {
  content: "e";
}

/* line 179, ../sass/components/_typography-app-typography.scss */
.ty-icon-after--colourpicker:after {
  content: "f";
}

/* line 184, ../sass/components/_typography-app-typography.scss */
.ty-icon-before--cross:before {
  content: "b";
}

/* line 189, ../sass/components/_typography-app-typography.scss */
.ty-icon-after--cross:after {
  content: "b";
}

/* line 194, ../sass/components/_typography-app-typography.scss */
.ty-icon-before--hamburger:before {
  content: "c";
}

/* line 199, ../sass/components/_typography-app-typography.scss */
.ty-icon-after--hamburger:after {
  content: "c";
}

/* line 204, ../sass/components/_typography-app-typography.scss */
.ty-icon-before--close-filled:before {
  content: "h";
}

/* line 209, ../sass/components/_typography-app-typography.scss */
.ty-icon-after--close-filled:after {
  content: "h";
}

/* line 214, ../sass/components/_typography-app-typography.scss */
.ty-icon-after--heart-filled:after, .icon-like.is-on:after {
  content: "i";
  color: #706AF1;
}

/* line 220, ../sass/components/_typography-app-typography.scss */
.ty-icon-after--heart:after, .icon-like:after {
  content: "j";
  color: #706AF1;
}

/* line 1, ../sass/components/_sponsored-by.scss */
.sponsored-by-container {
  position: fixed;
  bottom: 0px;
  right: 20px;
  width: 194px;
  height: 201px;
  z-index: 999;
  border-radius: 3px;
}
/* line 9, ../sass/components/_sponsored-by.scss */
.sponsored-by-container .ad-static,
.sponsored-by-container .ad-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 194px;
  height: 201px;
  display: block;
}
/* line 18, ../sass/components/_sponsored-by.scss */
.sponsored-by-container .ad-animation {
  pointer-events: none;
}
/* line 21, ../sass/components/_sponsored-by.scss */
.sponsored-by-container .contact-link {
  position: absolute;
  bottom: 10px;
  right: 0;
  display: inline-block;
  font-family: "Lato", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #706af1;
  text-decoration: underline;
}
/* line 33, ../sass/components/_sponsored-by.scss */
.sponsored-by-container .ad-link span {
  display: inline-block;
  text-align: left;
  text-indent: -999em;
}

/* line 1, ../sass/components/_ty-form.scss */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea {
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* line 3, ../sass/components/_ty-button.scss */
input[type="submit"],
input[type="reset"],
input[type="button"],
.ty-button {
  display: inline-block;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-user-select: none;
  /* for button */
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;
  cursor: pointer;
  text-shadow: none !important;
  font-family: "Montserrat", sans-serif;
  transition: background-color 0.2s;
}
/* line 20, ../sass/components/_ty-button.scss */
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.ty-button:hover {
  transition: background-color 0.3s;
}

/* line 24, ../sass/components/_ty-button.scss */
.ty-button--large {
  position: relative;
  width: 100%;
  padding: 11px 0 11px 41px;
  font-size: 13px;
  text-align: left;
  border-radius: 8px;
  border: 1px solid #000;
}
/* line 32, ../sass/components/_ty-button.scss */
.ty-button--large img {
  position: absolute;
  left: 11px;
  top: 11px;
}
/* line 37, ../sass/components/_ty-button.scss */
.ty-button--large.ty-button--large--no-icon {
  padding-left: 0;
  text-align: center;
  border: none;
}

/* line 43, ../sass/components/_ty-button.scss */
.ty-button--small {
  padding: 7px 29px 8px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-radius: 20px;
}
/* line 50, ../sass/components/_ty-button.scss */
.ty-button--small + .ty-button--small {
  margin-top: 20px;
}

/* line 54, ../sass/components/_ty-button.scss */
.ty-button--link {
  width: 100%;
  margin: 15px 0;
  font-size: 13px;
  text-align: center;
  border-radius: 20px;
}

/* line 61, ../sass/components/_ty-button.scss */
.ty-button--dark {
  color: #fff;
  font-weight: 700;
  background-color: #3d3d3d;
  border: 1px solid #000;
}
/* line 66, ../sass/components/_ty-button.scss */
.ty-button--dark:hover {
  background-color: #303030;
  transition: 0.2s;
}

/* line 71, ../sass/components/_ty-button.scss */
.ty-button--dark--coloured {
  background-color: #5753b9;
}
/* line 73, ../sass/components/_ty-button.scss */
.ty-button--dark--coloured:hover {
  background-color: #4a46ac;
  transition: 0.2s;
}

/* line 78, ../sass/components/_ty-button.scss */
.ty-button--dark--coloured-light {
  background-color: #706AF1;
}
/* line 80, ../sass/components/_ty-button.scss */
.ty-button--dark--coloured-light:hover {
  background-color: #5a53ef;
  transition: 0.2s;
}

/* line 85, ../sass/components/_ty-button.scss */
.ty-button--link--dark {
  color: #8e8e8e;
  text-decoration: underline;
}

/* line 89, ../sass/components/_ty-button.scss */
.ty-button--action {
  color: #fff;
  background-color: #5753b9;
  border: 1px solid #000;
}
/* line 93, ../sass/components/_ty-button.scss */
.ty-button--action:hover {
  background-color: #6965c0;
}

/* line 97, ../sass/components/_ty-button.scss */
.ty-button--action-on-light {
  color: #fcfdfd;
  background-color: #706af1;
  border: 1px solid #4440a7;
}
/* line 101, ../sass/components/_ty-button.scss */
.ty-button--action-on-light:hover {
  background-color: #8681f3;
}

/* line 105, ../sass/components/_ty-button.scss */
.ty-button--action-on-light--light-button {
  color: #706AF1;
  background-color: #E6E6E6;
  border: 1px solid #B2B2B2 !important;
}
/* line 109, ../sass/components/_ty-button.scss */
.ty-button--action-on-light--light-button:hover {
  background-color: #dedede;
}

/* line 113, ../sass/components/_ty-button.scss */
.ty-button--action-on-light--continue-button {
  color: #F2F8F8;
  background-color: #48BA8E;
}
/* line 116, ../sass/components/_ty-button.scss */
.ty-button--action-on-light--continue-button:hover {
  background-color: #40a980;
}

/* line 120, ../sass/components/_ty-button.scss */
.ty-button--action-on-light--link-button {
  color: #F2F8F8;
  background-color: #5753B9;
}
/* line 123, ../sass/components/_ty-button.scss */
.ty-button--action-on-light--link-button:hover {
  background-color: #4d49b4;
}

/* line 127, ../sass/components/_ty-button.scss */
.ty-button-save-changes {
  padding: 7px 10px 7px 10px;
  font-size: 11px;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  color: #706AF1;
  background-color: #E6E6E6;
  border: 1px solid #B2B2B2;
  border-radius: 6px;
}
/* line 136, ../sass/components/_ty-button.scss */
.ty-button-save-changes:hover {
  background-color: #d9d9d9;
}
/* line 139, ../sass/components/_ty-button.scss */
.ty-button-save-changes:disabled {
  color: #B2B2B2;
}
/* line 141, ../sass/components/_ty-button.scss */
.ty-button-save-changes:disabled:hover {
  background-color: #E6E6E6;
}

/* line 147, ../sass/components/_ty-button.scss */
.ty-button--pro:after {
  content: 'Pro';
  position: absolute;
  top: -4px;
  right: -11px;
  padding: 4px 9px;
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #F2F8F8;
  border-radius: 10.5px;
  background-color: #48BA8E;
  transition: background-color 0.2s;
}
/* line 162, ../sass/components/_ty-button.scss */
.ty-button--pro:hover:after {
  transition: background-color 0.3s;
  background-color: #40a980;
}

@keyframes bobbing {
  0% {
    transform: translateY(-1px);
  }
  50% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(-1px);
  }
}
@keyframes shaking {
  0% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(-1px);
  }
}
/* line 23, ../sass/components/_ty-helper-popup.scss */
.helper-popup {
  position: fixed;
  width: 250px;
  padding: 10px 20px 22px;
  z-index: 2000;
  background-color: #706AF1;
  overflow: visible;
  border-radius: 8px;
  text-align: center;
  animation: bobbing 0.5s ease-in-out infinite;
}
/* line 33, ../sass/components/_ty-helper-popup.scss */
.helper-popup.is-closing {
  animation: shaking 0.2s ease-in-out infinite;
}
/* line 36, ../sass/components/_ty-helper-popup.scss */
.helper-popup:before {
  content: ' ';
  position: absolute;
  top: 16px;
  left: -18px;
  width: 18px;
  height: 32px;
  background-image: url("../images/archetype/popup-triangle@2x.png");
  background-size: 18px 32px;
  background-repeat: no-repeat;
}
/* line 47, ../sass/components/_ty-helper-popup.scss */
.helper-popup h2 {
  margin-bottom: 0.7rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: #1F1C5D;
}
/* line 56, ../sass/components/_ty-helper-popup.scss */
.helper-popup p {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7;
  color: #F2F8F8;
}
/* line 63, ../sass/components/_ty-helper-popup.scss */
.helper-popup .ty-icon-before--close-filled {
  position: absolute;
  top: 10px;
  right: 10px;
}
/* line 67, ../sass/components/_ty-helper-popup.scss */
.helper-popup .ty-icon-before--close-filled:before {
  font-size: 21px;
  color: #A19DF8;
  transition: color 0.2s;
}
/* line 72, ../sass/components/_ty-helper-popup.scss */
.helper-popup .ty-icon-before--close-filled span {
  display: inline-block;
  text-align: left;
  text-indent: -999em;
}
/* line 78, ../sass/components/_ty-helper-popup.scss */
.helper-popup .ty-icon-before--close-filled:hover:before {
  color: #cfcdfb;
  transition: color 0.3s;
}
/* line 84, ../sass/components/_ty-helper-popup.scss */
.helper-popup .toggle-container {
  text-align: center;
}
/* line 87, ../sass/components/_ty-helper-popup.scss */
.helper-popup .label-checkbox {
  margin-right: 10px;
  background-color: #5753B9;
  border: none;
}
/* line 91, ../sass/components/_ty-helper-popup.scss */
.helper-popup .label-checkbox.ty-icon-before--tick:before {
  color: #5753B9;
}
/* line 95, ../sass/components/_ty-helper-popup.scss */
.helper-popup .label-text {
  font-size: 13px;
  font-weight: 400;
  color: #F2F8F8;
}
/* line 101, ../sass/components/_ty-helper-popup.scss */
.helper-popup .toggle-container input:checked + .label-checkbox {
  border: none;
  background-color: #1BC79F;
}
/* line 104, ../sass/components/_ty-helper-popup.scss */
.helper-popup .toggle-container input:checked + .label-checkbox.ty-icon-before--tick:before {
  color: #E6E6E6;
}

/* line 110, ../sass/components/_ty-helper-popup.scss */
.helper-popup--font-pairing {
  top: 106px;
  left: 260px;
  display: none;
}
/* line 114, ../sass/components/_ty-helper-popup.scss */
.is-showing-helper--pick-fonts .helper-popup--font-pairing {
  display: block;
}
/* line 117, ../sass/components/_ty-helper-popup.scss */
.helper-popup--font-pairing p {
  height: 110px;
}

/* line 121, ../sass/components/_ty-helper-popup.scss */
.helper-popup--modular-scale {
  top: 166px;
  left: 260px;
  display: none;
}
/* line 125, ../sass/components/_ty-helper-popup.scss */
.is-showing-helper--modular-scale .helper-popup--modular-scale {
  display: block;
}
/* line 128, ../sass/components/_ty-helper-popup.scss */
.helper-popup--modular-scale p {
  height: 110px;
}

/* line 132, ../sass/components/_ty-helper-popup.scss */
.helper-popup--baseline {
  top: 206px;
  left: 260px;
  display: none;
}
/* line 136, ../sass/components/_ty-helper-popup.scss */
.is-showing-helper--baseline .helper-popup--baseline {
  display: block;
}
/* line 139, ../sass/components/_ty-helper-popup.scss */
.helper-popup--baseline p {
  height: 225px;
  font-size: 15px;
}

/* line 80, ../sass/_base-typography-app.scss */
html, body {
  font-family: "Lora", serif;
  font-size: 10px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #313131;
  background-color: #e6e6e6;
}

/* line 89, ../sass/_base-typography-app.scss */
body {
  line-height: 1;
}

/* line 92, ../sass/_base-typography-app.scss */
h1, h2, h3, h4, h5, h6 {
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

/* line 97, ../sass/_base-typography-app.scss */
p {
  position: relative;
  margin: 0 0 3rem;
}

/* line 101, ../sass/_base-typography-app.scss */
address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul,
li {
  width: auto;
  overflow: hidden;
}