/* CSS Document */
body {
  font-size: 14px; }

h2 {
  font: 1.714em/1.24em "BrandonGrotW01-Regular", "Century Gothic", sans-serif;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

h3 {
  font: 1.214em/1.47em "BrandonGrotW01-Regular", "Century Gothic", sans-serif;
  text-transform: none;
  margin-bottom: 0;
  letter-spacing: 0;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

h4 {
  font: 1.071em/1.535em "BrandonGrotW01-Regular", "Century Gothic", sans-serif;
  text-transform: none;
  margin-bottom: 10px;
  letter-spacing: 0;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

h5 {
  font: 12px/18px "Orator W01 Medium", Courier, sans-serif;
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 0;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.buttonLink {
  font: 12px/34px "Brandon Grot W01 Medium", "Century Gothic", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
  .buttonLink:after {
    content: "";
    display: block;
    width: 36px;
    height: 1px;
    background-color: black; }
  .buttonLink.center {
    text-align: center; }
    .buttonLink.center:after {
      margin: 0 auto; }

.buttonNew {
  display: inline-block;
  vertical-align: middle;
  padding: 5px 15px;
  margin: 10px 0;
  font: 12px/24px "Brandon Grot W01 Medium", "Century Gothic", sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  min-width: 160px;
  border: solid 1px #eaeaea;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box; }
  .buttonNew:hover, .buttonNew:active {
    border-color: black;
    background-color: black;
    color: white !important; }
  .buttonNew[disabled], .buttonNew.disabled {
    opacity: 0.35;
    pointer-events: none; }

p {
  font-size: 1em;
  line-height: 1.64em;
  margin-bottom: 12px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.simpleDrop {
  width: 100%;
  height: 44px;
  padding-right: 25px;
  margin-bottom: 16px;
  border-radius: 0;
  border-bottom: solid 1px #d6d6d6;
  font: 1.143em/44px "BrandonGrotW01-Regular", "Century Gothic", sans-serif;
  font-weight: normal;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  outline: none;
  background-image: url(/_images/selectDownArrow.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-color: transparent; }
  .simpleDrop::-ms-expand {
    display: none; }

.fieldText {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  border-bottom: solid 1px #eaeaea; }
  .fieldText.noLine {
    border-bottom: none; }
  .fieldText label {
    display: inline-block;
    vertical-align: bottom;
    padding-right: 16px;
    font: 0.86em/30px "Brandon Grot W01 Medium", "Century Gothic", sans-serif;
    text-transform: capitalize;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    white-space: nowrap; }
    .fieldText label span {
      white-space: normal; }
      .fieldText label span:last-child {
        max-width: none; }
    .fieldText label.active {
      color: #9a9490; }
      .fieldText label.active em {
        color: black; }
      .fieldText label.active span {
        color: black; }
    .fieldText label em {
      font-style: normal;
      text-transform: none; }
  .fieldText .text {
    display: inline-block;
    font: 16px/34px "Brandon Grot W01 Light", "Century Gothic", sans-serif;
    height: 36px; }
  .fieldText input {
    max-width: none !important;
    padding: 0 16px 0 0;
    margin-bottom: 0 !important;
    border: none;
    text-align: left !important;
    line-height: 30px;
    height: 30px;
    background-color: transparent; }
    .fieldText input:focus {
      background-color: transparent; }
    .fieldText input:hover, .fieldText input:active {
      box-shadow: none; }
  .fieldText textarea {
    padding: 5px 16px 5px 0;
    border: none;
    line-height: 20px;
    background-color: transparent; }
    .fieldText textarea:focus {
      background-color: transparent; }
    .fieldText textarea:hover, .fieldText textarea:active {
      box-shadow: none; }

.dyoSelectProd {
  width: 100%;
  padding-top: 5%;
  overflow: hidden;
  position: relative; }
  .dyoSelectProd .flex-viewport {
    margin: 0 auto; }
  .dyoSelectProd .slides {
    margin-bottom: 0;
    /* Clearfix for the .slides element */ }
    .dyoSelectProd .slides > li {
      display: none;
      position: relative;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden; }
    .dyoSelectProd .slides:after {
      content: "\0020";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0; }
  .dyoSelectProd .slides > li {
    background-color: #f8f8f8;
    max-width: 180px;
    margin-right: 10px; }
    .dyoSelectProd .slides > li > a {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      align-content: center;
      width: 100%;
      height: 100%;
      padding: 7% 0 0;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box; }
      .dyoSelectProd .slides > li > a img {
        margin-bottom: 5%; }
      .dyoSelectProd .slides > li > a h5 {
        width: 100%; }
      .dyoSelectProd .slides > li > a:hover img, .dyoSelectProd .slides > li > a:active img {
        opacity: 0.65; }
  .dyoSelectProd .flex-control-nav {
    font-size: 0;
    line-height: 0;
    text-align: center;
    margin-top: 14px;
    z-index: 100; }
    .dyoSelectProd .flex-control-nav li {
      display: inline-block; }
      .dyoSelectProd .flex-control-nav li a {
        display: block;
        position: relative;
        padding: 8px;
        margin: 0 auto; }
        .dyoSelectProd .flex-control-nav li a:after {
          content: "";
          display: block;
          width: 7px;
          height: 7px;
          background-color: #eaeaea;
          border-radius: 50%;
          transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
        .dyoSelectProd .flex-control-nav li a:hover:after, .dyoSelectProd .flex-control-nav li a:active:after, .dyoSelectProd .flex-control-nav li a.flex-active:after {
          background-color: black; }

#startProj {
  display: none;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 200000;
  padding: 35px;
  box-sizing: border-box; }
  #startProj #sapThumbs {
    position: relative;
    transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); }

section.loading > div, section.loading > nav, section.loading > main, section.loading > article, section.loading > aside, section.loading > section, .section.loading > div, .section.loading > nav, .section.loading > main, .section.loading > article, .section.loading > aside, .section.loading > section {
  opacity: 0.2; }

section.loading #loader, .section.loading #loader {
  background: none;
  position: fixed;
  width: 100px;
  height: 61px;
  text-align: center;
  margin-left: -50px;
  padding-top: 39px;
  top: 45%;
  left: 50%; }
  section.loading #loader:before, .section.loading #loader:before {
    content: "";
    position: absolute;
    display: block;
    width: 100px;
    height: 97px;
    top: 0;
    left: 0;
    border-radius: 50%;
    box-shadow: 0 3px 0 0 black;
    -webkit-animation: 1s infinite linear ring;
            animation: 1s infinite linear ring; }
  section.loading #loader:after, .section.loading #loader:after {
    content: "loading";
    display: inline-block;
    width: 100%;
    font: 1em/1.5em "BrandonGrotW01-Regular", "Century Gothic", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px; }

@-webkit-keyframes ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes ring {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.overlayEdit {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 100200; }
  .overlayEdit .subsection {
    max-width: 1180px;
    padding: 40px 70px !important;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    top: 0;
    background-color: #f3f3f3;
    transition: top 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
    .overlayEdit .subsection .fieldText, .overlayEdit .subsection input.oneline, .overlayEdit .subsection textarea.oneline {
      border-bottom-color: #d6d6d6; }
    .overlayEdit .subsection h4 {
      line-height: 22px; }
    .overlayEdit .subsection .warning {
      font-size: 1em;
      font-weight: bold;
      text-transform: uppercase; }
    .overlayEdit .subsection ul {
      list-style: disc outside;
      padding-left: 16px; }
    .overlayEdit .subsection .buttonNew, .overlayEdit .subsection .simpleButton {
      box-sizing: border-box;
      margin: 40px 0 0; }
      .overlayEdit .subsection .buttonNew[disabled], .overlayEdit .subsection .buttonNew.disabled, .overlayEdit .subsection .simpleButton[disabled], .overlayEdit .subsection .simpleButton.disabled {
        opacity: 0.35;
        pointer-events: none; }
    .overlayEdit .subsection .buttonRow {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: flex-start; }
      .overlayEdit .subsection .buttonRow > * {
        margin-left: 4px;
        margin-right: 4px;
        box-sizing: border-box; }
        .overlayEdit .subsection .buttonRow > *:first-child {
          margin-left: 0; }
        .overlayEdit .subsection .buttonRow > *:last-child {
          margin-right: 0; }
      .overlayEdit .subsection .buttonRow .buttonNew, .overlayEdit .subsection .buttonRow .simpleButton {
        min-width: calc(33.3% - 28px);
        white-space: nowrap; }
        .overlayEdit .subsection .buttonRow .buttonNew.alt, .overlayEdit .subsection .buttonRow .simpleButton.alt {
          min-width: 175px; }
      .overlayEdit .subsection .buttonRow .selectBox {
        width: calc(33.3% - 28px); }
      .overlayEdit .subsection .buttonRow.quarter .buttonNew:nth-child(2), .overlayEdit .subsection .buttonRow.quarter .simpleButton:nth-child(2) {
        width: 39%; }
      .overlayEdit .subsection .buttonRow.four > * {
        width: 25%;
        min-width: 0; }
      .overlayEdit .subsection .buttonRow.twobytwo {
        flex-wrap: wrap; }
        .overlayEdit .subsection .buttonRow.twobytwo > * {
          width: calc(50% - 4px);
          min-width: 0;
          max-width: none;
          margin-bottom: 10px; }
          .overlayEdit .subsection .buttonRow.twobytwo > *:nth-child(2n+0) {
            margin-right: 0; }
            .overlayEdit .subsection .buttonRow.twobytwo > *:nth-child(2n+0) + * {
              margin-left: 0; }
      .overlayEdit .subsection .buttonRow.disable .delete {
        pointer-events: none;
        opacity: 0.5; }
      .overlayEdit .subsection .buttonRow + p {
        margin-top: 20px; }
    .overlayEdit .subsection .sectionInner {
      max-width: none;
      margin-left: 0; }
      .overlayEdit .subsection .sectionInner + .sectionInner {
        padding-top: 20px; }
      .overlayEdit .subsection .sectionInner.radioSelectPair {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: center; }
        .overlayEdit .subsection .sectionInner.radioSelectPair > * {
          display: inline-block;
          width: 47%; }
        .overlayEdit .subsection .sectionInner.radioSelectPair .fieldText, .overlayEdit .subsection .sectionInner.radioSelectPair .selectField {
          display: inline-flex; }
    .overlayEdit .subsection .selectField {
      height: 31px;
      line-height: 31px; }
    .overlayEdit .subsection input {
      width: 100%;
      box-sizing: border-box; }
    .overlayEdit .subsection .checkbox + label {
      display: block;
      font: 0.86em/15px "Brandon Grot W01 Medium", "Century Gothic", sans-serif; }
      .overlayEdit .subsection .checkbox + label:before {
        content: "";
        display: inline-block;
        vertical-align: sub;
        width: 14px;
        height: 14px;
        border: solid 1px #9a9490;
        margin-right: 10px;
        transition: background-color 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
      .overlayEdit .subsection .checkbox + label:hover:before, .overlayEdit .subsection .checkbox + label:active:before {
        background-color: #d6d6d6; }
    .overlayEdit .subsection .checkbox:checked + label:before {
      background-image: url(/_images/close.svg);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100%; }
    .overlayEdit .subsection .close {
      position: absolute;
      top: 20px;
      right: 20px; }
  .overlayEdit .content {
    max-width: 525px;
    margin: 0; }
    .overlayEdit .content.center {
      text-align: center; }
      .overlayEdit .content.center .buttonRow {
        justify-content: center;
        align-items: center; }

/********* breakpoints *********/
@media (min-width: 1260px) {
  .dyoSelectProd {
    padding-top: 60px; } }

@media (max-width: 900px) {
  .overlayEdit {
    padding: 20px; }
    .overlayEdit .subsection {
      padding: 50px 20px 20px !important; } }

@media (max-width: 768px) {
  .dyoSelectProd {
    padding-top: 8%; }
  .overlayEdit .sectionInner.radioSelectPair {
    display: block !important; }
    .overlayEdit .sectionInner.radioSelectPair > * {
      display: block;
      width: auto; }
    .overlayEdit .sectionInner.radioSelectPair > .fieldText, .overlayEdit .sectionInner.radioSelectPair > .selectField {
      display: block;
      width: 100% !important;
      max-width: none; }
      .overlayEdit .sectionInner.radioSelectPair > .fieldText:nth-last-child(2), .overlayEdit .sectionInner.radioSelectPair > .selectField:nth-last-child(2) {
        margin-bottom: 20px; }
      .overlayEdit .sectionInner.radioSelectPair > .fieldText:nth-last-child(3), .overlayEdit .sectionInner.radioSelectPair > .selectField:nth-last-child(3) {
        margin-bottom: 20px; } }

@media (max-width: 640px) {
  .dyoSelectProd .slides > li > a {
    padding: 2%; } }

/********* end breakpoints *********/