* {
  box-sizing: border-box;
}
.fade-enter-active,
.fade-leave-active {
  transition: all .25s ease-in-out;
}
.fade-enter {
  transform: translateX(-2%);
}
.fade-leave-active {
  transform: translateX(2%);
}
.fade-enter,
.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.is-invalid {
  background: #ff9393;
}
.is-valid {
  background: #d8ffd8;
}




@font-face {
   font-family:"Clan W01 Bold";
   src:url(/wp-content/plugins/fk-order/public/fonts/f5be07f6-7c38-4bd0-b6aa-ba76266b46ce.eot?#iefix);
   src:url(/wp-content/plugins/fk-order/public/fonts/f5be07f6-7c38-4bd0-b6aa-ba76266b46ce.eot?#iefix) format("eot"),
       url(/wp-content/plugins/fk-order/public/fonts/8a89228b-7dae-4a89-a41e-8d4197dc2e93.woff2) format("woff2"),
       url(/wp-content/plugins/fk-order/public/fonts/65b5050a-982f-4fc0-8754-9f8e43676182.woff) format("woff"),
       url(/wp-content/plugins/fk-order/public/fonts/393e029c-e32d-40ba-a736-904c9b3b71b2.ttf) format("truetype");
}

@font-face {
   font-family:"Clan W01 Black";
   src:url(/wp-content/plugins/fk-order/public/fonts/7bbbf181-65c2-44f4-9383-6bd23c84d34e.eot?#iefix);
   src:url(/wp-content/plugins/fk-order/public/fonts/7bbbf181-65c2-44f4-9383-6bd23c84d34e.eot?#iefix) format("eot"),
       url(/wp-content/plugins/fk-order/public/fonts/8c6b2033-5716-4f59-9269-406ed2ce22dc.woff2) format("woff2"),
       url(/wp-content/plugins/fk-order/public/fonts/6980c203-7411-4c24-9da2-3682d15fc200.woff) format("woff"),
       url(/wp-content/plugins/fk-order/public/fonts/847d7bf2-5fb4-4af8-a1b0-c7b970ec7f4a.ttf) format("truetype");
}

:root {
  --color1: #000;
  --color2: #FFF;
  --color_brand: #62ff00;
  --color_subbrand: #d3d3d3;
  --color_subbrand_2: ##222730;
  --color_subbrand_3: #6A6A6A;
  --color_subbrand_light: rgb(235, 235, 235);

  --color_success: rgb(100, 255, 3);
  --color_error: #FF3636;
  --color_warning: #FFD800;

  --font-heading: "Clan W01 Black", sans-serif;
  --font-text: "Clan W01 Bold", sans-serif;

  --header-height: 3rem;
  --header-height-m: 3rem;
  --header-height-l: 4rem;

}

@custom-media --small(min-width: 32em);

.fk-order {
  color: ##222730;
  color: var(--color_subbrand_2);
  font-family: "Clan W01 Bold", sans-serif;
  font-family: var(--font-text)

}

.fk-order p {
    color: inherit;
  }

.fk-order .order-form__progress {
    border-bottom: solid 1px #ccc;
    padding: 2em;
  }

.fk-order .order-form__content {
    max-width: 51em;
    margin: auto;
  }

.fk-order .order-form__success {
    padding: 4em 2em;
    text-align: center;
    background: #62ff00;
    background: var(--color_brand);
  }

.fk-order .emoji {
    font-size: 4em;
    padding-bottom: 1em;
    display: inline-block;

  }

.fk-order .order-form__nav {
    width: 100%;
    text-align: center;
    padding: 2em;

  }

.fk-order .btn {
    display: inline-block;
    font-size: 1.125em;
    color: #000;
    color: var(--color1);
    background-color: #62ff00;
    background-color: var(--color_brand);
    padding: .75em 1.5em;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    margin: 0 .25em;
    border: solid 1px #62ff00;
    border: solid 1px var(--color_brand);
    font-family: inherit
  }

.fk-order .btn:hover,
    .fk-order .btn:focus {
      transform: scale(1.04);
      transition: all .25s ease-out;
      outline: none;
    }

.fk-order .btn:active {
      transform: scale(.99);
      transition: all .25s ease-out;

    }

.fk-order .btn--ghost {
    background: none;
    color: #000;
    color: var(--color1);
    border-color: #d3d3d3;
    border-color: var(--color_subbrand);
  }

.fk-order .input {
    border: 0;
    font-size: 1.25em;
    border-bottom: solid 1px #ccc;
    margin-bottom: 1.5em;
    padding: .25em;
    font-family: inherit;
    margin-right: .5em
  }

.fk-order .input::-webkit-input-placeholder {
      color: rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.2);

    }

.fk-order .input::-moz-placeholder {
      color: rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.2);

    }

.fk-order .input:-ms-input-placeholder {
      color: rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.2);

    }

.fk-order .input::-ms-input-placeholder {
      color: rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.2);

    }

.fk-order .input::placeholder {
      color: rgba(0, 0, 0, 0.2);
      color: rgba(0, 0, 0, 0.2);

    }

.fk-order .input:focus {
    outline: 0;
    border-color: #62ff00;
    border-color: var(--color_brand);
  }

.fk-order .input--text {
    padding: .5em;
  }

.fk-order .input--textarea {
    width: 100%;
    resize: none;
    overflow: auto;

  }

.fk-order .input--small {
    width: 4em;

  }

.fk-order .input__suffix {
    margin-right: .5em;
    opacity: .5;

  }

.fk-order .step {
    margin: 4em 0 2em 0;
    padding: 2em 0 2em 4em;
    border-left: .25em solid #62ff00;
    border-left: .25em solid var(--color_brand);
    display: flex;
    flex-direction: column;

  }

.fk-order .stepnav {
    max-width: 40em;
    margin: 0 auto 2em auto;
    position: relative
  }

.fk-order .stepnav:after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: .5em;
      top: 50%;
      margin-top: -.25em;
      left: 0;
      background: #d3d3d3;
      background: var(--color_subbrand);
      z-index: 10;

    }

.fk-order .stepnav__progress {
    display: block;
    position: absolute;
    height: .5em;
    top: 50%;
    margin-top: -.25em;
    left: 0;
    background: #62ff00;
    background: var(--color_brand);
    z-index: 20;
    transition: width .25s ease-out;

  }

.fk-order .stepnav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;

  }

.fk-order .stepnav__item {
    text-align: center;
    //background: var(--color_1);
    position: relative;
    z-index: 90;
    border-radius: 50%;
    background: #d3d3d3;
    background: var(--color_subbrand)
  }

.fk-order .stepnav__item.active {
      background: #62ff00;
      background: var(--color_brand);
      transition: all .5s ease-out;

    }

.fk-order .stepnav__icon {
    padding: .25em;
    vertical-align: top;
    border-radius: 50%;
    max-width: 3.5em;
    padding: .75em;

  }

.fk-order .stepnav__title {
    display: block;
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: .5em;
    transform: translateX(-50%);

  }

.fk-order .title {
    font-size: 1.8125em;
    color: #000;
    color: var(--color1);
    margin-bottom: .5em;
    padding: 0;
    position: relative;
    font-family: "Clan W01 Black", sans-serif;
    font-family: var(--font-heading)
  }

.fk-order .title:before {
      content: '';
      position: absolute;
      right: 100%;
      top: 50%;
      width: 1em;
      margin-right: 1.75em;
      height: .125em;
      background: #62ff00;
      background: var(--color_brand);

    }

.fk-order .upload__list {
    list-style: none;
    margin: 0 0 1em 0;
    padding: 0;
  }

.fk-order .upload__item {
    background: #62ff00;
    padding: 2em;
  }

.fk-order .fieldset {
    border: 0;
    margin: 2em 0;
    display: block;

  }

.fk-order .fieldset__legend {
    position: relative;
    float:left;
    width: 100%;

  }

.fk-order .fieldset__desc {
    color: #6A6A6A;
    color: var(--color_subbrand_3);
    margin-bottom: 2em;
  }

.fk-order .radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 2em 0;
    width: 100%;

  }

.fk-order .radio {
    background: none;
    width: 14em;
    min-height: 14em;
    display: block;
    //height: 10em;
    cursor: pointer;
    margin-right: 1em;
    margin-bottom: 1em;
    text-align: center;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #d3d3d3;
    border: solid 1px var(--color_subbrand);
    transition: all .25s ease-out
  }

.fk-order .radio:hover {
      transform: scale(1.05);
      transition: all .25s ease-out;
    }

.fk-order .radio:active {
      transform: scale(.99);
      transition: all .125s ease-out;
    }

.fk-order .radio__input {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px
  }

.fk-order .radio__input:checked + .radio {
        background: #62ff00;
        background: var(--color_brand);
        color: #000;
        color: var(--color1);
        border-color: #62ff00;
        border-color: var(--color_brand);
        transition: all .25s ease-in

      }

.fk-order .radio__input:checked + .radio:hover {
          transform: scale(1);
        }

.fk-order .radio__input.is-invalid + .radio {
        border-color: #FF3636;
        border-color: var(--color_error);

      }

.fk-order .error {
    background: #FF3636;
    background: var(--color_error);
    color: #FFF;
    color: var(--color2);

  }

.fk-order .radio__title {
    width: 100%;
    display: block;
  }

.fk-order .radio__inner {
    padding: 1em;
    display: block;
    width: 100%;

  }

.fk-order .radio__icon {
    width: 50%;
    margin-bottom: .5em;

  }

.fk-order .dropzone {
    width: 100%;
    padding: 5em 2em 4em 2em;
    border: dashed 2px #d3d3d3;
    border: dashed 2px var(--color_subbrand);
    text-align: center;
  }

.fk-order .bc__inner {
    padding: 2em;
    display: block;
  }

.fk-order .bccard {
    position: relative;
    display: inline-block;
    margin-top: 2em;
  }

.fk-order .bccard__body {
    position: relative;
    white-space:pre;
    overflow: hidden;
    border: solid 1px #62ff00;
    border: solid 1px var(--color_brand);
    background-color: rgba(98, 255, 0, 0.1);
    background-color: rgba(98, 255, 0, 0.1);
    transition: all .5s ease-out;

  }

.fk-order .bccard__ruler {
    position: absolute;
    background: #000;
    background: var(--color1)
  }

.fk-order .bccard__ruler:after,
    .fk-order .bccard__ruler:before {
    	border: solid transparent;
    	content: " ";
    	height: 0;
    	width: 0;
    	position: absolute;
    	pointer-events: none;
    	border-color: rgba(136, 183, 213, 0);
    	border-bottom-color: #000;
    	border-bottom-color: var(--color1);
    	border-width: 6px;

    }

.fk-order .bccard__ruler--x {
    height: 2px;
    width: 100%;
    top: 100%;
    margin-top: 1em

  }

.fk-order .bccard__ruler--x:after {
      bottom: 0;
      margin-bottom: -5px;
    	left: 100%;
      transform: rotate(90deg);

    }

.fk-order .bccard__ruler--x:before {
      bottom: 0;
      margin-bottom: -5px;
      margin-left: -6px;
    	left: 0;
      transform: rotate(-90deg);

    }

.fk-order .bccard__ruler--y {
    width: 2px;
    height: 100%;
    bottom: 0;
    left: 100%;
    margin-left: 1em

  }

.fk-order .bccard__ruler--y:after {
      margin-left: -5px;
      margin-top: -6px;

    }

.fk-order .bccard__ruler--y:before {
      bottom: 0;
      margin-left: -5px;
      margin-bottom: -6px;
      transform: rotate(-180deg);

    }