/* Draft skin — derived from bb-skin-1.6.3.css, image scrim lightened ~50%. Edits here affect DRAFT lessons only. */
/* ============================================================================
   studio-base skin — BB v1.6.3, tokenized.
   Colors, fonts, and the type scale are driven by the --studio-* custom
   properties in :root below. Override those (via the code builder's Theme
   panel, a brand kit, or a per-lesson accent) to reskin a whole lesson — you
   should not need to touch the rules under :root.
   ============================================================================ */
@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i');
@import url('https://cdn.expertvoice.com/client/mfg/buildingblocks/1.6.3/assets/styles/bootstrap-custom.min.css');
@import url('https://cdn.expertvoice.com/client/mfg/buildingblocks/1.6.3/assets/styles/bb-skeleton.min.css');

:root {
  --studio-font-body:
    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --studio-font-heading: var(--studio-font-body);
  --studio-brand: #fc4540;
  --studio-brand-hover: #fb140e;
  --studio-accent: #3c98c7;
  --studio-accent-hover: #3485ae;
  --studio-ink: #000000;
  --studio-ink-soft: #252525;
  --studio-on-brand: #ffffff;
  --studio-surface: #ffffff;
  --studio-surface-alt: #000000;
  --studio-surface-alt-2: #f7f7f7;
  --studio-secondary: #c5c5c5;
  --studio-secondary-hover: #acacac;
  --studio-muted: #757575;
  --studio-muted-2: #868e96;
  --studio-muted-3: #bbbbbb;
  --studio-border: #dedede;
  --studio-mark: #ffe3ab;
  --studio-selection: #fcbfbd;
  --studio-overlay: rgba(0, 0, 0, 0.3);
  --studio-card-title-bg: rgba(0, 0, 0, 0.3);

  /* Type scale — modular. Base size drives the em-based heading steps below,
     so changing --studio-type-base rescales the whole hierarchy proportionally. */
  --studio-type-base: 18px;
  --studio-type-base-mobile: 15px;
  --studio-line-body: 1.4;
  --studio-line-heading: 1.1;
  --studio-weight-heading: 600;
  --studio-step-h1: 2.4em;
  --studio-step-h2: 2em;
  --studio-step-h3: 1.6em;
  --studio-step-h4: 1.4em;
  --studio-step-h5: 1.2em;
  --studio-step-h6: 1em;
  --studio-step-h1-sm: 2em;
  --studio-step-h2-sm: 1.8em;
  --studio-step-display-1: 6em;
  --studio-step-display-2: 5.5em;
  --studio-step-display-3: 4.5em;
  --studio-step-display-4: 3.5em;
  --studio-step-lead: 1.2em;
}
html {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--studio-surface);
}
.studios-content-main,
#player-page {
  font-family: var(--studio-font-body);
  line-height: var(--studio-line-body);
  font-weight: 400;
  color: var(--studio-ink-soft);
  margin: 0;
  font-size: var(--studio-type-base);
}
@media screen and (max-width: 768px) {
  .studios-content-main,
  #player-page {
    font-size: var(--studio-type-base-mobile);
  }
}
.studios-content-main:not(.scene) {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
}
.studios-content-main h1,
.studios-content-main h2,
.studios-content-main h3,
.studios-content-main h4,
.studios-content-main h5,
.studios-content-main h6,
.studios-content-main p,
.studios-content-main ul li,
.studios-content-main ol li {
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-size: inherit;
  color: inherit;
  padding: 0;
  margin: 0 0 1rem;
}
.studios-content-main ul li,
.studios-content-main ol li {
  margin: 0 0 0.5rem;
}
.studios-content-main h1,
.studios-content-main h2,
.studios-content-main h3,
.studios-content-main h4,
.studios-content-main h5,
.studios-content-main h6,
.studios-content-main p,
.studios-content-main ul,
.studios-content-main ol {
  margin: 0 0 1rem;
}
.studios-content-main h1,
.studios-content-main h2,
.studios-content-main h3,
.studios-content-main h4,
.studios-content-main h5,
.studios-content-main h6,
.studios-content-main .h1,
.studios-content-main .h2,
.studios-content-main .h3,
.studios-content-main .h4,
.studios-content-main .h5,
.studios-content-main .h6 {
  font-family: var(--studio-font-heading);
  font-weight: var(--studio-weight-heading);
  line-height: var(--studio-line-heading);
}
.studios-content-main h1,
.studios-content-main .h1,
.studios-content-main .type-title-xl {
  font-size: var(--studio-step-h1);
}
.studios-content-main h2,
.studios-content-main .h2,
.studios-content-main .type-title-lg {
  font-size: var(--studio-step-h2);
}
.studios-content-main h3,
.studios-content-main .h3,
.studios-content-main .type-title-md {
  font-size: var(--studio-step-h3);
}
.studios-content-main h4,
.studios-content-main .h4,
.studios-content-main .type-title-sm {
  font-size: var(--studio-step-h4);
}
.studios-content-main h5,
.studios-content-main .h5,
.studios-content-main .type-title-xs {
  font-size: var(--studio-step-h5);
}
.studios-content-main h6,
.studios-content-main .h6,
.studios-content-main .type-title-xxs {
  font-size: var(--studio-step-h6);
}
@media screen and (max-width: 600px) {
  .studios-content-main h1,
  .studios-content-main .h1,
  .studios-content-main .type-title-xl {
    font-size: var(--studio-step-h1-sm);
  }
  .studios-content-main h2,
  .studios-content-main .h2,
  .studios-content-main .type-title-lg {
    font-size: var(--studio-step-h2-sm);
  }
}
.studios-content-main .display-1 {
  font-size: var(--studio-step-display-1);
  font-weight: 400;
}
.studios-content-main .display-2 {
  font-size: var(--studio-step-display-2);
  font-weight: 400;
}
.studios-content-main .display-3 {
  font-size: var(--studio-step-display-3);
  font-weight: 400;
}
.studios-content-main .display-4 {
  font-size: var(--studio-step-display-4);
  font-weight: 400;
}
.studios-content-main .text-muted,
.studios-content-main .blockquote-footer {
  color: var(--studio-muted);
}
.studios-content-main .blockquote-footer:before {
  content: "\2013";
}
.studios-content-main ol,
.studios-content-main ul {
  list-style-position: initial;
  padding-left: 1.5em;
}
.studios-content-main ul {
  list-style-type: disc;
}
.studios-content-main ul ul,
.studios-content-main .list-inline-unstyled ul {
  list-style-type: circle;
}
.studios-content-main .list-unstyled,
.studios-content-main .list-inline {
  list-style-type: none;
  padding-left: 0;
}
.studios-content-main .list-inline-item {
  display: inline-block;
}
.studios-content-main .list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}
.studios-content-main blockquote,
.studios-content-main .lead {
  font-size: var(--studio-step-lead);
  font-weight: 300;
}
.studios-content-main mark,
.studios-content-main .mark {
  background: var(--studio-mark);
  padding: 0.2em;
}
.studios-content-main ::selection {
  background-color: var(--studio-selection);
}
.studios-content-main .button {
  background-color: var(--studio-brand);
  color: var(--studio-on-brand);
}
.studios-content-main .button:hover {
  background-color: var(--studio-brand-hover);
}
.studios-content-main .button:active,
.studios-content-main .button.button--disabled,
.studios-content-main .button.button--disabled:hover,
.studios-content-main .button.button--disabled:active {
  background-color: var(--studio-brand);
}
.studios-content-main .button.button--secondary {
  background-color: var(--studio-secondary);
}
.studios-content-main .button.button--secondary:hover {
  background-color: var(--studio-secondary-hover);
}
.studios-content-main .button.button--secondary:active,
.studios-content-main .button.button--secondary.button--disabled,
.studios-content-main .button.button--secondary.button--disabled:hover,
.studios-content-main .button.button--secondary.button--disabled:active {
  background-color: var(--studio-secondary);
}
.section {
  background-color: var(--studio-surface);
  color: var(--studio-ink);
}
.section > .content > .contentBG,
.section > .content > .contentInner > .contentInnerBG {
  background-color: var(--studio-surface);
}
.mod_color-alt {
  background-color: var(--studio-surface-alt);
  color: var(--studio-surface);
}
.mod_color-alt > .content > .contentBG,
.mod_color-alt > .content > .contentInner > .contentInnerBG {
  background-color: var(--studio-surface-alt);
}
.mod_color-alt-2 {
  background-color: var(--studio-surface-alt-2);
  color: var(--studio-ink);
}
.mod_color-alt-2 > .content > .contentBG,
.mod_color-alt-2 > .content > .contentInner > .contentInnerBG {
  background-color: var(--studio-surface-alt-2);
}
.mod_color-splash {
  background-color: var(--studio-brand);
  color: var(--studio-on-brand);
}
.mod_color-splash > .content > .contentBG,
.mod_color-splash > .content > .contentInner > .contentInnerBG {
  background-color: var(--studio-brand);
}
.mod_color-splash-2 {
  background-color: var(--studio-accent);
  color: var(--studio-on-brand);
}
.mod_color-splash-2 > .content > .contentBG,
.mod_color-splash-2 > .content > .contentInner > .contentInnerBG {
  background-color: var(--studio-accent);
}
.mod_background-gradient > .mainBG:after {
  background-image: linear-gradient(to right, #fff9, #ffffff4d 45%, #fff0);
  background-repeat: no-repeat;
}
.mod_background-gradient.mod_layout-righty > .mainBG:after {
  background-image: linear-gradient(to right, #fff0, #ffffff4d 55%, #fff9);
  background-repeat: no-repeat;
}
.mod_background-gradient.mod_color-alt > .mainBG:after {
  background-image: linear-gradient(to right, #0000004d, #00000026 45%, #0000);
  background-repeat: no-repeat;
}
.mod_background-gradient.mod_color-alt.mod_layout-righty > .mainBG:after {
  background-image: linear-gradient(to right, #0000, #00000026 55%, #0000004d);
  background-repeat: no-repeat;
}
.accordion-label {
  font-weight: 600;
}
.accordion-label:hover,
.accordion-label i {
  color: var(--studio-accent);
}
.card {
  color: var(--studio-ink);
}
.card .cardFront {
  background-color: var(--studio-surface);
}
.card .cardFront .cardTitle {
  text-align: center;
  color: var(--studio-on-brand);
  background: var(--studio-card-title-bg);
}
.card .cardBack {
  background-color: var(--studio-surface);
  font-size: 85%;
}
.blackout {
  background: var(--studio-overlay);
}
.modalInner {
  background: var(--studio-surface);
}
.modalImg {
  border-right: solid 1px var(--studio-border);
}
.modal-button {
  font-weight: 600;
  text-align: center;
  color: var(--studio-on-brand);
  background-color: var(--studio-brand);
}
.modal-button:hover {
  background-color: var(--studio-brand-hover);
}
.modal-button.outline {
  color: var(--studio-brand);
  background: transparent;
  border-top: solid 1px var(--studio-brand);
}
.modal-button.outline:hover {
  color: var(--studio-brand-hover);
  border-top-color: var(--studio-brand-hover);
}
@media screen and (orientation: portrait) {
  .modalImg {
    border-right: none;
    border-bottom: solid 1px var(--studio-border);
  }
}
.fancy-tooltip:hover .fancy-tooltip-bg {
  background: var(--studio-brand-hover);
}
.fancy-tooltip-bg,
.fancy-tooltip.show-content.visited .fancy-tooltip-bg,
.fancy-tooltip.show-modSection-content:hover .fancy-tooltip-bg {
  background: var(--studio-brand);
}
.fancy-tooltip.visited .fancy-tooltip-bg {
  background: var(--studio-muted-3);
}
.fancy-tooltip .fancy-tooltip-point {
  color: var(--studio-on-brand);
}
.fancy-tooltip .left,
.fancy-tooltip .right {
  color: #fff9;
}
.fancy-tooltip .left:hover,
.fancy-tooltip .right:hover,
.fancy-tooltip .fancy-tooltip-content {
  color: var(--studio-on-brand);
}
.fancy-tooltip-backdrop {
  background: var(--studio-overlay);
}
.fancy-tooltip.show-content .fancy-tooltip-inner:after {
  background-color: #fc4540bf;
  background-image: linear-gradient(
    to right,
    rgba(252, 69, 64, 0) 0%,
    var(--studio-brand) 100%
  );
  background-repeat: repeat-x;
}
/* TWENTYTWENTY (before/after image compare) — structural, color-free */
.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after,
.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after {
    content: " ";
    display: block;
    background: white;
    position: absolute;
    z-index: 30;
    -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-horizontal .twentytwenty-handle:before,
.twentytwenty-horizontal .twentytwenty-handle:after {
    width: 3px;
    height: 9999px;
    left: 50%;
    margin-left: -1.5px;
}

.twentytwenty-vertical .twentytwenty-handle:before,
.twentytwenty-vertical .twentytwenty-handle:after {
    width: 9999px;
    height: 3px;
    top: 50%;
    margin-top: -1.5px;
}

.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.twentytwenty-before-label,
.twentytwenty-after-label,
.twentytwenty-overlay {
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.twentytwenty-before-label,
.twentytwenty-after-label {
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    color: white;
    font-size: 13px;
    letter-spacing: 0.1em;
}

.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    line-height: 38px;
    padding: 0 20px;
    border-radius: 2px;
}

.twentytwenty-horizontal .twentytwenty-before-label:before,
.twentytwenty-horizontal .twentytwenty-after-label:before {
    top: 50%;
    margin-top: -19px;
}

.twentytwenty-vertical .twentytwenty-before-label:before,
.twentytwenty-vertical .twentytwenty-after-label:before {
    left: 50%;
    margin-left: -45px;
    text-align: center;
    width: 90px;
}

.twentytwenty-left-arrow,
.twentytwenty-right-arrow,
.twentytwenty-up-arrow,
.twentytwenty-down-arrow {
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
}

.twentytwenty-left-arrow,
.twentytwenty-right-arrow {
    top: 50%;
    margin-top: -6px;
}

.twentytwenty-up-arrow,
.twentytwenty-down-arrow {
    left: 50%;
    margin-left: -6px;
}

.twentytwenty-container {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    z-index: 0;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.twentytwenty-container img {
    max-width: 100%;
    position: absolute;
    top: 0;
    display: block;
}

.twentytwenty-container.active .twentytwenty-overlay,
.twentytwenty-container.active :hover.twentytwenty-overlay {
    background: rgba(0, 0, 0, 0);
}

.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
    opacity: 0;
}

.twentytwenty-container * {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.twentytwenty-before-label {
    opacity: 0;
}

.twentytwenty-before-label:before {
    content: attr(data-content);
}

.twentytwenty-after-label {
    opacity: 0;
}

.twentytwenty-after-label:before {
    content: attr(data-content);
}

.twentytwenty-horizontal .twentytwenty-before-label:before {
    left: 10px;
}

.twentytwenty-horizontal .twentytwenty-after-label:before {
    right: 10px;
}

.twentytwenty-vertical .twentytwenty-before-label:before {
    top: 10px;
}

.twentytwenty-vertical .twentytwenty-after-label:before {
    bottom: 10px;
}

.twentytwenty-overlay {
    -webkit-transition-property: background;
    transition-property: background;
    background: rgba(0, 0, 0, 0);
    z-index: 25;
}

.twentytwenty-overlay:hover {
    background: rgba(0, 0, 0, 0.25);
}

.twentytwenty-overlay:hover .twentytwenty-after-label {
    opacity: 1;
}

.twentytwenty-overlay:hover .twentytwenty-before-label {
    opacity: 1;
}

.twentytwenty-before {
    z-index: 20;
}

.twentytwenty-after {
    z-index: 10;
}

.twentytwenty-handle {
    height: 38px;
    width: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -22px;
    margin-top: -22px;
    border: 3px solid white;
    border-radius: 1000px;
    -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
    z-index: 40;
    cursor: pointer;
}

.twentytwenty-horizontal .twentytwenty-handle:before {
    bottom: 50%;
    margin-bottom: 22px;
    -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-horizontal .twentytwenty-handle:after {
    top: 50%;
    margin-top: 22px;
    -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-vertical .twentytwenty-handle:before {
    left: 50%;
    margin-left: 22px;
    -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-vertical .twentytwenty-handle:after {
    right: 50%;
    margin-right: 22px;
    -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
    box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
}

.twentytwenty-left-arrow {
    border-right: 6px solid white;
    left: 50%;
    margin-left: -17px;
}

.twentytwenty-right-arrow {
    border-left: 6px solid white;
    right: 50%;
    margin-right: -17px;
}

.twentytwenty-up-arrow {
    border-bottom: 6px solid white;
    top: 50%;
    margin-top: -17px;
}

.twentytwenty-down-arrow {
    border-top: 6px solid white;
    bottom: 50%;
    margin-bottom: -17px;
}

.marker {
  color: var(--studio-accent);
  background: var(--studio-surface);
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.6);
}
.marker:hover {
  color: var(--studio-accent-hover);
}
.studios-content-main .byline {
  color: var(--studio-muted-2);
}
.aside-subtitle {
  color: var(--studio-muted-3);
}