/*
 * Avid S6/S4 Configurator styles
 * Ported 1:1 from the legacy WordPress theme (css/configurator.css).
 * Changes vs. original:
 *   - image paths rewritten from ../img/ to ../Images/
 *   - WordPress/Ninja-Forms/Enfold specific rules removed (#nf-form-*, #configurator-select, .nf-breadcrumbs, #forms-hp-configurator)
 *   - self-contained button base added for .stage-menu buttons (previously provided by the Enfold ".avia-button" class)
 * All layout values (widths, paddings, offsets, translateX) are preserved verbatim.
 */

#S6-Configurator .stage-menu .avia-button,
#S4-Configurator .stage-menu .avia-button {
  display: inline-block;
  padding: .55rem 1.1rem;
  border-radius: 4px;
  font-size: .9rem;
  line-height: 1.2;
  text-decoration: none;
  border: none;
}
#S6-Configurator .stage-menu a.avia-button,
#S4-Configurator .stage-menu a.avia-button {
  background: #F05012;
  color: #fff;
}
#S6-Configurator .stage-menu a.avia-button:hover,
#S4-Configurator .stage-menu a.avia-button:hover {
  background: #E64B0F;
}

.stage-wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #e0e0e0;
  padding: 2rem 0; }

.stage-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: absolute;
  bottom: .5rem;
  z-index: 5;
  width: 100%;
  padding: 0 1rem; }
  .stage-menu .btn-clear {
    background: #ca3131;
    color: white;
    cursor: pointer; }

.stage {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 50%;
  max-width: 1000px; }
  @media (min-width: 1000px) {
    .stage {
      padding-bottom: 500px; } }
  .stage .help {
    position: absolute;
    top: 0;
    left: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    padding: 1rem;
    background: white;
    -webkit-box-shadow: #00000033 0 20px 40px;
    box-shadow: #00000033 0 20px 40px; }
    .stage .help:before {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 30px;
      border-left: transparent solid 20px;
      border-right: transparent solid 20px;
      border-bottom: #ffffff solid 20px; }
    .stage .help.bottom {
      top: auto;
      bottom: 0;
      left: 20%; }
      .stage .help.bottom:before {
        bottom: auto;
        top: 100%;
        border-top: #ffffff solid 20px;
        border-bottom: none; }
    .stage .help > img {
      max-width: 164px; }

#S6-Configurator .stage[data-frame="52"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-2-frames.png"); }

#S6-Configurator .stage[data-frame="53"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-3-frames.png"); }

#S6-Configurator .stage[data-frame="54"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-4-frames.png"); }

#S6-Configurator .stage[data-frame="55"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-5-frames.png"); }

#S6-Configurator .stage[data-frame="56"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-6-frames.png"); }

#S6-Configurator .stage[data-frame="57"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-7-frames.png"); }

#S6-Configurator .stage[data-frame="59"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-9-frames.png"); }

#S6-Configurator .stage[data-frame="95"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-5ex-frames.png"); }

#S6-Configurator .stage[data-frame="96"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-6ex-frames.png"); }

#S6-Configurator .stage[data-frame="97"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-7ex-frames.png"); }

#S6-Configurator .stage[data-frame="99"] {
  background-image: url("../Images/s6/Consoles/qm-avid-konsole-9ex-frames.png"); }

#S6-Configurator .stage[data-frame$="2"] .fields {
  width: 38%;
  top: -5.2%; }
  #S6-Configurator .stage[data-frame$="2"] .fields > .fieldRow > .field {
    width: calc(100%/2);
    padding-bottom: 26%; }
  #S6-Configurator .stage[data-frame$="2"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 32%; }
  #S6-Configurator .stage[data-frame$="2"] .fields > .fieldRow[data-row="d"] > .field {
    padding-bottom: 38.3%; }
  #S6-Configurator .stage[data-frame$="2"] .fields > .fieldRow[data-row="m"] {
    top: 8.6%; }
    #S6-Configurator .stage[data-frame$="2"] .fields > .fieldRow[data-row="m"] > .field {
      padding-bottom: 73.5%; }

#S6-Configurator .stage[data-frame$="3"] .fields {
  width: 54.4%;
  top: -3.3%; }
  #S6-Configurator .stage[data-frame$="3"] .fields > .fieldRow > .field {
    width: calc(100%/3);
    padding-bottom: 17.3%; }
  #S6-Configurator .stage[data-frame$="3"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 21.5%; }
  #S6-Configurator .stage[data-frame$="3"] .fields > .fieldRow[data-row="d"] > .field {
    padding-bottom: 25.5%; }
  #S6-Configurator .stage[data-frame$="3"] .fields > .fieldRow[data-row="m"] > .field {
    padding-bottom: 49.3%; }
  #S6-Configurator .stage[data-frame$="3"] .fields > .fieldRow[data-row="p"] {
    display: block;
    text-align: left;
    white-space: nowrap;
    top: 18.5%; }
    #S6-Configurator .stage[data-frame$="3"] .fields > .fieldRow[data-row="p"] > .field {
      width: calc(200% / 3);
      padding-bottom: calc(200% / 3); }
      #S6-Configurator .stage[data-frame$="3"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: calc(100% / 3);
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: calc(100% / 3);
        margin-top: calc(100% / 6); }
        #S6-Configurator .stage[data-frame$="3"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: calc(100% / 6); }

#S6-Configurator .stage[data-frame$="4"] .fields {
  width: 72.1%;
  top: -3%; }
  #S6-Configurator .stage[data-frame$="4"] .fields > .fieldRow > .field {
    width: calc(100%/4);
    padding-bottom: 12.9%; }
  #S6-Configurator .stage[data-frame$="4"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 16.3%; }
  #S6-Configurator .stage[data-frame$="4"] .fields > .fieldRow[data-row="d"] > .field {
    padding-bottom: 19.3%; }
  #S6-Configurator .stage[data-frame$="4"] .fields > .fieldRow[data-row="m"] > .field {
    padding-bottom: 38.3%; }
  #S6-Configurator .stage[data-frame$="4"] .fields > .fieldRow[data-row="p"] {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    top: 18.5%; }
    #S6-Configurator .stage[data-frame$="4"] .fields > .fieldRow[data-row="p"] > .field {
      width: 50%;
      padding-bottom: 49.3%; }
      #S6-Configurator .stage[data-frame$="4"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: 25%;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: 25%;
        margin-top: 12.5%; }
        #S6-Configurator .stage[data-frame$="4"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: 12.5%; }

#S6-Configurator .stage[data-frame$="5"] .fields {
  width: 90%;
  top: -3%; }
  #S6-Configurator .stage[data-frame$="5"] .fields > .fieldRow > .field {
    width: 20%;
    padding-bottom: 10.4%; }
  #S6-Configurator .stage[data-frame$="5"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 12.9%; }
  #S6-Configurator .stage[data-frame$="5"] .fields > .fieldRow[data-row="d"] > .field {
    padding-bottom: 15.3%; }
  #S6-Configurator .stage[data-frame$="5"] .fields > .fieldRow[data-row="m"] > .field {
    padding-bottom: 30.1%; }
  #S6-Configurator .stage[data-frame$="5"] .fields > .fieldRow[data-row="p"] {
    display: block;
    text-align: left;
    white-space: nowrap;
    top: 18.5%; }
    #S6-Configurator .stage[data-frame$="5"] .fields > .fieldRow[data-row="p"] > .field {
      width: 40%;
      padding-bottom: 40%; }
      #S6-Configurator .stage[data-frame$="5"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: 20%;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: 20%;
        margin-top: 10%; }
        #S6-Configurator .stage[data-frame$="5"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: 10%; }

#S6-Configurator .stage[data-frame$="6"] .fields {
  width: 97%;
  top: 3%; }
  #S6-Configurator .stage[data-frame$="6"] .fields > .fieldRow > .field {
    width: calc(100%/6);
    padding-bottom: 8.5%; }
  #S6-Configurator .stage[data-frame$="6"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 10.8%; }
  #S6-Configurator .stage[data-frame$="6"] .fields > .fieldRow[data-row="d"] > .field {
    padding-bottom: 12.8%; }
  #S6-Configurator .stage[data-frame$="6"] .fields > .fieldRow[data-row="m"] > .field {
    padding-bottom: 24.3%; }
  #S6-Configurator .stage[data-frame$="6"] .fields > .fieldRow[data-row="p"] {
    display: block;
    text-align: left;
    white-space: nowrap;
    top: 18.5%; }
    #S6-Configurator .stage[data-frame$="6"] .fields > .fieldRow[data-row="p"] > .field {
      width: 33.333333%;
      padding-bottom: 33.333333%; }
      #S6-Configurator .stage[data-frame$="6"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: 16.666666%;
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: 16.666666%;
        margin-top: 8.333333%; }
        #S6-Configurator .stage[data-frame$="6"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: 8.333333%; }

#S6-Configurator .stage[data-frame$="7"] .fields {
  width: 97%;
  top: 10%; }
  #S6-Configurator .stage[data-frame$="7"] .fields > .fieldRow > .field {
    width: calc(100% / 7);
    padding-bottom: 7.3%; }
  #S6-Configurator .stage[data-frame$="7"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 9.1%; }
  #S6-Configurator .stage[data-frame$="7"] .fields > .fieldRow[data-row="d"] > .field {
    padding-bottom: 10.8%; }
  #S6-Configurator .stage[data-frame$="7"] .fields > .fieldRow[data-row="m"] > .field {
    padding-bottom: 21%; }
  #S6-Configurator .stage[data-frame$="7"] .fields > .fieldRow[data-row="p"] {
    display: block;
    text-align: left;
    white-space: nowrap;
    top: 12.5%; }
    #S6-Configurator .stage[data-frame$="7"] .fields > .fieldRow[data-row="p"] > .field {
      width: calc(197% / 7);
      padding-bottom: calc(200% / 7); }
      #S6-Configurator .stage[data-frame$="7"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: calc(98% / 7);
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: calc(100% / 7);
        margin-top: calc(100% / 14); }
        #S6-Configurator .stage[data-frame$="7"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: calc(100% / 14); }

#S6-Configurator .stage[data-frame$="9"] .fields {
  width: 97%;
  top: 19%; }
  #S6-Configurator .stage[data-frame$="9"] .fields > .fieldRow > .field {
    width: calc(100%/9);
    padding-bottom: 5.6%; }
  #S6-Configurator .stage[data-frame$="9"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 7.1%; }
  #S6-Configurator .stage[data-frame$="9"] .fields > .fieldRow[data-row="d"] > .field {
    padding-bottom: 8.5%; }
  #S6-Configurator .stage[data-frame$="9"] .fields > .fieldRow[data-row="m"] > .field {
    padding-bottom: 16.3%; }
  #S6-Configurator .stage[data-frame$="9"] .fields > .fieldRow[data-row="p"] {
    display: block;
    text-align: left;
    white-space: nowrap;
    top: 10.2%; }
    #S6-Configurator .stage[data-frame$="9"] .fields > .fieldRow[data-row="p"] > .field {
      width: calc(197% / 9);
      padding-bottom: calc(200% / 9); }
      #S6-Configurator .stage[data-frame$="9"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: calc(98% / 9);
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: calc(100% / 9);
        margin-top: calc(100% / 18); }
        #S6-Configurator .stage[data-frame$="9"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: calc(100% / 18); }

#S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields {
  width: 75.3%;
  top: -3%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields > .fieldRow > .field {
    width: calc(100%/5);
    padding-bottom: 10.4%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 12.9%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields > .fieldRow[data-row="e"] > .field {
    padding-bottom: 15.3%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields > .fieldRow[data-row="m"] {
    top: 23.6%; }
    #S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields > .fieldRow[data-row="m"] > .field {
      padding-bottom: 29.4%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields > .fieldRow[data-row="p"] {
    display: block;
    text-align: left;
    white-space: nowrap;
    top: 32.2%; }
    #S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields > .fieldRow[data-row="p"] > .field {
      width: calc(200% / 5);
      padding-bottom: calc(200% / 5); }
      #S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: calc(98% / 5);
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: calc(100% / 5);
        margin-top: calc(100% / 10); }
        #S6-Configurator .stage[data-frame^="9"][data-frame$="5"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: calc(100% / 10); }

#S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields {
  width: 89.9%;
  top: -2%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields > .fieldRow > .field {
    width: calc(100%/6);
    padding-bottom: 8.5%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 10.8%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields > .fieldRow[data-row="e"] > .field {
    padding-bottom: 12.8%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields > .fieldRow[data-row="m"] {
    top: 22.6%; }
    #S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields > .fieldRow[data-row="m"] > .field {
      padding-bottom: 24.5%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields > .fieldRow[data-row="p"] {
    display: block;
    text-align: left;
    white-space: nowrap;
    top: 31.5%; }
    #S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields > .fieldRow[data-row="p"] > .field {
      width: calc(198% / 6);
      padding-bottom: calc(200% / 6); }
      #S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: calc(98% / 6);
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: calc(100% / 6);
        margin-top: calc(100% / 12); }
        #S6-Configurator .stage[data-frame^="9"][data-frame$="6"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: calc(100% / 12); }

#S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields {
  width: 96.2%;
  top: 3.2%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields > .fieldRow > .field {
    width: calc(100%/7);
    padding-bottom: 7.3%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 9.1%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields > .fieldRow[data-row="e"] > .field {
    padding-bottom: 11%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields > .fieldRow[data-row="m"] {
    top: 21%; }
    #S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields > .fieldRow[data-row="m"] > .field {
      padding-bottom: 20.8%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields > .fieldRow[data-row="p"] {
    display: block;
    text-align: left;
    white-space: nowrap;
    top: 27.7%; }
    #S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields > .fieldRow[data-row="p"] > .field {
      width: calc(197% / 7);
      padding-bottom: calc(200% / 7); }
      #S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: calc(98% / 7);
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: calc(100% / 7);
        margin-top: calc(100% / 14); }
        #S6-Configurator .stage[data-frame^="9"][data-frame$="7"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: calc(100% / 14); }

#S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields {
  top: 13.1%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields > .fieldRow > .field {
    width: calc(100%/9);
    padding-bottom: 5.7%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields > .fieldRow[data-row="a"] > .field {
    padding-bottom: 7.1%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields > .fieldRow[data-row="e"] > .field {
    padding-bottom: 8.5%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields > .fieldRow[data-row="m"] {
    top: 16.9%; }
    #S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields > .fieldRow[data-row="m"] > .field {
      padding-bottom: 16.3%; }
  #S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields > .fieldRow[data-row="p"] {
    display: block;
    text-align: left;
    white-space: nowrap;
    top: 21.8%; }
    #S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields > .fieldRow[data-row="p"] > .field {
      width: calc(197% / 9);
      padding-bottom: calc(200% / 9); }
      #S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]) {
        width: calc(98% / 9);
        -webkit-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
        padding-bottom: calc(98% / 9);
        margin-top: calc(100% / 18); }
        #S6-Configurator .stage[data-frame^="9"][data-frame$="9"] .fields > .fieldRow[data-row="p"] > .field.active:not([data-part]):first-child {
          margin-left: calc(100% / 18); }

#S6-Configurator .fieldRow[data-row="p"] > .field.active:not([data-part]):hover:before {
  content: '';
  pointer-events: none;
  display: block;
  width: 160%;
  height: 160%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate(-20%, -20%);
  -ms-transform: translate(-20%, -20%);
  transform: translate(-20%, -20%);
  border-radius: 1rem;
  border: solid #ffffff45 8px; }

#S6-Configurator .fieldRow-mtm {
  position: absolute;
  pointer-events: none;
  width: 100%;
  top: 7.6%; }
  #S6-Configurator .fieldRow-mtm.active {
    pointer-events: all; }
  #S6-Configurator .fieldRow-mtm > .field[data-part] {
    pointer-events: all; }

#S6-Configurator .fieldRow-pd {
  position: absolute;
  pointer-events: none;
  width: 100%;
  top: 7.6%; }
  #S6-Configurator .fieldRow-pd.active {
    pointer-events: all; }
  #S6-Configurator .fieldRow-pd > .field[data-part] {
    pointer-events: all; }

#S6-Configurator .field[data-part="1"] {
  background-image: url("../Images/s6/Products/M10-M40-Module-Pro-Tools-S6.png"); }

#S6-Configurator .field[data-part="2"] {
  background-image: url("../Images/s6/Products/Display-Module-Pro-Tools-S6.png"); }

#S6-Configurator .field[data-part="3"] {
  background-image: url("../Images/s6/Products/Post-Module-Pro-Tools-S6.png"); }

#S6-Configurator .field[data-part="4"] {
  background-image: url("../Images/s6/Products/Joystick-Module-Pro-Tools-S6.png"); }

#S6-Configurator .field[data-part="5"] {
  background-image: url("../Images/s6/Products/Knob-Module-Pro-Tools-S6.png"); }

#S6-Configurator .field[data-part="6"] {
  background-image: url("../Images/s6/Products/Process-Module-Pro-Tools-S6.png"); }

#S6-Configurator .field[data-part="7"] {
  background-image: url("../Images/s6/Products/Fader-Module-Pro-Tools-S6.png"); }

#S6-Configurator .field[data-part="8"] {
  background-image: url("../Images/s6/Products/Automation-Module-Pro-Tools-S6.png"); }

#S6-Configurator .field[data-part="9"] {
  background-image: url("../Images/s6/Products/Producer-Desk-Pro-Tools-S6-f.png"); }

#S4-Configurator .stage[data-frame="1"] {
  background-image: url("../Images/s4/Consoles/s4-8-3foot.png"); }
  #S4-Configurator .stage[data-frame="1"] .fields {
    width: 54.4%;
    top: -3.3%; }
    #S4-Configurator .stage[data-frame="1"] .fields > .fieldRow > .field {
      width: calc(100%/3);
      padding-bottom: 17.3%; }
    #S4-Configurator .stage[data-frame="1"] .fields > .fieldRow[data-row="a"] > .field {
      padding-bottom: 21.5%; }

#S4-Configurator .stage[data-frame="2"] {
  background-image: url("../Images/s4/Consoles/s4-16-4foot.png"); }
  #S4-Configurator .stage[data-frame="2"] .fields {
    width: 72.1%;
    top: -3%; }
    #S4-Configurator .stage[data-frame="2"] .fields > .fieldRow > .field {
      width: calc(100%/4);
      padding-bottom: 12.9%; }
    #S4-Configurator .stage[data-frame="2"] .fields > .fieldRow[data-row="a"] > .field {
      padding-bottom: 16.3%; }

#S4-Configurator .stage[data-frame="3"] {
  background-image: url("../Images/s4/Consoles/s4-16-5foot.png"); }
  #S4-Configurator .stage[data-frame="3"] .fields {
    width: 90%;
    top: -3%; }
    #S4-Configurator .stage[data-frame="3"] .fields > .fieldRow > .field {
      width: 20%;
      padding-bottom: 10.4%; }
    #S4-Configurator .stage[data-frame="3"] .fields > .fieldRow[data-row="a"] > .field {
      padding-bottom: 12.9%; }

#S4-Configurator .stage[data-frame="4"] {
  background-image: url("../Images/s4/Consoles/s4-24-5foot.png"); }
  #S4-Configurator .stage[data-frame="4"] .fields {
    width: 90%;
    top: -3%; }
    #S4-Configurator .stage[data-frame="4"] .fields > .fieldRow > .field {
      width: 20%;
      padding-bottom: 10.4%; }
    #S4-Configurator .stage[data-frame="4"] .fields > .fieldRow[data-row="a"] > .field {
      padding-bottom: 12.9%; }

#S4-Configurator .field[data-part="1"] {
  background-image: url("../Images/s4/Products/Display-Module-Pro-Tools-S6.png"); }

#S4-Configurator .field[data-part="2"] {
  background-image: url("../Images/s4/Products/Post-Module-Pro-Tools-S6.png"); }

#S4-Configurator .field[data-part="3"] {
  background-image: url("../Images/s4/Products/Joystick-Module-Pro-Tools-S6.png"); }

#S4-Configurator .field[data-part="4"] {
  background-image: url("../Images/s4/Products/Knob-Module-Pro-Tools-S6.png"); }

.fields {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.fieldRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center; }

.field {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 1px;
  background-size: cover;
  background-position: center;
  border-radius: 3px; }
  .field.active:not([data-part]):not(.disabled) {
    background: rgba(255, 136, 0, 0.5);
    cursor: pointer;
    margin: 1px; }
    .field.active:not([data-part]):not(.disabled):after {
      content: '+';
      position: absolute;
      color: white;
      font-size: 2rem;
      font-weight: bold;
      opacity: 0.7;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
  .field .btn-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #ca3131;
    color: white;
    cursor: pointer;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0;
    outline: none; }
    .field .btn-delete:after {
      content: '';
      background: white;
      height: 2px;
      width: 12px; }
  .field.selected .btn-delete {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  @media (min-width: 768px) {
    .field .btn-delete {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

#S4-Configurator .part-cat-modules {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.nav-parts {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 100%;
  width: 100%;
  background: white;
  padding: 2rem .5rem .5rem .5rem;
  -webkit-transition: -webkit-transform .25s;
  transition: -webkit-transform .25s;
  -o-transition: transform .25s;
  transition: transform .25s;
  transition: transform .25s, -webkit-transform .25s;
  -webkit-box-shadow: #0000002b 0 15px 30px;
  box-shadow: #0000002b 0 15px 30px; }
  .nav-parts.open {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
    .nav-parts.open .btn-toggle {
      color: #717171;
      background: transparent;
      top: 0;
      left: auto;
      right: 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
  .nav-parts .btn-toggle {
    position: absolute;
    left: 100%;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    outline: none;
    background-color: #ff8800;
    color: white;
    font-size: 1.5rem; }
    @media (min-width: 480px) {
      .nav-parts .btn-toggle {
        top: 2rem; } }
  @media (min-width: 768px) {
    .nav-parts {
      position: relative;
      top: 0 !important;
      right: 0;
      width: 100%;
      -webkit-box-shadow: none;
      box-shadow: none; }
      .nav-parts.open {
        -webkit-transform: translate(0);
        -ms-transform: translate(0);
        transform: translate(0); }
      .nav-parts .btn-toggle {
        display: none; } }

.select-part {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .select-part .part-cat-large {
    width: 33.33333%; }
  .select-part .part-cat-cm {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    width: 66.66666%; }
    .select-part .part-cat-cm > .part {
      width: calc(50% - 10px); }
  @media (min-width: 480px) {
    .select-part .part-cat-large {
      width: 25%; }
    .select-part .part-cat-cm {
      width: 75%; }
      .select-part .part-cat-cm > .part {
        width: calc(25% - 10px); } }

.part {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
  opacity: .8;
  cursor: pointer; }
  .part.active {
    opacity: 1; }
    .part.active > img {
      -webkit-box-shadow: 0 0 0 4px #ff8800;
      box-shadow: 0 0 0 4px #ff8800; }
  .part > img {
    width: 100%;
    max-width: 75px; }
  .part > .part-name {
    position: absolute;
    top: 5px;
    background: #00000094;
    color: white;
    padding: 3px 11px;
    border-radius: 16px;
    text-align: center;
    text-shadow: black 0 1px 1px;
    font-size: 0.6rem; }
  @media (min-width: 480px) {
    .part > img {
      max-width: 100px; }
    .part > .part-name {
      font-size: .8rem; } }

#S6-Configurator {
  font-family: sans-serif;
  position: relative; }
  #S6-Configurator .frame-list li img {
    height: 24px; }
  #S6-Configurator .sub-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }

#S4-Configurator {
  font-family: sans-serif;
  position: relative; }
  #S4-Configurator .frame-list li img {
    height: 39px; }
    @media (min-width: 768px) {
      #S4-Configurator .frame-list li img {
        height: 80px; } }
  #S4-Configurator .sub-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }

#confId {
  overflow: hidden; }

/* Embedded request form: collapsed by default, revealed by the JS "Send
   Configuration" button (mirrors the original Ninja Forms max-height reveal). */
.avid-form-wrap {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.5s;
  -o-transition: max-height 0.5s;
  transition: max-height 0.5s; }
  .avid-form-wrap.open {
    max-height: 4000px; }

.nav-frame {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.frame-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0; }
  .frame-list li {
    padding: .5rem;
    cursor: pointer; }
    .frame-list li:hover {
      background: #fff3d0; }
    .frame-list li img {
      display: block; }

.select-frame .frame-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0; }
  .select-frame .frame-list li {
    padding: .5rem;
    cursor: pointer; }
    .select-frame .frame-list li:hover {
      background: #fff3d0; }
    .select-frame .frame-list li img {
      display: block; }

.select-frame.select-frame-5 .frame-list img {
  height: 24px; }

.select-frame.select-frame-9 .frame-list img {
  height: 29px; }

.msg {
  background: #d2d2d2;
  position: fixed;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 10px;
  padding: 1rem;
  -webkit-box-shadow: #0000001f 0 16px 28px;
  box-shadow: #0000001f 0 16px 28px;
  font-size: 1.2rem;
  display: none; }
  .msg.alert {
    background-color: #d88c8c;
    color: white; }
  .msg.info {
    background-color: #8cb1d8;
    color: white; }
  .msg.warning {
    background-color: #f3b85f;
    color: white; }
  .msg.success {
    background-color: #70c185;
    color: white; }