@font-face {
  font-family: Din-alternate;
  src: url("../fonts/DIN Alternate Bold.otf"); }
@font-face {
  font-family: BigNoodleTitling;
  src: url("../fonts/big_noodle_titling.ttf"); }
@font-face {
  font-family: BuiltTitlingBold;
  src: url("../fonts/built titling bd.ttf"); }
body {
  font-size: 18px;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  body > .background {
    height: 100vh;
    width: 100%;
    position: fixed;
    right: 0;
    background-image: url(../background.jpg);
    background-attachment: fixed;
    background-position: right;
    background-size: cover; }
    @media all and (max-width: 950px) {
      body > .background {
        background-position: center; } }

#navigation {
  z-index: 10;
  background-image: url("../circle.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  float: left;
  width: 100%;
  -webkit-transition: all .85s ease;
  -o-transition: all .85s ease;
  transition: all .85s ease; }
  #navigation .inner {
    padding-bottom: 0;
    padding-top: 75px;
    margin: 0;
    background-repeat: repeat-y;
    background-position: right;
    background-size: 2px 15px;
    text-align: center; }
    #navigation .inner a.target {
      font-family: BuiltTitlingBold, sans-serif;
      color: #fff;
      text-decoration: none;
      font-size: 65px;
      display: block;
      padding: 8px 40px; }
      #navigation .inner a.target:last-of-type {
        padding-bottom: 15px; }
      #navigation .inner a.target img {
        -webkit-transition: all .1s;
        -o-transition: all .1s;
        transition: all .1s; }
      #navigation .inner a.target:hover img {
        opacity: .2;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%); }
    #navigation .inner a.mail {
      font-family: "Times New Roman Bold", serif;
      font-weight: bold;
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      margin-bottom: 15px; }
      @media all and (max-width: 950px) and (min-width: 480px) {
        #navigation .inner a.mail {
          font-size: 12px; } }
  #navigation img {
    max-width: 100%; }

#main {
  background-image: url("../circle.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 501px;
  width: 502px;
  max-width: 100%;
  -webkit-transition: all .85s ease;
  -o-transition: all .85s ease;
  transition: all .85s ease; }
  #main .fold {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    font-family: "Times New Roman", Times, serif;
    -webkit-transition: opacity .5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
    color: #fff;
    overflow: hidden;
    font-size: 21px; }
    #main .fold h1 {
      font-family: BuiltTitlingBold, sans-serif;
      margin: 0;
      margin-top: 15px; }
    #main .fold .inner {
      padding: 30px 70px;
      text-align: center; }
      #main .fold .inner .back-button {
        text-align: center;
        cursor: pointer;
        padding: 0;
        font-size: 40px;
        position: relative;
        font-family: "Din-alternate", sans-serif; }
    #main .fold#about p {
      font-family: BigNoodleTitling, sans-serif; }
    #main .fold#retailer ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      margin-top: 10px; }
      #main .fold#retailer ul li {
        font-family: "bebas-neue", sans-serif;
        padding-bottom: 20px; }
        #main .fold#retailer ul li a {
          text-decoration: none;
          color: #fff;
          font-size: 30px; }
        #main .fold#retailer ul li span {
          display: block;
          font-size: 22px; }
    #main .fold#buy form .half {
      width: 48%;
      float: left; }
      #main .fold#buy form .half.second {
        float: right; }
    #main .fold#buy form input, #main .fold#buy form textarea {
      display: block;
      width: 100%;
      padding: 10px;
      border: 0;
      border-radius: 4px;
      background-color: #7e8b54;
      color: #fff;
      font-family: "bebas-neue", sans-serif;
      outline-color: #7e8b54;
      margin-bottom: 10px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      max-width: 100%; }
      #main .fold#buy form input.unfilled, #main .fold#buy form textarea.unfilled {
        color: rgba(255, 255, 255, 0.7); }
    #main .fold#buy form input[type=submit] {
      width: auto;
      font-size: 1em;
      padding: 5px 15px;
      font-family: "bebas-neue", sans-serif;
      background-color: #4a5232;
      display: block;
      margin: 10px auto;
      font-weight: normal; }
    #main .fold#buy form input[type=number] {
      display: inline-block;
      width: 40px; }
    #main .fold#buy form ::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.7); }
    #main .fold#buy form ::-moz-placeholder {
      color: rgba(255, 255, 255, 0.7); }
    #main .fold#buy form :-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.7); }
    #main .fold#buy form :-moz-placeholder {
      color: rgba(255, 255, 255, 0.7); }
    #main .fold#buy .response-container {
      margin-top: 10px; }
      #main .fold#buy .response-container div {
        display: none; }
        #main .fold#buy .response-container div p {
          color: #fff;
          padding: 0;
          font-size: 14px;
          margin: 0;
          margin-bottom: 70px; }

@media all and (max-width: 480px) {
  .site-inner #navigation .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0; }
    .site-inner #navigation .inner a.target {
      font-size: 40px; }
  .site-inner #main .fold h1 {
    margin-top: 0;
    font-size: 25px; }
  .site-inner #main .fold .inner {
    padding: 60px;
    padding-top: 90px; }
    .site-inner #main .fold .inner .back-button {
      font-size: 20px; }
  .site-inner #main .fold#buy h1 {
    margin-bottom: 15px; }
  .site-inner #main .fold#buy form input, .site-inner #main .fold#buy form textarea {
    padding: 5px; }
  .site-inner #main .fold .separator {
    display: none; }
  .site-inner #main .fold ul li, .site-inner #main .fold p {
    font-size: 19px; } }
@media all and (max-width: 320px) {
  .site-inner #navigation .inner a.target {
    font-size: 36px; }
  .site-inner #main .fold .inner {
    padding-top: 110px; }
  .site-inner #main .fold#retailer ul li a, .site-inner #main .fold#retailer p {
    font-size: 19px; }
  .site-inner #main .fold#retailer ul li span {
    font-size: 14px; }
  .site-inner #main .fold#about p {
    font-size: 14px; }
  .site-inner #main .fold#buy {
    font-size: 14px; }
    .site-inner #main .fold#buy textarea {
      height: 60px; } }

/* entire container, keeps perspective */
.flip-container {
  position: absolute;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  height: 501px;
  width: 502px;
  top: 50%;
  left: 50%;
  max-width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

/* flip the pane */
.flipper.off-screen {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); }

.front, .back {
  height: 100%; }

/* flip speed goes here */
.flipper {
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 100%;
  width: 100%;
  position: relative; }

/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg); }

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); }

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