html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

#ShareByEmailForm_ShareByEmailForm fieldset {
  border: none;
  padding-bottom: 0; }
#ShareByEmailForm_ShareByEmailForm .email-share-wrapper {
  margin: 17px 0; }
#ShareByEmailForm_ShareByEmailForm button.share-to-email-btn {
  margin: 0 4px; }
#ShareByEmailForm_ShareByEmailForm .middleColumn {
  margin-top: 10px;
  display: flex; }
#ShareByEmailForm_ShareByEmailForm div.share-to-email-input {
  width: 289px;
  margin: 0 auto; }
#ShareByEmailForm_ShareByEmailForm input.share-to-email-input {
  margin: 0 4px;
  width: 100%;
  text-align: center; }

.text-input {
  padding: 10px; }

.close-modal {
  position: absolute;
  right: -10px;
  top: 20px; }
  .close-modal img {
    width: 63px; }

.save-modal .close-modal {
  right: 20px; }

* {
  font-family: "Avenir Next W01";
  box-sizing: border-box;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none; }

input, input:before, input:after {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial; }

html {
  height: 100%; }

body {
  position: relative;
  min-height: 100%;
  padding-bottom: 0; }

a {
  text-decoration: none; }

section:not(.super),
header:not(.super),
footer:not(.super) {
  max-width: 100vw;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding-left: 0em;
  padding-right: 0em; }
  section:not(.super)::after,
  header:not(.super)::after,
  footer:not(.super)::after {
    clear: both;
    content: "";
    display: block; }
  section:not(.super).pinched,
  header:not(.super).pinched,
  footer:not(.super).pinched {
    max-width: 67.5rem; }
  section:not(.super).first, section:not(.super).intro,
  header:not(.super).first,
  header:not(.super).intro,
  footer:not(.super).first,
  footer:not(.super).intro {
    padding-top: 236px; }
  @media screen and (max-width: 1px) {
    section:not(.super),
    header:not(.super),
    footer:not(.super) {
      padding-left: 20px;
      padding-right: 20px; } }

@media screen and (max-width: 1px) {
  header {
    padding-left: 0px !important;
    padding-right: 0px !important; }
    header .simulator-nav-logo-wrapper {
      text-align: center !important; }
    header .simulator-toolbar .simulator-toolbar-list {
      padding: 0px 20px; }
      header .simulator-toolbar .simulator-toolbar-list li .simulator-nav-calc-btn {
        padding: 10px 15px;
        min-width: 190px !important; } }
@media screen and (max-width: 1px) {
  header.no-logo .simulator-nav-logo-wrapper {
    display: none; } }

.play-video {
  display: none; }
  @media screen and (max-width: 1094px) {
    .play-video {
      display: block;
      position: absolute;
      top: calc(50% - 36px);
      left: calc(50% - 36px);
      z-index: 999; }
      .play-video img {
        max-width: 72px; } }

.overlay-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  background-image: url("../images/loader.gif");
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1999;
  opacity: 1; }

body.loading {
  overflow-y: scroll; }

.overlay-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 1997;
  opacity: 0.8; }

.modal {
  display: none;
  position: fixed;
  top: 20%;
  left: 50%;
  width: 360px;
  margin-left: -180px;
  height: 200px;
  border: 1px solid #b3b3b3;
  z-index: 1998;
  text-align: center;
  background: white; }
  .modal p {
    color: #b3b3b3; }
  .modal a {
    color: black; }

* {
  -webkit-overflow-scrolling: touch; }

a,
img,
svg,
button,
div {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; }

.step-link {
  cursor: default;
  opacity: 0.5; }
  .step-link.enabled {
    cursor: pointer;
    opacity: 1; }

.hidden, .hidden-after-search {
  display: none; }

.simulator {
  display: none;
  box-shadow: 0 0 2px 0px #dcdcdc; }

.simulator-active {
  display: block; }

.full-page-container, .simulator {
  height: 100%;
  overflow: hidden; }
  .full-page-container.disabled .simulator-content, .simulator.disabled .simulator-content {
    pointer-events: none; }

@media screen and (max-width: 1094px) {
  .full-page-container {
    background: #f1f1f1; } }

body.SimulatorPage {
  height: 100%; }

.overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: none; }

.simulator-step-two,
.simulator-step-three,
.simulator-step-four,
.simulator-step-five,
.selfie-container {
  display: none; }
  .simulator-step-two.simulator-active,
  .simulator-step-three.simulator-active,
  .simulator-step-four.simulator-active,
  .simulator-step-five.simulator-active,
  .selfie-container.simulator-active {
    display: block; }

.simulator-view {
  display: block; }

.pattern-scroller {
  display: none; }

.tooltip-help {
  display: none;
  position: fixed;
  width: 250px;
  padding: 20px;
  background: #4ea49f;
  color: white; }
  @media screen and (max-width: 1094px) {
    .tooltip-help {
      display: none; } }
  .tooltip-help.tooltip-one {
    top: calc(0vh + 100px);
    left: 230px; }
    .tooltip-help.tooltip-one:after {
      content: " ";
      position: absolute;
      top: calc(50% - 10px);
      left: -10px;
      background: #4ea49f;
      width: 20px;
      height: 20px;
      display: block;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
@media screen and (max-width: 1094px) and (orientation: portrait) {
  .tooltip-help.tooltip-one {
    top: calc(0vh + 90px);
    right: 148px;
    left: initial; }
    .tooltip-help.tooltip-one:after {
      right: -10px;
      left: initial; } }

    @media screen and (max-width: 1px) {
      .tooltip-help.tooltip-one {
        display: none !important; } }
  .tooltip-help.tooltip-two {
    top: 28vh;
    left: calc(50vw + 10px); }
    .tooltip-help.tooltip-two:after {
      content: " ";
      position: absolute;
      top: -10px;
      left: calc(50% - 10px);
      background: #4ea49f;
      width: 20px;
      height: 20px;
      display: block;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
@media screen and (max-width: 1094px) and (orientation: portrait) {
  .tooltip-help.tooltip-two {
    top: calc(32vh);
    left: calc(50vw - 119px); } }

    @media screen and (max-width: 1px) {
      .tooltip-help.tooltip-two {
        display: none !important; } }
  .tooltip-help.tooltip-three {
    top: 75px;
    right: 54px; }
    .tooltip-help.tooltip-three:after {
      content: " ";
      position: absolute;
      top: -10px;
      left: calc(50% - 10px);
      background: #4ea49f;
      width: 20px;
      height: 20px;
      display: block;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
    @media screen and (max-width: 1px) {
      .tooltip-help.tooltip-three {
        display: none !important; } }

.tooltip-help.tooltip-hidden {
  display: none !important; }

main.simulator-content:not(.full-page-main) .tooltip-help {
  display: none !important; }

.simulator-toolbar {
  position: relative;
  height: 75px; }
  .simulator-toolbar .simulator-toolbar-list {
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    box-shadow: 0 1px 13px #CCC;
    padding: 0 2vw;
    margin: 0; }
    .simulator-toolbar .simulator-toolbar-list li {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-flex-grow: 0;
      -moz-flex-grow: 0;
      flex-grow: 0;
      -ms-flex-positive: 0;
      list-style: none;
      height: 39px; }
      .simulator-toolbar .simulator-toolbar-list li a {
        height: 39px;
        display: inline-block; }
    .simulator-toolbar .simulator-toolbar-list .simulator-nav-logo-li {
      height: 48px;
      -webkit-flex-grow: 1;
      -moz-flex-grow: 1;
      flex-grow: 1;
      -ms-flex-positive: 1; }
      .simulator-toolbar .simulator-toolbar-list .simulator-nav-logo-li .simulator-nav-logo-wrapper {
        max-width: 400px;
        height: 100%;
        padding: 0px 0;
        margin: auto;
        text-align: center;
        text-align: left;
        margin: 0px 24px; }
        @media only screen and (max-width: 1080px) {
          .simulator-toolbar .simulator-toolbar-list .simulator-nav-logo-li .simulator-nav-logo-wrapper {
            text-align: left;
            margin: 0px 24px; } }
        .simulator-toolbar .simulator-toolbar-list .simulator-nav-logo-li .simulator-nav-logo-wrapper a {
          height: 50px;
          width: 100%; }
        .simulator-toolbar .simulator-toolbar-list .simulator-nav-logo-li .simulator-nav-logo-wrapper img {
          height: 120%;
          max-width: 37vw;
          top: -8px;
          position: relative;
          min-width: 175px; }
    .simulator-toolbar .simulator-toolbar-list .simulator-nav-icon-btn {
      -webkit-flex-basis: 50px;
      -moz-flex-basis: 50px;
      flex-basis: 50px;
      -ms-flex-preferred-size: 50px;
      display: none; }
      .simulator-toolbar .simulator-toolbar-list .simulator-nav-icon-btn img {
        max-width: 32px;
        position: relative;
        vertical-align: middle;
        display: inline-block;
        top: 5px; }
      .simulator-toolbar .simulator-toolbar-list .simulator-nav-icon-btn.fullscreen {
        text-align: right;
        display: block; }
        @media screen and (max-width: 1094px) {
          .simulator-toolbar .simulator-toolbar-list .simulator-nav-icon-btn.fullscreen {
            display: none !important; } }
    .simulator-toolbar .simulator-toolbar-list .simulator-nav-calc-btn {
      min-width: 200px;
      display: none;
      margin: 0px;
      position: relative; }

.simulator-btn {
  border: none;
  font-family: "Avenir Next W01";
  background-color: #57a9a3;
  font-size: 17px;
  text-transform: uppercase;
  padding: 10px 20px;
  margin: 1vh 0;
  color: #FFF;
  position: relative; }
  .simulator-btn:hover {
    background-color: #63b7b1; }

.simulator-content {
  background-color: #f1f1f1;
  height: 92vh;
  box-sizing: border-box; }
  @media screen and (max-width: 1094px) {
    .simulator-content {
      height: calc(100% - 72px);
      padding: 10px; } }
  @media screen and (max-width: 1px) {
    .simulator-content .save-modal {
      width: calc(100% - 20px);
      height: calc(100vh - 20px);
      margin-top: 10px;
      margin-left: 10px;
      top: 0px; }
      .simulator-content .save-modal .close-modal {
        right: 13px;
        top: 15px; }
        .simulator-content .save-modal .close-modal a img {
          width: 45px; } }
  .simulator-content .calculate-modal input:focus {
    outline-width: 0; }
  @media screen and (max-width: 1px) {
    .simulator-content .calculate-modal {
      padding: 0px; }
      .simulator-content .calculate-modal .calculate-needs {
        padding: 30px;
        margin: 0px; }
        .simulator-content .calculate-modal .calculate-needs form .close-modal {
          right: 13px;
          top: 15px; }
          .simulator-content .calculate-modal .calculate-needs form .close-modal a img {
            width: 45px; }
        .simulator-content .calculate-modal .calculate-needs form .step-title {
          margin: 0px;
          padding: 0px; }
          .simulator-content .calculate-modal .calculate-needs form .step-title h2 {
            margin: 30px 0px 0px 0px; }
        .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .pattern-info .modal-subtitle-grey {
          width: 100% !important;
          padding: 5px 7px !important;
          text-transform: initial !important;
          margin-bottom: 16px; }
        .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .pattern-info .modal-design-table {
          margin-bottom: 4px; }
        .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content {
          padding: 0px; }
          .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .modal-subtitle {
            font-size: 20px !important;
            font-weight: 500 !important;
            padding: 5px 7px;
            margin-bottom: 14px; }
          .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .modal-sub-subtitle {
            font-size: 17px;
            padding: 5px 7px;
            margin-top: 6px;
            margin-bottom: 24px; }
          .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper,
          .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper.shorter {
            position: relative; }
            .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper label,
            .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper .calculator-stat-label,
            .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper.shorter label,
            .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper.shorter .calculator-stat-label {
              width: 45% !important; }
            .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper input,
            .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper .calculator-stat-input,
            .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper.shorter input,
            .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .input-wrapper.shorter .calculator-stat-input {
              position: absolute;
              bottom: 0px;
              top: 0px;
              width: 50% !important; }
          .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .your-patterns .selected-item-section ul {
            margin-bottom: 0px; }
            .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .your-patterns .selected-item-section ul li .modal-pattern-wrapper .activate-pattern svg {
              left: 3px;
              width: calc(100% - 6px);
              position: absolute; }
          .simulator-content .calculate-modal .calculate-needs form .tile-calculator .tile-calculator-inner .calculator-content .calculator-dimensions .pattern-dimension-inputs .inputs .calculator-stat-input {
            border: 0px !important; }
        .simulator-content .calculate-modal .calculate-needs form .calculate-modal-footer {
          display: block;
          float: left;
          margin: 0px; }
          .simulator-content .calculate-modal .calculate-needs form .calculate-modal-footer .calculate-modal-disclaimer {
            width: 100%;
            display: block;
            text-align: center; }
          .simulator-content .calculate-modal .calculate-needs form .calculate-modal-footer .calculate-modal-btns {
            display: block;
            width: 100%;
            margin-top: 70px; }
            .simulator-content .calculate-modal .calculate-needs form .calculate-modal-footer .calculate-modal-btns button {
              margin: 0px;
              width: 100%; } }
  .simulator-content .simulator {
    width: 90vw;
    text-align: center; }
    @media screen and (max-width: 1094px) {
      .simulator-content .simulator {
        width: 100%; } }
    @media screen and (max-width: 1px) {
      .simulator-content .simulator.simulator-step-one {
        padding-bottom: 61px; }
        .simulator-content .simulator.simulator-step-one .simulator-nav-btn {
          margin-top: 13px; }
        .simulator-content .simulator.simulator-step-one .simulator-box .shape-selector {
          padding: 10px 10px !important;
          top: initial !important; }
          .simulator-content .simulator.simulator-step-one .simulator-box .shape-selector .selectable-shape {
            margin: 20px 0px !important;
            cursor: pointer; }
      .simulator-content .simulator.simulator-step-two {
        padding-bottom: 61px; }
        .simulator-content .simulator.simulator-step-two .simulator-nav-btn {
          margin-top: 13px; }
        .simulator-content .simulator.simulator-step-two .simulator-box {
          margin-top: 30px; }
          .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes {
            height: auto;
            padding-top: 30px; }
            .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .meta-lables {
              position: initial; }
              .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .meta-lables .first-row {
                top: 135px;
                height: 40px;
                position: absolute;
                left: 0px;
                right: 0px;
                text-align: center; }
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .meta-lables .first-row h2 {
                  font-size: 22px !important; }
              .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .meta-lables p {
                display: none; }
            .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container {
              width: 100%;
              top: 200px;
              padding: 0px; }
              .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column {
                width: 100%; }
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row {
                  height: auto; }
                  .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row a {
                    margin: auto; }
                    .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row a .size-img-wrapper svg {
                      position: relative;
                      bottom: initial; }
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column p {
                  display: block;
                  margin-bottom: 30px;
                  margin-top: 0px; }
                  .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column p:after {
                    content: " cm";
                    display: inline; }
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column p:nth-child(3),
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column p:nth-child(4),
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column p:nth-child(5),
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column p:nth-child(6),
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column p:nth-child(7) {
                  display: none; }
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(1) .first-row .select-size {
                  width: 120px; }
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(2) .first-row .select-size {
                  width: 100px; }
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(3) .first-row .select-size {
                  width: 80px; }
                .simulator-content .simulator.simulator-step-two .simulator-box .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(4) .first-row .select-size {
                  width: 60px; }
      .simulator-content .simulator.simulator-step-three {
        padding-bottom: 61px; }
        .simulator-content .simulator.simulator-step-three .simulator-nav-btn {
          margin-top: 13px; }
        .simulator-content .simulator.simulator-step-three .step-title {
          text-align: center; }
          .simulator-content .simulator.simulator-step-three .step-title form {
            display: none; }
        .simulator-content .simulator.simulator-step-three .simulator-box .simulator-selection-wrapper {
          display: block !important; }
          .simulator-content .simulator.simulator-step-three .simulator-box .simulator-selection-wrapper .current-choice-large {
            width: 100%; }
            .simulator-content .simulator.simulator-step-three .simulator-box .simulator-selection-wrapper .current-choice-large .current-pattern-placeholder {
              width: 100px;
              height: 100px;
              margin: auto; }
            .simulator-content .simulator.simulator-step-three .simulator-box .simulator-selection-wrapper .current-choice-large svg {
              margin: auto;
              height: 100px;
              width: 100px; }
            .simulator-content .simulator.simulator-step-three .simulator-box .simulator-selection-wrapper .current-choice-large h3 {
              display: block;
              width: 100%;
              font-size: 22px;
              font-weight: 200;
              margin-bottom: 0; }
          .simulator-content .simulator.simulator-step-three .simulator-box .simulator-selection-wrapper .pattern-scroller {
            width: 100%;
            padding: 15px;
            padding-top: 5px;
            height: 150px; }
            .simulator-content .simulator.simulator-step-three .simulator-box .simulator-selection-wrapper .pattern-scroller ul li {
              width: 33.333%; }
      .simulator-content .simulator.simulator-step-four {
        padding-bottom: 61px; }
        .simulator-content .simulator.simulator-step-four .simulator-nav-btn {
          margin-top: 13px; }
        .simulator-content .simulator.simulator-step-four .step-title {
          padding: 0px; }
          .simulator-content .simulator.simulator-step-four .step-title h2 {
            font-size: 28px; }
        .simulator-content .simulator.simulator-step-four .simulator-box .simulator-patterns {
          padding: 0px;
          display: block;
          position: relative; }
          .simulator-content .simulator.simulator-step-four .simulator-box .simulator-patterns .current-choice-large {
            width: 100%;
            padding: 20px;
            margin-bottom: 0px; }
            .simulator-content .simulator.simulator-step-four .simulator-box .simulator-patterns .current-choice-large svg {
              margin: auto;
              height: 100px;
              width: 100px; }
            .simulator-content .simulator.simulator-step-four .simulator-box .simulator-patterns .current-choice-large h3 {
              display: block;
              width: 100%;
              margin-bottom: 0px;
              font-size: 22px;
              font-weight: 200; }
          .simulator-content .simulator.simulator-step-four .simulator-box .simulator-patterns .color-palette {
            width: 100%;
            padding: 15px;
            padding-top: 5px; }
            .simulator-content .simulator.simulator-step-four .simulator-box .simulator-patterns .color-palette .all-colours {
              height: 96px; }
              .simulator-content .simulator.simulator-step-four .simulator-box .simulator-patterns .color-palette .all-colours .pick-colour {
                width: 11.3vw !important;
                height: 11.3vw !important; }
      .simulator-content .simulator.simulator-step-four .simulator-box .simulator-selection-wrapper .current-choice-large {
        padding-bottom: 0;
        margin-bottom: 0; }
        .simulator-content .simulator.simulator-step-four .simulator-box .simulator-selection-wrapper .current-choice-large h3 {
          margin: 30px 0 10px 0; }
      .simulator-content .simulator.simulator-step-four .simulator-box .simulator-selection-wrapper .selected-colors {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 48%; }
        .simulator-content .simulator.simulator-step-four .simulator-box .simulator-selection-wrapper .selected-colors ul {
          margin-right: 5px; }
          .simulator-content .simulator.simulator-step-four .simulator-box .simulator-selection-wrapper .selected-colors ul li {
            height: 20px;
            font-size: 14px;
            padding-top: 0;
            line-height: 19px;
            margin-right: 0; }
            .simulator-content .simulator.simulator-step-four .simulator-box .simulator-selection-wrapper .selected-colors ul li span.placement {
              height: 20px;
              width: 22px;
              font-size: 14px;
              margin-right: 5px;
              -webkit-box-flex: 0;
              -moz-box-flex: 0;
              box-flex: 0;
              -webkit-flex: 0 0 22px;
              -moz-flex: 0 0 22px;
              -ms-flex: 0 0 22px;
              flex: 0 0 22px; }
            .simulator-content .simulator.simulator-step-four .simulator-box .simulator-selection-wrapper .selected-colors ul li span.colour {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              padding-top: 1px; }
      .simulator-content .simulator.simulator-step-four .simulator-box .simulator-patterns .current-choice-large svg {
        margin: initial; }
      .simulator-content .simulator.simulator-step-five .your-patterns {
        height: 100px; }
        .simulator-content .simulator.simulator-step-five .your-patterns .selected-item-section .add-pattern {
          height: 40px;
          width: 40px;
          background-size: 25px; }
        .simulator-content .simulator.simulator-step-five .your-patterns .selected-item-section ul {
          height: 52px;
          padding-top: 6px;
          padding-left: 6px; }
          .simulator-content .simulator.simulator-step-five .your-patterns .selected-item-section ul li {
            height: 100%;
            margin: 5px 2px;
            width: 22%;
            padding: 2px; }
            .simulator-content .simulator.simulator-step-five .your-patterns .selected-item-section ul li .tile-overlay-btns {
              left: 0;
              top: 0; }
              .simulator-content .simulator.simulator-step-five .your-patterns .selected-item-section ul li .tile-overlay-btns button {
                width: 50%;
                height: 50%;
                float: left; }
                .simulator-content .simulator.simulator-step-five .your-patterns .selected-item-section ul li .tile-overlay-btns button img {
                  width: 100%;
                  height: 100%; }
      .simulator-content .simulator.simulator-step-five .layout-editor {
        margin-top: 82px;
        overflow-y: overlay; }
        .simulator-content .simulator.simulator-step-five .layout-editor .pattern-tool-editor .layout-section-wrapper {
          padding: 20px; }
          .simulator-content .simulator.simulator-step-five .layout-editor .pattern-tool-editor .layout-section-wrapper .layout-section {
            padding: 0px;
            width: 100%;
            height: 100%; } }

section.logo {
  text-align: center; }
  section.logo .main-logo {
    padding: 17px; }
    section.logo .main-logo img {
      width: 23.4375vw; }
  section.logo .simulator-logo {
    margin-top: 0px; }
    section.logo .simulator-logo img {
      width: 100%; }
  @media only screen and (max-width: 768px) {
    section.logo {
      overflow: hidden; }
      section.logo .main-logo {
        padding: 17px; }
        section.logo .main-logo img {
          width: 180px; }
      section.logo .simulator-logo {
        position: relative;
        float: right;
        right: 50%; }
        section.logo .simulator-logo img {
          position: relative;
          width: 751px;
          right: -50%; } }

.simulator .simulator-back-btn, .calculate-modal .simulator-back-btn {
  background-color: #f2f2f2;
  color: #616161;
  margin-right: 11px; }

section.simulator-step-five .your-patterns .selected-item-section ul li.selected.single-svg-user-color {
  border: none !important; }

.selected-single-svg-user-colors .single-svg-user-color-placeholder {
  display: none !important; }
.selected-single-svg-user-colors button {
  width: 100%;
  height: 100%;
  display: block !important;
  background: #9d9d9c;
  border: none; }

.simulator .step-title {
  display: block;
  overflow: auto;
  position: relative; }
  .simulator .step-title form {
    position: absolute;
    right: 30px;
    top: 30px; }
    @media screen and (max-width: 1094px) {
      .simulator .step-title form {
        top: 10px; } }
    .simulator .step-title form input[type=text] {
      margin-left: 30px;
      right: 0px;
      height: 35px;
      padding: 8px;
      background: #f1f1f1;
      border: 0px;
      position: absolute;
      color: #4a4a4a;
      width: 240px; }
    .simulator .step-title form input[type=submit] {
      left: -285px;
      width: 45px;
      top: -5px;
      height: 45px;
      position: absolute;
      border: 0px;
      background: transparent;
      background-image: url("../images/icon-magnafyingglass.png");
      background-repeat: no-repeat;
      background-size: 24px;
      background-position: center center;
      color: transparent;
      overflow: hidden; }
    .simulator .step-title form::-webkit-input-placeholder {
      color: red; }
    .simulator .step-title form:-moz-placeholder {
      color: red; }
    .simulator .step-title form::-moz-placeholder {
      color: red; }
    .simulator .step-title form:-ms-input-placeholder {
      color: red; }
.simulator h2 {
  font-size: 28px;
  letter-spacing: 1px;
  margin: 3.5vh 0 2.5vh  0;
  font-weight: 100;
  color: #b3b3b3;
  text-transform: uppercase; }
  @media screen and (max-width: 1094px) {
    .simulator h2 {
      margin-top: 10px;
      margin-bottom: 10px; } }
  .simulator h2 span {
    font-size: 5.5vw;
    margin-bottom: 30px;
    display: block; }
.simulator h3 {
  font-size: 24px;
  color: #b3b3b3;
  text-transform: uppercase;
  font-weight: 500; }
  .simulator h3 span {
    text-transform: lowercase !important; }
@media screen and (max-width: 1094px) {
  .simulator .simulator-box {
    height: 78%; } }

@media all and (min-width:0px) and (max-width: 568px) {
  .simulator .simulator-box {
    height: 67%; }
}
.simulator .shape-selector {
  display: table;
  margin: auto;
  margin: auto;
  padding: 6vh 10px;
  position: relative;
  top: calc(50% - 150px); }
  .simulator .shape-selector .shape {
    float: left;
    margin-bottom: 1vh;
    cursor: pointer;
    height: 150px;
    padding: 0px 20px; }
    .simulator .shape-selector .shape[data-shape-name="square"], .simulator .shape-selector .shape[data-shape-name="hexagonal"] {
      padding: 24px 20px; }
    .simulator .shape-selector .shape[data-shape-name="diamond"], .simulator .shape-selector .shape[data-shape-name="pentagon"] {
      padding: 8px 20px; }
    .simulator .shape-selector .shape:hover rect,
    .simulator .shape-selector .shape:hover polygon {
      fill: #7c7c7c; }
    .simulator .shape-selector .shape svg {
      width: auto;
      height: 100%; }
    .simulator .shape-selector .shape.selected-shape svg rect,
    .simulator .shape-selector .shape.selected-shape svg polygon {
      fill: #57a9a3; }
  .simulator .shape-selector .shape:not([data-shape-name="splinter"]) svg rect,
  .simulator .shape-selector .shape:not([data-shape-name="splinter"]) svg polygon {
    fill: #cccccc; }
  .simulator .shape-selector .shape:not([data-shape-name="splinter"]):hover rect,
  .simulator .shape-selector .shape:not([data-shape-name="splinter"]):hover polygon {
    fill: #7c7c7c; }
  .simulator .shape-selector .shape:not([data-shape-name="splinter"]).selected-shape svg rect,
  .simulator .shape-selector .shape:not([data-shape-name="splinter"]).selected-shape svg polygon {
    fill: #57a9a3; }
.simulator .simulator-btn-disabled {
  background-color: #CCC;
  color: #9e9e9e; }
  .simulator .simulator-btn-disabled:hover {
    background-color: #CCC;
    color: #9e9e9e; }
.simulator .simulator-btn-hidden {
  display: none; }
.simulator .sizes {
  display: none; }
.simulator .selected-shape-sizes {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  height: 100%;
  overflow-x: hidden; }
  .simulator .selected-shape-sizes .select-size-wrapper {
    margin: 20px 20px;
    width: 100%; }
    @media screen and (max-width: 1094px) {
      .simulator .selected-shape-sizes .select-size-wrapper {
        margin: 0; } }
    .simulator .selected-shape-sizes .select-size-wrapper .meta-lables {
      float: left;
      width: 20%;
      text-align: left;
      border-right: 1px solid #dcdcdc;
      padding: 20px 0px;
      padding-top: 0; }
      .simulator .selected-shape-sizes .select-size-wrapper .meta-lables::after {
        clear: both;
        content: "";
        display: block; }
      @media screen and (max-width: 1094px) {
        .simulator .selected-shape-sizes .select-size-wrapper .meta-lables {
          padding: 0; } }
      .simulator .selected-shape-sizes .select-size-wrapper .meta-lables h2 {
        padding-right: 0;
        padding-top: 0px;
        margin-top: 0;
        overflow: hidden; }
      .simulator .selected-shape-sizes .select-size-wrapper .meta-lables p {
        color: #4a4a4a; }
    .simulator .selected-shape-sizes .select-size-wrapper .sizes-container {
      width: 80%;
      float: left;
      padding: 0px 20px; }
      .simulator .selected-shape-sizes .select-size-wrapper .sizes-container::after {
        clear: both;
        content: "";
        display: block; }
      .simulator .selected-shape-sizes .select-size-wrapper .sizes-container p {
        color: #4a4a4a; }
      .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column {
        width: 25%;
        float: left;
        text-align: center;
        border-right: 0px solid #dcdcdc;
        padding: 20px 0px; }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column::after {
          clear: both;
          content: "";
          display: block; }
        @media screen and (max-width: 1094px) {
          .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column {
            padding: 0; } }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(1) {
          width: 32%; }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(2) {
          width: 30%; }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(3) {
          width: 20%; }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(4) {
          width: 18%; }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row {
          position: relative; }
          .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape {
            cursor: pointer; }
            .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape:hover rect, .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape:hover polygon {
              fill: #7c7c7c; }
            .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape svg {
              position: absolute;
              bottom: 0px;
              padding: 0px 0px 10px 0px;
              max-height: 200px; }
              .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape svg rect,
              .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape svg polygon {
                fill: #cccccc; }
            .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape.selected-shape svg rect,
            .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape.selected-shape svg polygon {
              fill: #57a9a3; }
              .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape.selected-shape svg rect:hover,
              .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .first-row .selectable-shape.selected-shape svg polygon:hover {
                fill: #57a9a3; }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(1) .first-row svg {
          width: 200px;
          height: 200px;
          left: calc(50% - 100px); }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(2) .first-row svg {
          width: 150px;
          height: 150px;
          left: calc(50% - 75px); }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(3) .first-row svg {
          width: 100px;
          height: 100px;
          left: calc(50% - 50px); }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:nth-child(4) .first-row svg {
          width: 50px;
          height: 50px;
          left: calc(50% - 25px); }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column:last-child {
          border-right: 0px; }
        .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .size-column .button-block {
          width: 100%;
          display: block; }
    .simulator .selected-shape-sizes .select-size-wrapper .meta-lables p,
    .simulator .selected-shape-sizes .select-size-wrapper .sizes-container p {
      display: block;
      width: 100%; }
    .simulator .selected-shape-sizes .select-size-wrapper .meta-lables .first-row,
    .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .first-row {
      height: 200px;
      display: block; }
      .simulator .selected-shape-sizes .select-size-wrapper .meta-lables .first-row h2,
      .simulator .selected-shape-sizes .select-size-wrapper .sizes-container .first-row h2 {
        line-height: 1; }

.next-step {
  color: #b3b3b3; }

.debug {
  display: none; }

section.simulator-intro {
  position: relative;
  text-align: center;
  max-width: 1170px;
  margin: auto; }
  section.simulator-intro h1 {
    margin: 115px auto;
    font-weight: 100;
    font-size: 4.42708vw;
    line-height: 48px;
    z-index: 1;
    background: transparent;
    color: #b3b3b3; }
    section.simulator-intro h1 a {
      position: relative;
      display: inline-block;
      margin-bottom: -20px;
      padding: 0 20px;
      background: #fff;
      z-index: 2;
      text-transform: uppercase;
      color: #b3b3b3;
      line-height: 48px; }
    section.simulator-intro h1:after {
      display: block;
      position: absolute;
      margin-top: -25px;
      content: "";
      height: 1px;
      width: 100%;
      background: #b3b3b3;
      z-index: 1; }
  @media only screen and (max-width: 768px) {
    section.simulator-intro .title-line h1 {
      margin: 75px auto;
      font-size: 32px; } }

section.simulator-nav {
  overflow-x: hidden;
  height: 100px;
  text-align: center;
  width: 100%; }
  section.simulator-nav.sticky {
    position: fixed;
    bottom: 0;
    z-index: 1101; }
  section.simulator-nav ul {
    width: 100%;
    list-style: none;
    margin: 0 auto;
    padding: 0 10%;
    color: #fff; }
    section.simulator-nav ul::after {
      clear: both;
      content: "";
      display: block; }
    section.simulator-nav ul li {
      float: left;
      width: 20%;
      height: 100px;
      font-family: "Avenir Next W01";
      font-weight: 500;
      text-align: center;
      font-size: 11px;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -ms-flex-align: center;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -ms-flex-pack: center; }
      section.simulator-nav ul li.active {
        background: white; }
        section.simulator-nav ul li.active a {
          color: #4ea49f; }
      section.simulator-nav ul li a {
        color: white; }
        section.simulator-nav ul li a span {
          display: inline-block;
          width: 100%;
          font-size: 1.95313vw;
          font-weight: 500;
          margin-bottom: 0.78125vw; }
  section.simulator-nav.nav-intro {
    background: #4ea49f; }
    section.simulator-nav.nav-intro ul {
      background: #4ea49f; }
  @media only screen and (max-width: 768px) {
    section.simulator-nav ul {
      padding: 0 5%; }
      section.simulator-nav ul li a {
        font-size: 14px; }
        section.simulator-nav ul li a span {
          font-size: 24px; } }

section.simulator-step-one .simulator-box {
  overflow-y: overlay; }
  @media only screen and (max-width: 768px) {
    section.simulator-step-one .simulator-box .shape-selector {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-lines: multiple;
      -moz-box-lines: multiple;
      box-lines: multiple;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -ms-flex-pack: center; } }

@media screen and (orientation: landscape) {
  section.simulator-step-two .simulator-box {
    overflow-x: auto; }
    section.simulator-step-two .simulator-box .sizes .select-size-wrapper {
      padding: 20px 60px; } }
    @media screen and (orientation: landscape) and (max-width: 1094px) {
      section.simulator-step-two .simulator-box .sizes .select-size-wrapper {
        padding: 10px; } }
@media screen and (orientation: landscape) {
    section.simulator-step-two .simulator-box .sizes .select-size-wrapper:not(:last-child) {
      border-right: 1px solid #dcdcdc; } }
@media screen and (orientation: portrait) {
  section.simulator-step-two .simulator-box {
    overflow-y: scroll; }
    section.simulator-step-two .simulator-box .sizes {
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column; }
      section.simulator-step-two .simulator-box .sizes .select-size-wrapper {
        margin: 0; }
        section.simulator-step-two .simulator-box .sizes .select-size-wrapper .meta-lables {
          width: 30%;
          padding: 0 10px; }
        section.simulator-step-two .simulator-box .sizes .select-size-wrapper .sizes-container {
          width: 70%; }
      section.simulator-step-two .simulator-box .sizes .select-size-wrapper:not(:last-child) {
        border-bottom: 1px solid #dcdcdc;
        padding: 30px 0; } }

section.simulator .tiled-choice-options {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0; }
section.simulator .simulator-selection-wrapper {
  padding: 3.5vh 0;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }
@media screen and (orientation: portrait) {
  section.simulator .simulator-box {
    overflow-y: scroll;
    overflow-y: overlay; }
  section.simulator .current-choice-large {
    margin-bottom: 3vh; }
  section.simulator .tiled-choice-options {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column; } }
section.simulator .simulator-box {
  overflow-y: overlay; }
section.simulator .tiled-choice-options {
  -webkit-flex-basis: 60vw;
  -moz-flex-basis: 60vw;
  flex-basis: 60vw;
  -ms-flex-preferred-size: 60vw;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column; }
section.simulator .current-choice-large {
  border-radius: 4px;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: top;
  -moz-box-pack: top;
  box-pack: top;
  -webkit-justify-content: top;
  -moz-justify-content: top;
  -ms-justify-content: top;
  -o-justify-content: top;
  justify-content: top;
  -ms-flex-pack: top;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  flex-flow: column;
  width: 20vw;
  padding: 0 20px; }
  section.simulator .current-choice-large svg {
    width: 20vw;
    height: 20vw; }
  section.simulator .current-choice-large h3 {
    width: 20vw; }
@media only screen and (max-width: 1024px) {
  section.simulator div.selected-shape-sizes div.select-size-wrapper div.sizes-container div.size-column:nth-child(1) div.first-row svg {
    height: initial;
    left: initial; }
  section.simulator div.selected-shape-sizes div.select-size-wrapper div.sizes-container div.first-row svg {
    max-width: 90%;
    left: 0 !important;
    height: auto !important;
    right: 0;
    margin-left: auto;
    margin-right: auto; } }

.select-pattern-li.pattern-size-9.pattern-size-10.pattern-size-11 svg {
  padding: 0px;
  width: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.select-pattern-li svg {
  max-height: 8.8vw;
  max-width: 9vw; }

section.simulator-step-three {
  width: 80vw;
  text-align: center; }
  section.simulator-step-three .current-pattern-placeholder {
    margin: 0 0;
    padding: 9px;
    border: 1px solid #ccc;
    width: 20vw;
    height: 20vw; }
    section.simulator-step-three .current-pattern-placeholder .current-pattern-placeholder-inner {
      background-color: #f2f2f2;
      width: 100%;
      height: 100%; }
  section.simulator-step-three .selected-item-section {
    float: left;
    width: 48vw; }
    section.simulator-step-three .selected-item-section ul {
      padding: 0px;
      height: 80px;
      margin: 0px; }
      section.simulator-step-three .selected-item-section ul li {
        list-style: none;
        float: left;
        width: 9.6vw;
        height: 9.6vw;
        line-height: 80px;
        background: #f1f1f1;
        border-right: 3px solid white;
        border-bottom: 3px solid white; }
        section.simulator-step-three .selected-item-section ul li img {
          width: 50px;
          height: 50px; }
        section.simulator-step-three .selected-item-section ul li:hover, section.simulator-step-three .selected-item-section ul li.selected {
          opacity: 0.5; }
        section.simulator-step-three .selected-item-section ul li.remove-pattern svg {
          margin-top: 0px; }
  section.simulator-step-three .selected-title {
    float: left;
    width: 32vw;
    padding-left: 3px; }
    section.simulator-step-three .selected-title input[type=text] {
      width: 100%;
      height: 50px;
      background: #FFF;
      line-height: 50px;
      margin-bottom: 9px;
      font-size: 1.3vw;
      color: #b3b3b3;
      padding: 0px 20px 0px 60px;
      border: 1px solid #f1f1f1;
      background-image: url("../images/icon-magnafyingglass.png");
      background-repeat: no-repeat;
      background-size: 40px;
      background-position: left 10px center; }
    section.simulator-step-three .selected-title p {
      text-align: left;
      font-size: 1.3vw;
      margin: 0px;
      font-family: "Avenir Next W01";
      color: #b3b3b3; }
  section.simulator-step-three .pattern-scroller ul {
    height: 49.9vh;
    overflow: auto;
    margin: 0px;
    padding: 0px 0px 30px 0px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: flex-start;
    -moz-align-content: flex-start;
    align-content: flex-start;
    -ms-flex-line-pack: start; }
    section.simulator-step-three .pattern-scroller ul::-webkit-scrollbar {
      width: 16px;
      margin-right: 4px; }
    section.simulator-step-three .pattern-scroller ul::-webkit-scrollbar-track {
      background: #f1f1f1; }
    section.simulator-step-three .pattern-scroller ul::-webkit-scrollbar-thumb {
      background: #57a9a3; }
    section.simulator-step-three .pattern-scroller ul li {
      list-style: none;
      width: 9vw;
      height: 9vw;
      line-height: 50px; }
      section.simulator-step-three .pattern-scroller ul li .select-pattern {
        border: 1px solid #f1f1f1;
        opacity: 1;
        padding: 0;
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        line-height: 0; }
        section.simulator-step-three .pattern-scroller ul li .select-pattern:hover {
          opacity: 1; }
      section.simulator-step-three .pattern-scroller ul li .selected-pattern {
        opacity: 1;
        border: 1px solid #57a9a3;
        outline: 1px solid #57a9a3; }
      section.simulator-step-three .pattern-scroller ul li img {
        width: 75px;
        height: 75px; }
      section.simulator-step-three .pattern-scroller ul li:hover img, section.simulator-step-three .pattern-scroller ul li.selected img {
        outline: 1px solid #000; }
    section.simulator-step-three .pattern-scroller ul .list-spacer {
      content: "";
      width: 100%;
      height: 30px; }
  @media only screen and (max-width: 768px) {
    section.simulator-step-three {
      width: 100%; }
      section.simulator-step-three .step-title h2 {
        font-size: 28px; }
        section.simulator-step-three .step-title h2 span {
          font-size: 48px;
          margin-bottom: 0px; }
      section.simulator-step-three .simulator-patterns {
        float: left;
        width: 100%;
        height: 100%; }
        section.simulator-step-three .simulator-patterns .selected-item-section {
          width: 100%; }
          section.simulator-step-three .simulator-patterns .selected-item-section ul {
            height: 100%;
            margin-bottom: 15px;
            float: left;
            width: 100%; }
            section.simulator-step-three .simulator-patterns .selected-item-section ul li {
              width: 20%;
              padding-top: 19%;
              position: relative; }
              section.simulator-step-three .simulator-patterns .selected-item-section ul li a {
                display: block; }
              section.simulator-step-three .simulator-patterns .selected-item-section ul li svg {
                position: absolute;
                top: 0px;
                left: 0px;
                height: 100%;
                width: 100%;
                margin-top: 0px; }
        section.simulator-step-three .simulator-patterns .selected-title {
          width: 100%;
          padding-left: 0px; }
          section.simulator-step-three .simulator-patterns .selected-title p {
            font-size: 12px; }
          section.simulator-step-three .simulator-patterns .selected-title input[type=text] {
            font-size: 18px; }
        section.simulator-step-three .simulator-patterns .pattern-scroller {
          height: 100%;
          float: left; }
          section.simulator-step-three .simulator-patterns .pattern-scroller ul {
            height: 100%;
            margin-bottom: 15px;
            float: left;
            width: 100%; }
            section.simulator-step-three .simulator-patterns .pattern-scroller ul li {
              position: relative;
              width: auto;
              height: 20%;
              width: 20%;
              border: 1px solid white;
              border-top: 0;
              border-left: 0; }
              section.simulator-step-three .simulator-patterns .pattern-scroller ul li a {
                display: block; }
              section.simulator-step-three .simulator-patterns .pattern-scroller ul li svg {
                position: absolute;
                top: 0px;
                left: 0px;
                margin-top: 0px;
                width: 100%;
                height: auto;
                max-height: 100%;
                max-width: initial; } }

main.full-page-main {
  margin: 0;
  padding: 0; }
  main.full-page-main section.simulator-step-five {
    max-height: initial;
    width: 100%;
    margin: 0;
    background: #FFF;
    padding: 0; }
    main.full-page-main section.simulator-step-five .simulator {
      height: 87vh; }

.select-size-wrapper:nth-child(1) .select-size {
  display: block;
  width: 100px; }

.select-size-wrapper:nth-child(2) .select-size {
  display: block;
  width: 160px; }

.select-size-wrapper:nth-child(3) .select-size {
  display: block;
  width: 250px; }

.select-size-wrapper:nth-child(4) .select-size {
  display: block;
  width: 340px; }

.size-tile-image {
  width: 100%; }

section.simulator-step-four .simulator-box {
  overflow-y: hidden; }

section.simulator-step-four {
  width: 80vw;
  text-align: center; }
  section.simulator-step-four .selected-item-section ul {
    padding: 0px;
    height: 11.2vw;
    margin: 0px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    section.simulator-step-four .selected-item-section ul li {
      list-style: none;
      width: 4vw;
      height: 4vw;
      background: #f1f1f1;
      line-height: 80px;
      border-right: 3px solid white;
      border-bottom: 3px solid white; }
      section.simulator-step-four .selected-item-section ul li img {
        width: 11.2vw;
        height: 11.2vw; }
      section.simulator-step-four .selected-item-section ul li:hover, section.simulator-step-four .selected-item-section ul li.selected {
        opacity: 0.5; }
  section.simulator-step-four .selected-title h3 {
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 2.5vw;
    font-weight: 100; }
  section.simulator-step-four .color-palette-title {
    text-align: center; }
    section.simulator-step-four .color-palette-title h3 {
      padding: 0px 40px;
      margin: auto;
      margin-top: 40px;
      margin-bottom: 40px;
      font-size: 2.5vw;
      font-weight: 100;
      border-left: 1px solid #b3b3b3;
      border-right: 1px solid #b3b3b3;
      max-width: 500px; }
  section.simulator-step-four .color-palette {
    width: 60vw; }
    section.simulator-step-four .color-palette .all-colours {
      padding: 0px;
      margin: 0px;
      height: 39vh;
      overflow: auto; }
      section.simulator-step-four .color-palette .all-colours li {
        list-style: none;
        float: left;
        margin: 0px 3px 3px 0px;
        width: 7vw;
        height: 7vw; }
        section.simulator-step-four .color-palette .all-colours li img {
          width: 100%; }
        section.simulator-step-four .color-palette .all-colours li.selected img {
          border: 3px solid #000; }
        section.simulator-step-four .color-palette .all-colours li:hover img {
          border: 3px solid #000; }
      section.simulator-step-four .color-palette .all-colours::-webkit-scrollbar {
        width: 16px;
        margin-right: 4px; }
      section.simulator-step-four .color-palette .all-colours::-webkit-scrollbar-track {
        background: #f1f1f1; }
      section.simulator-step-four .color-palette .all-colours::-webkit-scrollbar-thumb {
        background: #57a9a3; }
  section.simulator-step-four .tile-preview {
    float: left;
    width: 20vw;
    height: 20vw;
    background: #f1f1f1; }
  section.simulator-step-four .selected-colors {
    padding-left: 0px;
    margin-top: 10px; }
    section.simulator-step-four .selected-colors h3 {
      font-size: 2.5vw;
      font-weight: 100;
      margin-bottom: 20px; }
    section.simulator-step-four .selected-colors ul {
      padding: 0px;
      margin: 0px;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-lines: multiple;
      -moz-box-lines: multiple;
      box-lines: multiple;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      section.simulator-step-four .selected-colors ul li {
        list-style: none;
        width: 100%;
        height: 30px;
        margin: 1px 5px 1px 0;
        background: #f1f1f1;
        text-align: left;
        font-size: 20px;
        line-height: 30px;
        text-transform: lowercase;
        color: #b3b3b3;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        box-flex: 0;
        -webkit-flex: 0;
        -moz-flex: 0;
        -ms-flex: 0;
        flex: 0;
        -webkit-flex-basis: 283px;
        -moz-flex-basis: 283px;
        flex-basis: 283px;
        -ms-flex-preferred-size: 283px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex; }
        section.simulator-step-four .selected-colors ul li span.placement {
          color: #fff;
          background: #b3b3b3;
          height: 30px;
          width: 35px;
          font-size: 20px;
          text-align: center;
          text-transform: uppercase;
          margin-right: 10px;
          -webkit-flex-basis: 35px;
          -moz-flex-basis: 35px;
          flex-basis: 35px;
          -ms-flex-preferred-size: 35px; }
    @media screen and (max-width: 1px) {
      section.simulator-step-four .selected-colors {
        display: none; } }
  @media only screen and (max-width: 768px) {
    section.simulator-step-four {
      width: 100%; }
      section.simulator-step-four .step-title {
        padding: 30px 5px 30px 5px; }
        section.simulator-step-four .step-title h2 {
          font-size: 32px; }
          section.simulator-step-four .step-title h2 span {
            font-size: 48px;
            margin-bottom: 0px; }
      section.simulator-step-four .simulator-patterns {
        width: 100%;
        padding: 30px 5px 30px 5px;
        float: left; }
        section.simulator-step-four .simulator-patterns .your-patterns {
          width: 100%;
          margin-right: 0px; }
          section.simulator-step-four .simulator-patterns .your-patterns .selected-title h3 {
            font-size: 22px; }
          section.simulator-step-four .simulator-patterns .your-patterns .selected-item-section ul {
            height: 100%;
            margin-bottom: 15px;
            float: left;
            width: 100%; }
            section.simulator-step-four .simulator-patterns .your-patterns .selected-item-section ul li {
              width: 20%;
              padding-top: 19%;
              position: relative; }
              section.simulator-step-four .simulator-patterns .your-patterns .selected-item-section ul li a {
                display: block; }
              section.simulator-step-four .simulator-patterns .your-patterns .selected-item-section ul li svg {
                position: absolute;
                top: 0px;
                left: 0px;
                height: 100%;
                width: 100%;
                margin-top: 0px; }
          section.simulator-step-four .simulator-patterns .your-patterns .color-palette-title h3 {
            font-size: 22px;
            border-left: 0px;
            border-right: 0px;
            margin-bottom: 10px; }
          section.simulator-step-four .simulator-patterns .your-patterns .color-palette ul {
            height: 100%;
            margin-bottom: 15px;
            float: left;
            width: 100%; }
            section.simulator-step-four .simulator-patterns .your-patterns .color-palette ul li {
              width: 20%;
              height: initial;
              margin: 0px;
              padding-top: 19%;
              position: relative;
              border-right: 3px solid white;
              border-bottom: 3px solid white; }
              section.simulator-step-four .simulator-patterns .your-patterns .color-palette ul li a {
                display: block; }
              section.simulator-step-four .simulator-patterns .your-patterns .color-palette ul li img {
                position: absolute;
                top: 0px;
                left: 0px;
                height: 100%;
                width: 100%;
                margin-top: 0px; }
        section.simulator-step-four .simulator-patterns .pattern-preview {
          width: 100%;
          margin-top: 0; }
          section.simulator-step-four .simulator-patterns .pattern-preview .tile-preview {
            width: 100%;
            height: 100%;
            content: " ";
            padding-top: 99%;
            position: relative; }
            section.simulator-step-four .simulator-patterns .pattern-preview .tile-preview svg {
              position: absolute;
              top: 0px;
              left: 0px;
              height: 100%;
              width: 100%;
              margin-top: 0px; }
          section.simulator-step-four .simulator-patterns .pattern-preview .selected-colors h3 {
            font-size: 22px; }
          section.simulator-step-four .simulator-patterns .pattern-preview .selected-colors ul li {
            font-size: 16px; } }

section.simulator-step-five.simulator-active {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

.layout-selector-modal, .color-selector-modal {
  display: none;
  overflow-y: auto;
  position: fixed;
  width: 60vh;
  min-width: 200px;
  max-width: 100%;
  height: 40vh;
  min-height: 200px;
  background-color: #FFF;
  z-index: 1001;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; }
  .layout-selector-modal .shape-layout-item a, .color-selector-modal .shape-layout-item a {
    display: inline-block;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 17px;
    text-transform: uppercase;
    background-color: #f2f2f2;
    color: #616161;
    margin-bottom: 11px; }
  .layout-selector-modal .selected-shape-layout-item a, .color-selector-modal .selected-shape-layout-item a {
    background-color: #4ea49f;
    color: white; }
  .layout-selector-modal .close-modal, .color-selector-modal .close-modal {
    top: 0;
    right: 0px; }
  @media screen and (max-width: 1px) {
    .layout-selector-modal h2, .color-selector-modal h2 {
      font-size: 22px; } }

.color-selector-modal {
  width: 79vw;
  height: 62vh;
  padding: 2rem; }
  .color-selector-modal .pick-svg-group-color {
    cursor: pointer;
    list-style: none;
    display: inline-block; }
    .color-selector-modal .pick-svg-group-color img {
      width: 50px;
      display: block; }
    .color-selector-modal .pick-svg-group-color.selected-block-color {
      outline: 3px solid #57a9a3; }

section.simulator-step-five[data-shape-id="7"] .your-patterns .selected-item-section ul li .activate-pattern svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

section.simulator-step-five {
  width: 80vw;
  text-align: center;
  display: none; }
  section.simulator-step-five .layout-editor {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #f1f1f1;
    overflow-y: overlay; }
    section.simulator-step-five .layout-editor .pattern-tool-editor {
      background: #FFF;
      margin: 3vh; }
      @media screen and (max-width: 1094px) {
        section.simulator-step-five .layout-editor .pattern-tool-editor {
          position: initial;
          margin: 0px; } }
      @media screen and (max-width: 768px) {
        section.simulator-step-five .layout-editor .pattern-tool-editor {
          max-width: 768px; }
          section.simulator-step-five .layout-editor .pattern-tool-editor .step-title {
            display: none; } }
    @media screen and (orientation: portrait) {
      section.simulator-step-five .layout-editor {
        margin-top: 140px;
        margin-bottom: -140px; } }
  section.simulator-step-five .your-patterns {
    overflow-y: scroll;
    box-shadow: 0px 5px 3px 5px #e4e4e4;
    position: relative;
    height: 92vh; }
    section.simulator-step-five .your-patterns .select-layout .add-pattern {
      display: block;
      border: none;
      background-color: #f2f2f2;
      width: 178px;
      height: 178px;
      margin-top: 11px;
      margin: 0 auto;
      background: #f2f2f2 url("../images/add-patterns.png") center center no-repeat scroll;
      background-size: 125px; }
      @media screen and (max-width: 1094px) {
        section.simulator-step-five .your-patterns .select-layout .add-pattern {
          width: 128px;
          height: 128px;
          background-size: 75px; } }
      section.simulator-step-five .your-patterns .select-layout .add-pattern img {
        width: 125px;
        height: 125px;
        margin-top: 4px;
        margin-left: 0; }
        @media screen and (max-width: 1094px) {
          section.simulator-step-five .your-patterns .select-layout .add-pattern img {
            width: 75px;
            height: 75px; } }
    section.simulator-step-five .your-patterns .select-layout {
      margin: 20px 0; }
    section.simulator-step-five .your-patterns .selected-item-section ul {
      padding: 0px;
      margin: 0px;
      width: 250px;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -ms-flex-pack: center;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center;
      padding: 0px;
      margin: 0px; }
      @media screen and (max-width: 1094px) {
        section.simulator-step-five .your-patterns .selected-item-section ul {
          width: 200px; } }
      section.simulator-step-five .your-patterns .selected-item-section ul li {
        overflow: hidden;
        list-style: none;
        width: 176px;
        height: 176px;
        line-height: 80px;
        border: 1px solid #ccc;
        position: relative;
        margin: 10px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-direction: normal;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
        -ms-flex-direction: column;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        box-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
        -ms-flex-pack: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        box-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        align-items: center;
        -ms-flex-align: center; }
        section.simulator-step-five .your-patterns .selected-item-section ul li.empty {
          display: none; }
        @media screen and (max-width: 1094px) {
          section.simulator-step-five .your-patterns .selected-item-section ul li {
            width: 126px;
            height: 126px; } }
        section.simulator-step-five .your-patterns .selected-item-section ul li .activate-pattern {
          border: none;
          background-color: #f2f2f2;
          width: 158px;
          height: 158px; }
          @media screen and (max-width: 1094px) {
            section.simulator-step-five .your-patterns .selected-item-section ul li .activate-pattern {
              width: 108px;
              height: 108px; } }
          section.simulator-step-five .your-patterns .selected-item-section ul li .activate-pattern svg {
            float: left;
            max-width: 100%;
            max-height: 158px; }
            @media screen and (max-width: 1094px) {
              section.simulator-step-five .your-patterns .selected-item-section ul li .activate-pattern svg {
                max-height: 108px; } }
        section.simulator-step-five .your-patterns .selected-item-section ul li .tile-overlay-btns {
          position: absolute;
          top: -17px;
          left: 5px;
          z-index: 10; }
          section.simulator-step-five .your-patterns .selected-item-section ul li .tile-overlay-btns button {
            background-color: #57a9a3;
            border: none;
            color: #FFF;
            line-height: 25px;
            padding: 0;
            width: 40px;
            height: 40px; }
            section.simulator-step-five .your-patterns .selected-item-section ul li .tile-overlay-btns button img {
              vertical-align: middle; }
        section.simulator-step-five .your-patterns .selected-item-section ul li:hover, section.simulator-step-five .your-patterns .selected-item-section ul li.selected {
          border: 4px solid #4ea49f; }
          @media screen and (max-width: 1094px) {
            section.simulator-step-five .your-patterns .selected-item-section ul li:hover button, section.simulator-step-five .your-patterns .selected-item-section ul li.selected button {
              display: inline-block; } }
          section.simulator-step-five .your-patterns .selected-item-section ul li:hover button.hidden, section.simulator-step-five .your-patterns .selected-item-section ul li.selected button.hidden {
            display: none; }
        section.simulator-step-five .your-patterns .selected-item-section ul li button {
          display: none; }
        section.simulator-step-five .your-patterns .selected-item-section ul li:hover button {
          display: inline-block; }
        section.simulator-step-five .your-patterns .selected-item-section ul li:hover.hidden {
          display: none; }
    @media screen and (orientation: portrait) {
      section.simulator-step-five .your-patterns .selected-item-section ul {
        width: 150px; }
        section.simulator-step-five .your-patterns .selected-item-section ul li, section.simulator-step-five .your-patterns .selected-item-section ul .add-pattern {
          width: 100px;
          height: 100px; } }
    @media screen and (orientation: portrait) {
      section.simulator-step-five .your-patterns {
        position: absolute;
        background: white;
        height: 140px;
        width: 100%;
        box-shadow: 0px 0px 0px 0px #fff;
        border-bottom: 1px solid #f1f1f1;
        overflow: hidden; }
        section.simulator-step-five .your-patterns .selected-item-section {
          text-align: left !important;
          margin: 10px 0;
          padding: 0px 10px; }
          section.simulator-step-five .your-patterns .selected-item-section ul {
            float: left;
            width: 83.333%;
            height: 155px;
            display: -webkit-inline-box;
            display: -moz-inline-box;
            display: inline-box;
            display: -webkit-inline-flex;
            display: -moz-inline-flex;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-box-pack: start;
            -moz-box-pack: start;
            box-pack: start;
            -webkit-justify-content: flex-start;
            -moz-justify-content: flex-start;
            -ms-justify-content: flex-start;
            -o-justify-content: flex-start;
            justify-content: flex-start;
            -ms-flex-pack: start;
            -webkit-box-align: start;
            -moz-box-align: start;
            box-align: start;
            -webkit-align-items: flex-start;
            -moz-align-items: flex-start;
            -ms-align-items: flex-start;
            -o-align-items: flex-start;
            align-items: flex-start;
            -ms-flex-align: start;
            -webkit-box-orient: horizontal;
            -moz-box-orient: horizontal;
            box-orient: horizontal;
            -webkit-box-direction: normal;
            -moz-box-direction: normal;
            box-direction: normal;
            -webkit-flex-direction: row;
            -moz-flex-direction: row;
            flex-direction: row;
            -ms-flex-direction: row; }
            section.simulator-step-five .your-patterns .selected-item-section ul li {
              width: 110px;
              height: 110px;
              margin: 5px;
              padding: 5px; }
              section.simulator-step-five .your-patterns .selected-item-section ul li .activate-pattern {
                height: 100%;
                width: 100%;
                margin: 0; }
                section.simulator-step-five .your-patterns .selected-item-section ul li .activate-pattern svg {
                  max-height: 100%;
                  max-height: 155px; }
              section.simulator-step-five .your-patterns .selected-item-section ul li.selected, section.simulator-step-five .your-patterns .selected-item-section ul li:hover {
                border: 0px solid #4ea49f;
                outline: 4px solid #4ea49f; }
          section.simulator-step-five .your-patterns .selected-item-section .add-pattern {
            display: block;
            right: 0px;
            top: 20px;
            bottom: 20px;
            position: absolute;
            margin-right: 20px;
            width: calc(16.666% - 20px);
            height: auto;
            margin-top: 0px; }
            section.simulator-step-five .your-patterns .selected-item-section .add-pattern img {
              width: 85%;
              height: auto; } }
  section.simulator-step-five .pattern-tool-editor {
    height: 86vh;
    padding: 2vh;
    box-shadow: 0 0 2px 0px #dcdcdc; }
    section.simulator-step-five .pattern-tool-editor .step-title {
      margin: 0px 0px 15px 0px; }
      section.simulator-step-five .pattern-tool-editor .step-title h2 {
        margin: 0px; }
    section.simulator-step-five .pattern-tool-editor .simulator-box {
      margin: 0 auto;
      overflow: hidden;
      width: 100%;
      height: auto;
      padding: 0;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      padding: 0; }
      @media screen and (max-width: 768px) {
        section.simulator-step-five .pattern-tool-editor .simulator-box {
          max-width: 728px; } }
    section.simulator-step-five .pattern-tool-editor .simulator-box[data-shape-id="7"] {
      padding-top: 3%; }
    section.simulator-step-five .pattern-tool-editor ul {
      padding: 0px;
      margin: 0px;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-lines: multiple;
      -moz-box-lines: multiple;
      box-lines: multiple;
      -webkit-flex-wrap: wrap;
      -moz-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      section.simulator-step-five .pattern-tool-editor ul li {
        list-style: none;
        width: 8.6624vh;
        height: 8.6624vh;
        margin: 0.1vh;
        -webkit-transform: translateZ(0); }
        section.simulator-step-five .pattern-tool-editor ul li.empty {
          background-color: #CCC; }
        section.simulator-step-five .pattern-tool-editor ul li:hover, section.simulator-step-five .pattern-tool-editor ul li.selected {
          opacity: 0.8; }
        section.simulator-step-five .pattern-tool-editor ul li svg {
          transition: all 0.08s ease;
          width: 100%;
          margin-left: 0;
          margin-top: 0;
          opacity: 1; }
        section.simulator-step-five .pattern-tool-editor ul li.set svg {
          width: 17.5258vh;
          height: 17.5258vh; }
        section.simulator-step-five .pattern-tool-editor ul li.is--placed svg {
          width: 130%;
          margin-left: -15%;
          margin-top: -15%;
          opacity: 0.4; }
    @media screen and (max-width: 1094px) {
      section.simulator-step-five .pattern-tool-editor {
        height: 95vh; } }
  section.simulator-step-five .layout-section-wrapper {
    padding: 0;
    margin: 0 auto;
    margin-top: 20px;
    width: 640px;
    height: 540px;
    background-color: #f2f2f2;
    box-shadow: 0 0 2px 0px #dcdcdc; }
  section.simulator-step-five .pattern-tool-editor {
    position: relative;
    text-align: center; }
    section.simulator-step-five .pattern-tool-editor .tool-options {
      margin-left: auto;
      margin-right: auto; }
      section.simulator-step-five .pattern-tool-editor .tool-options span {
        color: #57a9a3;
        text-transform: uppercase !important;
        font-weight: 600; }
      section.simulator-step-five .pattern-tool-editor .tool-options h3 {
        margin-bottom: 15px; }
      section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        box-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;
        -ms-flex-pack: center;
        margin: 0;
        width: auto;
        height: auto; }
        section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li {
          border-radius: 50px;
          width: 60px;
          background-color: #57a9a3;
          height: 60px;
          margin: 0 0.6vw; }
          section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li .tool-btn {
            -webkit-box-pack: center;
            -moz-box-pack: center;
            box-pack: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            -o-justify-content: center;
            justify-content: center;
            -ms-flex-pack: center;
            display: -webkit-box;
            display: -moz-box;
            display: box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -moz-box-align: center;
            box-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            -ms-flex-align: center;
            border-radius: 50px;
            width: 60px;
            direction: block;
            width: 100%;
            height: 100%; }
            section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li .tool-btn img {
              width: 75%;
              height: 75%;
              -webkit-filter: brightness(2);
              filter: brightness(2); }
            section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li .tool-btn.selected {
              background-color: #346662; }
          section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li.button-holder {
            background-color: transparent;
            width: 95px; }
            section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li.button-holder .layout-section-back-btn {
              position: relative;
              float: left;
              margin: 9px 0px; }
              section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li.button-holder .layout-section-back-btn.hidden {
                display: none !important; }
            section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li.button-holder .layout-section-next-btn {
              position: relative;
              float: right;
              margin: 9px 0px; }
            @media screen and (max-width: 1px) {
              section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li.button-holder {
                display: none; } }
          @media screen and (max-width: 1px) {
            section.simulator-step-five .pattern-tool-editor .tool-options .tool-options-list li {
              height: 33px;
              width: 33px;
              margin: 0 5px; } }
      @media screen and (max-width: 768px) {
        section.simulator-step-five .pattern-tool-editor .tool-options {
          height: 90px;
          bottom: 0px;
          padding: 15px;
          background: rgba(255, 255, 255, 0.5); } }
      @media screen and (max-width: 1px) {
        section.simulator-step-five .pattern-tool-editor .tool-options {
          height: 70px; } }
  section.simulator-step-five .pattern-tools {
    float: left;
    width: 30%;
    padding-top: 50px;
    padding-left: 40px; }
    section.simulator-step-five .pattern-tools .tools-title h3 {
      margin-bottom: 15px;
      text-align: left;
      margin-left: 25px;
      font-size: 2.5vw;
      font-weight: 100; }
    section.simulator-step-five .pattern-tools .pattern-tool-editor ul {
      padding: 0px;
      margin: 0px; }
      section.simulator-step-five .pattern-tools .pattern-tool-editor ul li {
        list-style: none;
        float: left;
        width: 100%;
        color: #b3b3b3;
        text-transform: uppercase;
        font-size: 1.2vw;
        line-height: 40px; }
        section.simulator-step-five .pattern-tools .pattern-tool-editor ul li a {
          color: #b3b3b3;
          text-decoration: none;
          line-height: 40px;
          margin-bottom: 8px;
          display: block; }
          section.simulator-step-five .pattern-tools .pattern-tool-editor ul li a:hover, section.simulator-step-five .pattern-tools .pattern-tool-editor ul li a.selected {
            color: #000; }
            section.simulator-step-five .pattern-tools .pattern-tool-editor ul li a:hover img, section.simulator-step-five .pattern-tools .pattern-tool-editor ul li a.selected img {
              -webkit-filter: brightness(-20%); }
          section.simulator-step-five .pattern-tools .pattern-tool-editor ul li a img {
            width: 40px; }
        section.simulator-step-five .pattern-tools .pattern-tool-editor ul li img {
          float: left;
          margin-right: 10px; }
  @media only screen and (max-width: 768px) {
    section.simulator-step-five {
      width: 100%; }
      section.simulator-step-five .step-title {
        padding: 30px 5px 30px 5px; }
        section.simulator-step-five .step-title h2 {
          font-size: 32px; }
          section.simulator-step-five .step-title h2 span {
            font-size: 48px;
            margin-bottom: 0px; }
      section.simulator-step-five .pattern-editor {
        float: left;
        width: 100%;
        padding: 30px 5px 30px 5px; }
        section.simulator-step-five .pattern-editor .your-patterns {
          width: 100%; }
          section.simulator-step-five .pattern-editor .your-patterns .selected-title h3 {
            font-size: 22px; }
          section.simulator-step-five .pattern-editor .your-patterns .selected-item-section ul li a {
            display: block; }
          section.simulator-step-five .pattern-editor .your-patterns .selected-item-section ul li svg {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            margin-top: 0px; }
          section.simulator-step-five .pattern-editor .your-patterns .pattern-tool-editor {
            padding: 0;
            outline: 0px; }
            section.simulator-step-five .pattern-editor .your-patterns .pattern-tool-editor ul {
              height: 100%;
              margin-bottom: 0px;
              float: left;
              width: 100%; }
              section.simulator-step-five .pattern-editor .your-patterns .pattern-tool-editor ul li {
                width: 12.5%;
                padding-top: 12.45%;
                position: relative;
                border: 0px;
                margin: 0px;
                background: #f1f1f1;
                -webkit-box-shadow: inset 0px 0px 0px 1px white;
                -moz-box-shadow: inset 0px 0px 0px 1px white;
                box-shadow: inset 0px 0px 0px 1px white; }
                section.simulator-step-five .pattern-editor .your-patterns .pattern-tool-editor ul li.empty {
                  border: 0px; }
                section.simulator-step-five .pattern-editor .your-patterns .pattern-tool-editor ul li a {
                  display: block; }
                section.simulator-step-five .pattern-editor .your-patterns .pattern-tool-editor ul li svg {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  height: 100%;
                  width: 100%;
                  margin-top: 0px; }
        section.simulator-step-five .pattern-editor .pattern-tools {
          width: 100%;
          margin: 0px 0px 10px 0px;
          padding: 0px; }
          section.simulator-step-five .pattern-editor .pattern-tools .tools-title h3 {
            text-align: center;
            font-size: 22px;
            margin: 30px 0px 22px 0px; }
          section.simulator-step-five .pattern-editor .pattern-tools .tool-options {
            padding-left: 0px;
            float: left;
            width: 100%; }
            section.simulator-step-five .pattern-editor .pattern-tools .tool-options ul {
              float: left;
              width: 100%; }
              section.simulator-step-five .pattern-editor .pattern-tools .tool-options ul li {
                width: 20%;
                padding: 0px 10px;
                text-align: center; }
                section.simulator-step-five .pattern-editor .pattern-tools .tool-options ul li a {
                  font-size: 16px; }
                  section.simulator-step-five .pattern-editor .pattern-tools .tool-options ul li a img {
                    display: block;
                    width: 100%;
                    margin: 0px; } }
  @media only screen and (max-width: 550px) {
    section.simulator-step-five .pattern-editor .pattern-tools .tool-options ul li a {
      font-size: 10px; } }

.simulator[data-shape-id="7"] + .calculate-modal .activate-pattern svg {
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

section.calculate-modal,
.save-modal {
  width: 80vw;
  width: 70vw;
  height: 84vh;
  position: fixed;
  z-index: 1000;
  top: 8vh;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  overflow-y: overlay;
  display: none; }
  section.calculate-modal .simulator-btn,
  .save-modal .simulator-btn {
    width: 130px; }
  section.calculate-modal .step-title,
  .save-modal .step-title {
    text-align: center;
    color: #4a4a4a;
    font-weight: 500;
    margin-top: 2vh;
    text-transform: uppercase;
    letter-spacing: 1px; }
  section.calculate-modal .save-layout-btn, section.calculate-modal .print-layout-btn,
  .save-modal .save-layout-btn,
  .save-modal .print-layout-btn {
    border: none;
    background: none;
    margin-left: 10px; }
  @media screen and (max-width: 1094px) {
    section.calculate-modal .print-layout-btn,
    .save-modal .print-layout-btn {
      display: none; } }
  section.calculate-modal .calculate-needs,
  .save-modal .calculate-needs {
    position: relative;
    text-transform: lowercase;
    margin: 0 30px;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    -ms-flex-direction: column; }
    section.calculate-modal .calculate-needs .step-title h2,
    .save-modal .calculate-needs .step-title h2 {
      font-size: 28px;
      letter-spacing: 1px;
      margin: 20px 0px;
      font-weight: 100;
      color: #b3b3b3;
      text-transform: uppercase; }
    section.calculate-modal .calculate-needs .tile-calculator,
    .save-modal .calculate-needs .tile-calculator {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1; }
      section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner,
      .save-modal .calculate-needs .tile-calculator .tile-calculator-inner {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        margin-top: 2vh; }
        section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .box-quantity,
        .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .box-quantity {
          margin: 40px 0 0 0; }
        section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper,
        .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper {
          display: -webkit-box;
          display: -moz-box;
          display: box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          margin-bottom: 5px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper .calculator-stat-label,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper .calculator-stat-label {
            background: #b3b3b3;
            color: #FFF;
            padding: 8px;
            display: block;
            margin-right: 5px;
            -webkit-flex-basis: 140px;
            -moz-flex-basis: 140px;
            flex-basis: 140px;
            -ms-flex-preferred-size: 140px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper .calculator-stat-input,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper .calculator-stat-input {
            -webkit-flex-basis: 200px;
            -moz-flex-basis: 200px;
            flex-basis: 200px;
            -ms-flex-preferred-size: 200px;
            display: -webkit-box;
            display: -moz-box;
            display: box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            box-pack: center;
            -webkit-justify-content: center;
            -moz-justify-content: center;
            -ms-justify-content: center;
            -o-justify-content: center;
            justify-content: center;
            -ms-flex-pack: center;
            -webkit-box-align: center;
            -moz-box-align: center;
            box-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            -ms-flex-align: center;
            background: #f1f1f1;
            direction: block;
            text-align: center; }
            section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper .calculator-stat-input.hidden,
            .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper .calculator-stat-input.hidden {
              display: none; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper.hidden,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-stat-wrapper.hidden {
            display: none; }
        section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-alt-stat-wrapper,
        .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-alt-stat-wrapper {
          display: -webkit-box;
          display: -moz-box;
          display: box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          font-size: 21px;
          margin-bottom: 16px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-alt-stat-wrapper .calculator-alt-stat-label,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-alt-stat-wrapper .calculator-alt-stat-label {
            -webkit-flex-basis: 200px;
            -moz-flex-basis: 200px;
            flex-basis: 200px;
            -ms-flex-preferred-size: 200px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-alt-stat-wrapper .calculator-alt-stat-value,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-alt-stat-wrapper .calculator-alt-stat-value {
            -webkit-flex-basis: 140px;
            -moz-flex-basis: 140px;
            flex-basis: 140px;
            -ms-flex-preferred-size: 140px;
            text-align: center;
            border-bottom: 2px dotted #757575;
            margin-bottom: -2px; }
        section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-title h3,
        .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-title h3 {
          background: #f1f1f1;
          width: 100%;
          padding: 24px;
          text-transform: uppercase;
          margin: 0px;
          font-weight: 100;
          font-size: 2.5vw; }
        section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content,
        .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content {
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          box-flex: 1;
          -webkit-flex: 1;
          -moz-flex: 1;
          -ms-flex: 1;
          flex: 1;
          -webkit-flex-basis: 65%;
          -moz-flex-basis: 65%;
          flex-basis: 65%;
          -ms-flex-preferred-size: 65%;
          padding-right: 2vw; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content:first-of-type,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content:first-of-type {
            border-right: 1px solid #CCC; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .calculator-dimensions,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .calculator-dimensions {
            clear: both; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .unit-selection-wrapper,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .unit-selection-wrapper {
            float: left;
            margin-bottom: 10px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .modal-subtitle,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .modal-subtitle {
            font-size: 24px;
            color: #fff;
            text-transform: uppercase;
            font-weight: 500;
            background-color: #4ea49f;
            overflow: auto;
            padding: 3px 5px;
            display: inline-block;
            margin-bottom: 16px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .modal-subtitle-grey,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .modal-subtitle-grey {
            color: #b3b4bd;
            background: #f1f1f1; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .modal-sub-subtitle,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .modal-sub-subtitle {
            font-weight: 400;
            text-transform: initial;
            margin-top: 0;
            background-color: #f1f1f1;
            color: #b3b4bd;
            padding: 5px 5px;
            font-size: 22px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content p,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content p {
            color: #4a4a4a;
            font-size: 1.05vw;
            text-align: left;
            padding: 0px 2px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .pattern-dimension-inputs,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .pattern-dimension-inputs {
            display: none; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs {
            width: 100%; }
            section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs label,
            .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs label {
              background: #b3b3b3;
              color: #FFF; }
            section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs input[type=text],
            .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs input[type=text] {
              background: #f1f1f1;
              border: 0px;
              padding: 3px; }
            section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs.total,
            .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs.total {
              width: 100%;
              margin-bottom: 30px; }
              section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs.total label,
              .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs.total label {
                width: 49%;
                max-width: 49%;
                margin-right: 3; }
              section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs.total input[type=text],
              .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs.total input[type=text] {
                width: 49%;
                max-width: 49%;
                margin: 0;
                height: 30px; }
              section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs.total:last-child,
              .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs.total:last-child {
                padding-left: 0px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .your-patterns,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .your-patterns {
            float: left;
            width: 100%;
            margin-bottom: 20px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details {
            width: 100%;
            float: left; }
            section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper,
            .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper {
              float: left;
              margin-bottom: 5px;
              width: 100%; }
              section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper .modal-subtitle,
              .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper .modal-subtitle {
                margin: 15px 0px;
                margin-bottom: 16px; }
              section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper .calculator-stat-label,
              .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper .calculator-stat-label {
                background: #b3b3b3;
                color: #FFF;
                padding: 8px;
                display: block;
                margin-right: 5px;
                width: 46%;
                float: left; }
              section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper .calculator-stat-input,
              .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper .calculator-stat-input {
                background: #f1f1f1;
                border: 0px;
                padding: 8px;
                float: left;
                width: 50%; }
              section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper.shorter .calculator-stat-label,
              .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper.shorter .calculator-stat-label {
                width: 30%; }
              section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper.shorter .calculator-stat-input,
              .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .project-details .input-wrapper.shorter .calculator-stat-input {
                width: 66%; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles {
            width: 100%;
            float: left;
            margin-bottom: 30px; }
            section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles ul,
            .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles ul {
              list-style: none;
              margin: 0px;
              padding: 0px;
              width: 100%; }
              section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles ul li,
              .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles ul li {
                content: " ";
                float: left;
                display: inline-block;
                margin: 0px;
                width: 68px;
                height: 68px;
                outline: 1px solid #c8c8c8;
                border: 3px solid #fff;
                background: #f1f1f1;
                margin-right: 4px; }
                section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles ul li.selected,
                .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles ul li.selected {
                  outline: 2px solid #57a9a3; }
                section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles ul li svg,
                .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .designed-tiles ul li svg {
                  position: relative;
                  top: 50%;
                  transform: translateY(-50%); }
        section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info,
        .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info {
          -webkit-box-flex: 1;
          -moz-box-flex: 1;
          box-flex: 1;
          -webkit-flex: 1;
          -moz-flex: 1;
          -ms-flex: 1;
          flex: 1;
          padding: 0 2vw;
          -webkit-flex-basis: 35%;
          -moz-flex-basis: 35%;
          flex-basis: 35%;
          -ms-flex-preferred-size: 35%;
          padding: 0px 0px 0px 2vw; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity p,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity p {
            font-size: 25px;
            color: #b3b3b3;
            margin: 0px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity table,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity table {
            text-align: left;
            font-size: 14px;
            color: #b3b3b3; }
            section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity table td,
            .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity table td {
              font-size: 1.4vw; }
            section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity table span,
            .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity table span {
              display: none; }
            section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity table .value,
            .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info .pattern-quantity table .value {
              text-align: center;
              border-bottom: 1px dotted #c8c8c8;
              width: 50%; }
        section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table,
        .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table {
          width: 101%;
          margin-bottom: 30px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table .pattern:not([data-uuid]),
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table .pattern:not([data-uuid]) {
            display: none; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table .shaded-cell,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table .shaded-cell {
            background: #b3b3b3;
            color: #FFF; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table td:first-of-type,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table td:first-of-type {
            text-align: left; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table td,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table td {
            padding: 5px 10px;
            margin-bottom: 6px;
            border-bottom: 4px solid #FFF;
            border-right: 4px solid #FFF;
            width: 110px;
            text-align: center; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table .normal-cell,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .modal-design-table .normal-cell {
            background: #f1f1f1; }
    section.calculate-modal .calculate-needs .your-patterns .pattern-wrapper .modal-pattern-wrapper.selected, section.calculate-modal .calculate-needs .your-patterns .pattern-wrapper .modal-pattern-wrapper:hover,
    .save-modal .calculate-needs .your-patterns .pattern-wrapper .modal-pattern-wrapper.selected,
    .save-modal .calculate-needs .your-patterns .pattern-wrapper .modal-pattern-wrapper:hover {
      border: 2px solid #4ea49f; }
    section.calculate-modal .calculate-needs .your-patterns .modal-pattern-wrapper,
    .save-modal .calculate-needs .your-patterns .modal-pattern-wrapper {
      border: 1px solid #b3b3b3;
      height: 100%;
      padding: 3px; }
    section.calculate-modal .calculate-needs .your-patterns .selected-title h3,
    .save-modal .calculate-needs .your-patterns .selected-title h3 {
      font-size: 2.5vw;
      font-weight: 100;
      margin-bottom: 20px; }
    section.calculate-modal .calculate-needs .your-patterns .selected-patterns,
    section.calculate-modal .calculate-needs .your-patterns .selected-item-section,
    .save-modal .calculate-needs .your-patterns .selected-patterns,
    .save-modal .calculate-needs .your-patterns .selected-item-section {
      width: 100%;
      margin-bottom: 10px; }
      section.calculate-modal .calculate-needs .your-patterns .selected-patterns ul,
      section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul,
      .save-modal .calculate-needs .your-patterns .selected-patterns ul,
      .save-modal .calculate-needs .your-patterns .selected-item-section ul {
        padding: 0px;
        height: 80px;
        margin: 0px;
        display: -webkit-box;
        display: -moz-box;
        display: box;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex; }
        section.calculate-modal .calculate-needs .your-patterns .selected-patterns ul li,
        section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul li,
        .save-modal .calculate-needs .your-patterns .selected-patterns ul li,
        .save-modal .calculate-needs .your-patterns .selected-item-section ul li {
          list-style: none;
          width: 90px;
          height: 90px;
          background: #f1f1f1;
          line-height: 80px;
          margin-right: 3px;
          margin-bottom: 3px; }
          section.calculate-modal .calculate-needs .your-patterns .selected-patterns ul li .activate-pattern,
          section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul li .activate-pattern,
          .save-modal .calculate-needs .your-patterns .selected-patterns ul li .activate-pattern,
          .save-modal .calculate-needs .your-patterns .selected-item-section ul li .activate-pattern {
            height: 100%; }
            section.calculate-modal .calculate-needs .your-patterns .selected-patterns ul li .activate-pattern img,
            section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul li .activate-pattern img,
            .save-modal .calculate-needs .your-patterns .selected-patterns ul li .activate-pattern img,
            .save-modal .calculate-needs .your-patterns .selected-item-section ul li .activate-pattern img {
              width: 80px;
              height: 80px;
              max-height: 100%; }
            section.calculate-modal .calculate-needs .your-patterns .selected-patterns ul li .activate-pattern svg,
            section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul li .activate-pattern svg,
            .save-modal .calculate-needs .your-patterns .selected-patterns ul li .activate-pattern svg,
            .save-modal .calculate-needs .your-patterns .selected-item-section ul li .activate-pattern svg {
              max-height: 100%; }
  section.calculate-modal .calculate-modal-footer,
  .save-modal .calculate-modal-footer {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
    margin-top: 30px; }
    section.calculate-modal .calculate-modal-footer .calculate-modal-disclaimer,
    .save-modal .calculate-modal-footer .calculate-modal-disclaimer {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 60px;
      margin-right: 10px;
      margin-bottom: 20px;
      text-transform: initial;
      color: #a9a9a9; }
    section.calculate-modal .calculate-modal-footer .calculate-modal-btns,
    .save-modal .calculate-modal-footer .calculate-modal-btns {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: end;
      -moz-box-pack: end;
      box-pack: end;
      -webkit-justify-content: flex-end;
      -moz-justify-content: flex-end;
      -ms-justify-content: flex-end;
      -o-justify-content: flex-end;
      justify-content: flex-end;
      -ms-flex-pack: end;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center; }
      section.calculate-modal .calculate-modal-footer .calculate-modal-btns button,
      .save-modal .calculate-modal-footer .calculate-modal-btns button {
        height: 38px;
        margin-top: 0px;
        line-height: 38px;
        padding: 0px; }
      section.calculate-modal .calculate-modal-footer .calculate-modal-btns a img,
      .save-modal .calculate-modal-footer .calculate-modal-btns a img {
        margin: 10px; }
  @media screen and (orientation: portrait) {
    section.calculate-modal,
    .save-modal {
      top: 0;
      height: 100%;
      overflow-y: overlay; }
      section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner,
      .save-modal .calculate-needs .tile-calculator .tile-calculator-inner {
        margin-top: 0;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-direction: normal;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
        -ms-flex-direction: column; }
        section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content:first-of-type,
        .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content:first-of-type {
          border-right: none;
          border-bottom: 1px solid #CCC; }
        section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info,
        .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .pattern-info {
          padding-left: 0;
          margin-bottom: 20px; } }
  @media only screen and (max-width: 768px) {
    section.calculate-modal,
    .save-modal {
      width: 100%; }
      section.calculate-modal .step-title,
      .save-modal .step-title {
        padding: 30px 5px 30px 5px; }
        section.calculate-modal .step-title h2,
        .save-modal .step-title h2 {
          font-size: 32px; }
          section.calculate-modal .step-title h2 span,
          .save-modal .step-title h2 span {
            font-size: 48px;
            margin-bottom: 0px; }
      section.calculate-modal .calculate-needs,
      .save-modal .calculate-needs {
        padding: 30px 5px 30px 5px; }
        section.calculate-modal .calculate-needs .tile-calculator,
        .save-modal .calculate-needs .tile-calculator {
          width: 100%;
          padding: 0px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-title h3,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-title h3 {
            font-size: 22px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content p,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content p {
            font-size: 16px; }
          section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs .column input[type=text], section.calculate-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs .column label,
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs .column input[type=text],
          .save-modal .calculate-needs .tile-calculator .tile-calculator-inner .calculator-content .inputs .column label {
            font-size: 16px; }
        section.calculate-modal .calculate-needs .your-patterns,
        .save-modal .calculate-needs .your-patterns {
          width: 100%; }
          section.calculate-modal .calculate-needs .your-patterns .selected-title h3,
          .save-modal .calculate-needs .your-patterns .selected-title h3 {
            font-size: 22px;
            margin-top: 30px; }
          section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul,
          .save-modal .calculate-needs .your-patterns .selected-item-section ul {
            height: 100%;
            margin-bottom: 15px;
            float: left;
            width: 100%; }
            section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul li,
            .save-modal .calculate-needs .your-patterns .selected-item-section ul li {
              width: 20%;
              height: 100%;
              position: relative;
              margin: 0px;
              border: 1px solid #CCC;
              margin-bottom: 8px; }
              section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul li .pattern-wrapper,
              .save-modal .calculate-needs .your-patterns .selected-item-section ul li .pattern-wrapper {
                width: 100%;
                height: 100%; }
              section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul li a,
              .save-modal .calculate-needs .your-patterns .selected-item-section ul li a {
                display: block; }
              section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul li svg,
              .save-modal .calculate-needs .your-patterns .selected-item-section ul li svg {
                height: 100%;
                width: 100%; }
              section.calculate-modal .calculate-needs .your-patterns .selected-item-section ul li:not(.pattern-wrapper),
              .save-modal .calculate-needs .your-patterns .selected-item-section ul li:not(.pattern-wrapper) {
                display: none; }
          section.calculate-modal .calculate-needs .your-patterns .pattern-info,
          .save-modal .calculate-needs .your-patterns .pattern-info {
            width: 100%; }
            section.calculate-modal .calculate-needs .your-patterns .pattern-info .pattern-preview,
            .save-modal .calculate-needs .your-patterns .pattern-info .pattern-preview {
              width: 50%;
              padding-top: 50%;
              position: relative; }
              section.calculate-modal .calculate-needs .your-patterns .pattern-info .pattern-preview svg,
              .save-modal .calculate-needs .your-patterns .pattern-info .pattern-preview svg {
                position: absolute;
                top: 0px;
                left: 0px;
                height: 100%;
                width: 100%;
                margin-top: 0px; }
            section.calculate-modal .calculate-needs .your-patterns .pattern-info .pattern-quantity,
            .save-modal .calculate-needs .your-patterns .pattern-info .pattern-quantity {
              width: 50%; }
              section.calculate-modal .calculate-needs .your-patterns .pattern-info .pattern-quantity p,
              .save-modal .calculate-needs .your-patterns .pattern-info .pattern-quantity p {
                font-size: 16px; }
              section.calculate-modal .calculate-needs .your-patterns .pattern-info .pattern-quantity table,
              .save-modal .calculate-needs .your-patterns .pattern-info .pattern-quantity table {
                width: 100%; }
                section.calculate-modal .calculate-needs .your-patterns .pattern-info .pattern-quantity table td,
                .save-modal .calculate-needs .your-patterns .pattern-info .pattern-quantity table td {
                  font-size: 16px; } }

section.save-modal {
  z-index: 1000;
  width: 75vw;
  min-width: 280px;
  top: 18%;
  height: 60vh;
  padding-top: 3vh;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 40px; }
  section.save-modal p img {
    width: 16vw; }
  section.save-modal a {
    color: #4ea49f;
    word-break: break-all; }
  section.save-modal .button {
    display: inline-block;
    width: 260px;
    color: white; }
    section.save-modal .button.facebook {
      background: #3b5998; }
    section.save-modal .button.twitter {
      background: #55acee; }
    section.save-modal .button.pinterest {
      background: #cb2027; }
    section.save-modal .button.download-view-btn {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -moz-box-align: center;
      box-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      -ms-flex-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      box-pack: center;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
      -ms-flex-pack: center;
      margin: 10px auto; }
      section.save-modal .button.download-view-btn img {
        -webkit-filter: brightness(2);
        filter: brightness(2);
        margin-right: 7px; }

section.steps-nav ul {
  padding: 0; }
  section.steps-nav ul li {
    color: #c8c8c8;
    padding: 5px 10px;
    height: 80px; }
    section.steps-nav ul li a {
      color: #c8c8c8; }
    section.steps-nav ul li.active {
      background: #b3b3b3;
      color: #fff; }
      section.steps-nav ul li.active a {
        color: #fff; }
    section.steps-nav ul li:hover {
      background: #b3b3b3;
      color: #fff; }
      section.steps-nav ul li:hover a {
        color: #fff; }
section.steps-nav:before {
  display: block;
  position: absolute;
  top: 55px;
  left: 0px;
  content: "";
  height: 32px;
  width: 1px;
  background: #b3b3b3;
  z-index: 1; }
section.steps-nav:after {
  display: block;
  position: absolute;
  top: 55px;
  right: 0px;
  content: "";
  height: 32px;
  width: 1px;
  background: #b3b3b3;
  z-index: 1; }

@media only screen and (max-width: 1024px) {
  section.simulator-step-three .step-title {
    text-align: left;
    padding-left: 4%; }

  section.calculate-modal {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    top: 10px; } }
section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section, #view-container .layout-section.simulator-box {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  padding: 1.5%; }
  @media screen and (max-width: 1px) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section, #view-container .layout-section.simulator-box {
      max-width: 320px; } }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col, #view-container .layout-section.simulator-box .layout-svg-col {
    width: 10vh; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col svg, #view-container .layout-section.simulator-box .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box .layout-svg-col svg {
      display: block;
      width: 100%;
      cursor: pointer;
      transition: all 0.08s ease;
      opacity: 1; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col .tile-svg.empty, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col svg.empty, #view-container .layout-section.simulator-box .layout-svg-col .tile-svg.empty, #view-container .layout-section.simulator-box .layout-svg-col svg.empty {
        background-color: #CCC; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col .tile-svg.selected, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col svg.selected, #view-container .layout-section.simulator-box .layout-svg-col .tile-svg.selected, #view-container .layout-section.simulator-box .layout-svg-col svg.selected {
        opacity: 0.8; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col .tile-svg.set, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col svg.set, #view-container .layout-section.simulator-box .layout-svg-col .tile-svg.set, #view-container .layout-section.simulator-box .layout-svg-col svg.set {
        width: 17.5258vh;
        height: 17.5258vh; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col .tile-svg[data-being-placed="true"], section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col svg[data-being-placed="true"], #view-container .layout-section.simulator-box .layout-svg-col .tile-svg[data-being-placed="true"], #view-container .layout-section.simulator-box .layout-svg-col svg[data-being-placed="true"] {
        width: 130%;
        position: absolute;
        left: 9999px;
        opacity: 0.4;
        display: none; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col .tile-svg polygon, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section .layout-svg-col svg polygon, #view-container .layout-section.simulator-box .layout-svg-col .tile-svg polygon, #view-container .layout-section.simulator-box .layout-svg-col svg polygon {
        fill: #cccccc; }
  @media only screen and (min-width: 768px) and (max-width: 1140px) and (orientation: landscape) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col {
      width: 58px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col .tile-svg {
        width: 58px;
        height: 58px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (min-width: 768px) and (max-width: 1140px) and (orientation: portrait) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col {
      width: 58px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col .tile-svg {
        width: 58px;
        height: 58px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (max-width: 767px) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col {
      width: 30px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col .tile-svg {
        width: 30px;
        height: 30px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (min-width: 1140px) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col {
      width: 58px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"] .layout-svg-col .tile-svg {
        width: 58px;
        height: 58px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (min-width: 768px) and (max-width: 1140px) and (orientation: landscape) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col {
      width: 116px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col .tile-svg {
        width: 116px;
        height: 116px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (min-width: 768px) and (max-width: 1140px) and (orientation: portrait) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col {
      width: 116px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col .tile-svg {
        width: 116px;
        height: 116px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (max-width: 767px) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col {
      width: 58px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col .tile-svg {
        width: 58px;
        height: 58px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (min-width: 1140px) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col {
      width: 116px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="30x30"] .layout-svg-col .tile-svg {
        width: 116px;
        height: 116px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (min-width: 768px) and (max-width: 1140px) and (orientation: landscape) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col {
      width: 77px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col .tile-svg {
        width: 77px;
        height: 77px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (min-width: 768px) and (max-width: 1140px) and (orientation: portrait) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col {
      width: 77px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col .tile-svg {
        width: 77px;
        height: 77px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (max-width: 767px) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col {
      width: 40px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col .tile-svg {
        width: 40px;
        height: 40px;
        margin: 0;
        margin-bottom: 1px; } }
  @media only screen and (min-width: 1140px) {
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col {
      width: 77px;
      margin-right: 1px; }
      section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="square"][data-size-key="20x20"] .layout-svg-col .tile-svg {
        width: 77px;
        height: 77px;
        margin: 0;
        margin-bottom: 1px; } }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"] .layout-svg-col:nth-child(1), #view-container .layout-section.simulator-box[data-shape-name="hexagonal"] .layout-svg-col:nth-child(1) {
    margin: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"].simulator-box[data-layout-key="basic-hex"], #view-container .layout-section.simulator-box[data-shape-name="hexagonal"].simulator-box[data-layout-key="basic-hex"] {
    padding: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"] .layout-svg-col {
    width: 68px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"] .layout-svg-col:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="hexagonal"] .layout-svg-col:nth-child(even) {
    margin: 29.5px -17.7px;
    margin-bottom: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"] .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"] svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"] svg {
    padding: 1px;
    width: 68px;
    height: 59px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="29x25"] .layout-svg-col:nth-child(1), #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="29x25"] .layout-svg-col:nth-child(1) {
    margin: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="29x25"].simulator-box[data-layout-key="basic-hex"], #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="29x25"].simulator-box[data-layout-key="basic-hex"] {
    padding: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="29x25"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="29x25"] .layout-svg-col {
    width: 116px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="29x25"] .layout-svg-col:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="29x25"] .layout-svg-col:nth-child(even) {
    margin: 50px -30px;
    margin-bottom: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="29x25"] .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="29x25"] svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="29x25"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="29x25"] svg {
    padding: 1px;
    width: 116px;
    height: 100px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="23x20"] .layout-svg-col:nth-child(1), #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="23x20"] .layout-svg-col:nth-child(1) {
    margin: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="23x20"].simulator-box[data-layout-key="basic-hex"], #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="23x20"].simulator-box[data-layout-key="basic-hex"] {
    padding: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="23x20"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="23x20"] .layout-svg-col {
    width: 92px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="23x20"] .layout-svg-col:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="23x20"] .layout-svg-col:nth-child(even) {
    margin: 40px -24px;
    margin-bottom: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="23x20"] .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="23x20"] svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="23x20"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="23x20"] svg {
    padding: 1px;
    width: 92px;
    height: 80px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="11x10"] .layout-svg-col:nth-child(1), #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="11x10"] .layout-svg-col:nth-child(1) {
    margin: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="11x10"].simulator-box[data-layout-key="basic-hex"], #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="11x10"].simulator-box[data-layout-key="basic-hex"] {
    padding: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="11x10"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="11x10"] .layout-svg-col {
    width: 46px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="11x10"] .layout-svg-col:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="11x10"] .layout-svg-col:nth-child(even) {
    margin: 20px -12px;
    margin-bottom: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="11x10"] .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal"][data-size-key="11x10"] svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="11x10"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal"][data-size-key="11x10"] svg {
    padding: 1px;
    width: 46px;
    height: 40px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="Basic-Rectangle"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="Basic-Rectangle"].simulator-box {
    padding: 33px 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="Basic-Rectangle"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="Basic-Rectangle"] .layout-svg-col {
    width: 80px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="Basic-Rectangle"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="Basic-Rectangle"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="Basic-Rectangle"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="Basic-Rectangle"] .layout-svg-col .tile-svg {
      width: 80px;
      height: 120px;
      padding: 1px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="Horizontal-Rectangle"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="Horizontal-Rectangle"].simulator-box {
    padding: 0 0 40px 40px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="Horizontal-Rectangle"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="Horizontal-Rectangle"] .layout-svg-col {
    width: 120px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="Horizontal-Rectangle"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="Horizontal-Rectangle"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="Horizontal-Rectangle"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="Horizontal-Rectangle"] .layout-svg-col .tile-svg {
      width: 80px;
      height: 120px;
      padding: 1px;
      margin-bottom: -40px;
      padding: 1px;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(even) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(even) svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(even) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(even) svg {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform-origin: center; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(odd) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(odd) svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(odd) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(odd) svg {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform-origin: center; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col {
    width: 80px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(even) {
    margin-top: 56px;
    margin-left: -36px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:nth-child(odd) {
    margin-left: -36px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:first-child, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col:first-child {
    margin-left: 40px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"].simulator-box {
    padding: 33px 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col {
    width: 120px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="rectangle"][data-layout-key="rectangle-herringbone"] .layout-svg-col .tile-svg {
      width: 80px;
      height: 120px;
      margin: 0;
      margin-bottom: -8px;
      padding: 1px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"].simulator-box {
    padding: 40px 0 0 60px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"] .layout-svg-col {
    padding: 0;
    width: 120px;
    margin-left: -24px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"] .layout-svg-col:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"] .layout-svg-col:nth-child(even) {
    margin-top: 40px;
    margin-left: -24px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"] .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"] svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="horizontal-long-hex"] svg {
    width: 80px;
    height: 120px;
    margin: 0;
    margin-top: -40px;
    padding: 1px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"].simulator-box {
    padding-top: 20px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .layout-svg-col {
    width: 80px;
    margin-left: -40px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .layout-svg-col:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .layout-svg-col:nth-child(even) {
    margin: 0;
    margin-left: -40px;
    margin-top: 96px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .layout-svg-col:nth-child(1), #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .layout-svg-col:nth-child(1) {
    margin-left: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] svg {
    width: 80px;
    height: 120px;
    margin: 0;
    margin-top: 72px;
    padding: 1px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .tile-svg:first-child, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] svg:first-child, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .tile-svg:first-child, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] svg:first-child {
      margin-top: 0; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .tile-svg:last-child, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] svg:last-child, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] .tile-svg:last-child, #view-container .layout-section.simulator-box[data-shape-name="hexagonal-elongated"][data-layout-key="vertical-long-hex"] svg:last-child {
      margin-bottom: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(even) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(even) svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(even) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(even) svg {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(odd) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(odd) svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(odd) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(odd) svg {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"].simulator-box[data-layout-key="baguette"], #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"].simulator-box[data-layout-key="baguette"] {
    padding: 12px 0 100px 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] svg {
    width: 24px;
    height: 122px;
    margin: 0 0 -88px 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col {
    width: 62px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:first-child, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:first-child {
    margin-left: 36px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(odd) {
    margin-top: 20px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette"] .layout-svg-col:nth-child(even) {
    margin: 3px 25px 0 25px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette-horizontal"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette-horizontal"].simulator-box {
    padding: 0 0 97px 97px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette-horizontal"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette-horizontal"] .layout-svg-col {
    width: 122px;
    margin-left: 1px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette-horizontal"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette-horizontal"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette-horizontal"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette-horizontal"] .layout-svg-col .tile-svg {
      width: 24px;
      height: 122px;
      margin-bottom: -97px;
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette-vertical"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette-vertical"].simulator-box {
    padding: 20px 20px 20px 20px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette-vertical"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette-vertical"] .layout-svg-col {
    width: 24px;
    margin-left: 1px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette-vertical"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="baguette"][data-layout-key="baguette-vertical"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette-vertical"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="baguette"][data-layout-key="baguette-vertical"] .layout-svg-col .tile-svg {
      width: 24px;
      height: 122px;
      padding: 0;
      margin-bottom: 1px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-id="15"] .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-id="15"] svg, #view-container .layout-section.simulator-box[data-shape-id="15"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-id="15"] svg {
    width: 4.7624vh;
    height: 8.6624vh;
    margin-bottom: -2.3vh; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-id="15"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-id="15"] .layout-svg-col {
    padding-top: 7.9vh;
    width: 5vh; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-id="15"] .layout-svg-col:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-id="15"] .layout-svg-col:nth-child(odd) {
    margin-top: 1.7vh; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-id="15"] .layout-svg-col:nth-child(odd) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-id="15"] .layout-svg-col:nth-child(odd) svg, #view-container .layout-section.simulator-box[data-shape-id="15"] .layout-svg-col:nth-child(odd) .tile-svg, #view-container .layout-section.simulator-box[data-shape-id="15"] .layout-svg-col:nth-child(odd) svg {
      transform: rotate(45deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-id="15"] .layout-svg-col:nth-child(even), #view-container .layout-section.simulator-box[data-shape-id="15"] .layout-svg-col:nth-child(even) {
    margin: -1.6vh 1.2vh 0 1.2vh; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-id="15"] .layout-svg-col:nth-child(even) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-id="15"] .layout-svg-col:nth-child(even) svg, #view-container .layout-section.simulator-box[data-shape-id="15"] .layout-svg-col:nth-child(even) .tile-svg, #view-container .layout-section.simulator-box[data-shape-id="15"] .layout-svg-col:nth-child(even) svg {
      transform: rotate(-45deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col {
    width: auto; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"].simulator-box {
    padding: 20px 20px 20px 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col {
    width: 65px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col:nth-child(odd) {
      margin: 56px -32.5px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"] .layout-svg-col .tile-svg {
      width: 65px;
      height: 112px;
      padding: 1px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"].simulator-box {
    padding: 20px 20px 20px 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"] .layout-svg-col {
    width: 46px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(odd) {
      margin: 40px -23px; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"] .layout-svg-col svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"] .layout-svg-col .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"] .layout-svg-col svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="vertical-diamond"][data-size-key="20x11"] .layout-svg-col .tile-svg {
      width: 46px;
      height: 80px;
      padding: 1px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) svg:nth-child(odd), section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) .tile-svg:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) svg:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) .tile-svg:nth-child(odd) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) svg:nth-child(even), section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) .tile-svg:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) svg:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) .tile-svg:nth-child(even) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) svg:nth-child(odd), section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) .tile-svg:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) svg:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) .tile-svg:nth-child(odd) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) svg:nth-child(even), section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) .tile-svg:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) svg:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) .tile-svg:nth-child(even) {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"].simulator-box {
    padding: 0; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"].simulator-box .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"].simulator-box .layout-svg-col {
      width: 65px;
      padding: 0;
      margin-left: -16.25px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .tile-svg {
    width: 65px;
    height: 112px;
    padding: 1px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col {
    margin-top: -12px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n) {
    margin-top: 72px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n) svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n) .tile-svg,
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 2) svg,
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 2) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n) svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n) .tile-svg,
  #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 2) svg,
  #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 2) .tile-svg {
    margin-bottom: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 1) svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 3) svg {
    margin-bottom: -56px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 2), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:nth-child(4n + 2) {
    margin-top: 16px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:first-child, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:first-child {
    margin-left: 0px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:last-child, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"] .layout-svg-col:last-child {
    margin-right: 0px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) svg:nth-child(odd), section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) .tile-svg:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) svg:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) .tile-svg:nth-child(odd) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) svg:nth-child(even), section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) .tile-svg:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) svg:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) .tile-svg:nth-child(even) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) svg:nth-child(odd), section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) .tile-svg:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) svg:nth-child(odd), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) .tile-svg:nth-child(odd) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) svg:nth-child(even), section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) .tile-svg:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) svg:nth-child(even), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) .tile-svg:nth-child(even) {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg); }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"].simulator-box, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"].simulator-box {
    padding: 0; }
    section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"].simulator-box .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"].simulator-box .layout-svg-col {
      width: 46px;
      padding: 0;
      margin-left: -11.5px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .tile-svg {
    width: 46px;
    height: 80px;
    padding: 1px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col {
    margin-top: -12px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n) {
    margin-top: 48px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n) svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n) .tile-svg,
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 2) svg,
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 2) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n) svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n) .tile-svg,
  #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 2) svg,
  #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 2) .tile-svg {
    margin-bottom: 0; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) .tile-svg, section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 1) svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) .tile-svg, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 3) svg {
    margin-bottom: -40px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 2), #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:nth-child(4n + 2) {
    margin-top: 8px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:first-child, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:first-child {
    margin-left: 0px; }
  section.simulator-step-five .pattern-tool-editor .layout-section-wrapper .layout-section[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:last-child, #view-container .layout-section.simulator-box[data-shape-name="diamond"][data-layout-key="3d-diamond"][data-size-key="20x11"] .layout-svg-col:last-child {
    margin-right: 0px; }

[data-shape-name="pentagon"] svg,
[data-shape-name="splinter"] svg {
  width: 100%;
  height: 100%; }

.tooltipster-sidetip.tooltipster-popham .tooltipster-box {
  background: #57a9a3;
  border: 0;
  border-radius: 0;
  color: white;
  box-shadow: none; }

.tooltipster-sidetip.tooltipster-popham .tooltipster-content {
  color: white;
  padding: 8px;
  text-transform: lowercase; }

.tooltipster-sidetip.tooltipster-top.tooltipster-popham .tooltipster-arrow-border {
  border-top-color: #57a9a3; }

.tooltipster-sidetip.tooltipster-top.tooltipster-popham .tooltipster-arrow-background {
  border-top-color: #57a9a3; }

.tooltipster-sidetip.tooltipster-bottom.tooltipster-popham .tooltipster-arrow-border {
  border-bottom-color: #57a9a3; }

.tooltipster-sidetip.tooltipster-bottom.tooltipster-popham .tooltipster-arrow-background {
  border-bottom-color: #57a9a3; }

.simulator-toolbar.view-toolbar .simulator-btn {
  display: inline-block !important;
  text-align: left; }
.simulator-toolbar.view-toolbar a.simulator-btn.simulator-nav-calc-btn.header-download-view-btn {
  display: flex !important;
  justify-content: center;
  margin-right: 10px; }
  .simulator-toolbar.view-toolbar a.simulator-btn.simulator-nav-calc-btn.header-download-view-btn img {
    margin-right: 7px;
    -webkit-filter: brightness(2);
    filter: brightness(2);
    height: 32px;
    position: relative;
    top: -6px; }

.simulator-view-page {
  margin-bottom: 25px;
  width: 100%;
  height: auto; }
  .simulator-view-page main {
    text-align: center;
    padding: 0 40px;
    padding-top: 20px; }
  .simulator-view-page ul li {
    width: auto;
    height: auto; }
  .simulator-view-page .simulator-nav-logo-wrapper {
    float: left; }
    .simulator-view-page .simulator-nav-logo-wrapper img {
      height: 100% !important;
      top: 0 !important; }
  .simulator-view-page .pattern-image-holder {
    float: left;
    width: 150px;
    height: 136px;
    background-color: #f2f2f2;
    padding: 12px; }
    .simulator-view-page .pattern-image-holder svg {
      height: 100%;
      max-width: 100%;
      max-height: 100%; }
  .simulator-view-page h3 {
    text-align: left;
    font-size: 19px;
    margin-bottom: 8px;
    color: #57a9a3;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center; }
  .simulator-view-page .pattern-title {
    text-align: left;
    color: #b1b1b1;
    font-size: 19px;
    margin-bottom: 8px; }
  .simulator-view-page .pattern-info {
    min-height: 150px;
    margin-left: 163px; }
    .simulator-view-page .pattern-info .color-wrapper {
      margin-right: 2px;
      float: left; }
      .simulator-view-page .pattern-info .color-wrapper .color-div {
        display: inline-block; }
      .simulator-view-page .pattern-info .color-wrapper .color-letter {
        width: 34px;
        text-align: center;
        height: 29px;
        padding: 3px;
        font-size: 19px;
        color: #FFF;
        font-weight: bold;
        background-color: #CCC; }
      .simulator-view-page .pattern-info .color-wrapper .color-title {
        font-size: 15px;
        font-weight: bold;
        height: 29px;
        background-color: #f5f5f5;
        padding: 6px 11px;
        color: #bdbdbd; }

.intro-container video {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: auto;
  height: auto;
  height: 100%;
  max-width: 100%;
  transform: translate(-50%, -50%); }
.intro-container .button {
  display: none;
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  width: auto;
  z-index: 11;
  font-size: 43px; }
  @media screen and (max-width: 1px) {
    .intro-container .button {
      display: inline; } }
  @media screen and (max-width: 1px) {
    .intro-container .button {
      font-size: 23px; } }

/*# sourceMappingURL=style.css.map */

/*debut optimisation mobile */
@media all and (min-width:0px) and (max-width: 568px) {
    .layout-section-wrapper{
        width: 100% !important;  }
    .add-pattern{width: 100px !important;}
    .simulator-nav-calc-btn{min-width: 130px !important;}
    .tooltip-one{display: none !important;}
    .tooltip-two{display: none !important;}
    .tooltip-three{display: none !important;}
}

@media all and (min-width:0px) and (max-width: 380px) {
    .simulator-nav-logo-li{display: none !important;}
}

/*debut optimisation mobile */
/*show btn next on mobile*/
@media all and (min-width:0px) and (max-width: 568px) {
  .full-page-container, .simulator {overflow: visible; }

  /*fix overflow tool options*/
  .tool-options{height: auto !important;}
}
/*fin optimisation mobile */