*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where([hidden]:not([hidden="until-found"])) {
  display: none !important;
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
  tab-size: 2;
}

@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}

:where(body) {
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

:where(button) {
  all: unset;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(textarea) {
  resize: vertical;
  resize: block;
}

:where(button, label, select, summary, [role="button"], [role="option"]) {
  cursor: pointer;
}

:where(:disabled) {
  cursor: not-allowed;
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
}

:where(a) {
  color: inherit;
  text-underline-offset: 0.2ex;
}

:where(ul, ol) {
  list-style: none;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, picture, svg, video) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
  text-wrap: balance;
}

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

:where(:focus-visible) {
  outline: 3px solid CanvasText;
  box-shadow: 0 0 0 5px Canvas;
  outline-offset: 1px;
}

:where(:focus-visible, :target) {
  scroll-margin-block: 8vh;
}

:where(.visually-hidden:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pc-view {
  display: block;
  background-color: #fff;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .pc-view {
    display: none;
  }
}

.pc-view iframe {
  width: 77%;
  margin: 0 auto;
  margin-top: 100px;
}

.campaign {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}


.sp-view {
  display: none;
}

@media screen and (max-width: 600px) {
  .sp-view {
    display: block;
    background-color: #fff;
  }
}

.sp-view iframe {
  width: 100%;
  margin: 50px 0 10px 0;
}

header {
  display: table;
  width: 100%;
  margin: 0 auto;
  padding: 15px 20px;
}
@media screen and (min-width: 980px) {
  header {
    width: 980px;
    padding: 30px 0;
  }
}
header h1 {
  display: table-cell;
  width: 30%;
  vertical-align: middle;
}
@media screen and (min-width: 980px) {
  header h1 img {
    max-width: 294px;
  }
}
header address {
  text-align: right;
  display: table-cell;
  width: 70%;
  vertical-align: top;
}
@media screen and (min-width: 600px) and (max-width: 767px) {
  header address {
    padding-left: 10px;
  }
}
header address > * {
  display: block;
  float: left;
}
header address > span {
  display: none;
  width: 130px;
  text-align: left;
  margin-left: 85px;
  color: #004e2e;
  line-height: 24px;
  font-weight: bold;
}
@media screen and (min-width: 980px) {
  header address > span {
    display: block;
  }
}
header address .header-tel img,
header address .header-mail img {
  height: 50px;
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  header address .header-tel img,
  header address .header-mail img {
    height: 70px;
  }
}
@media screen and (min-width: 980px) {
  header address .header-tel img,
  header address .header-mail img {
    height: 70px;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  header address .header-tel {
    width: 279px;
  }
}
@media screen and (min-width: 980px) {
  header address .header-tel {
    width: 279px;
  }
}
header address .header-mail {
  width: 75px;
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  header address .header-mail {
    width: 175px;
  }
}
@media screen and (min-width: 980px) {
  header address .header-mail {
    width: 190px;
  }
}

@media screen and (max-width: 767px) {
  .header-tel, .header-mail {
    display: none;
  }
}

nav.global {
  display: none;
  margin: 0 auto;
}
@media screen and (min-width: 980px) {
  nav.global {
    display: block;
    width: 980px;
  }
}
nav.global ul {
  display: table;
  width: 100%;
}
nav.global ul li {
  display: table-cell;
  text-align: center;
}
nav.global ul li a {
  display: block;
  padding: 20px 0;
  font-weight: bold;
}
@media screen and (min-width: 980px) {
  nav.global ul li a {
    font-size: 18px;
  }
}

footer {
  background: #004e2e;
  color: #fff;
  text-align: center;
  padding: 50px 10px;
}

footer > a img {
  display: block; /* ブロック要素として扱う */
  margin: 0 auto; /* 左右中央揃え */
  width: 320px;
  margin-bottom: 20px;
}

footer > address {
  margin-bottom: 30px;
}

footer > div > * {
  display: block;
  margin-bottom: 20px;
}

@media screen and (min-width: 980px) {
  footer > div > * {
    display: inline-block;
  }
}

footer > div > span {
  display: none;
  border: 2px solid #fff;
  border-radius: 15px;
  padding: 10px;
  font-weight: bold;
  margin-right: 20px;
  text-align: left;
  vertical-align: text-bottom;
}

@media screen and (max-width: 768px){
  footer a img {
    display: block;
    margin: 0 auto;
  }
}


.font-serif a {
  text-decoration: none; /* 下線を消す */
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

@media screen and (min-width: 980px) {
  footer > div > span {
    display: inline-block;
  }
}

footer > div > div {
  vertical-align: text-bottom;
  margin-right: 20px;
  font-size: 14px;
}

@media screen and (min-width: 980px) {
  footer > div > div {
    text-align: left;
  }
}

footer > div > div span {
  display: block;
  line-height: 100%;
  font-size: 200%;
}

@media screen and (min-width: 980px) {
  footer > div > div span {
    font-size: 68px;
  }
}

footer > div > a {
  vertical-align: top;
}
footer > div > a img {
  width: 120px;
}

@media screen and (max-width: 600px) {
  .m20 {
    padding: 0 20px;
  }
}

.thanks-footer {
  background-color: #886200;
  padding-top: 65px;
  padding-bottom: 80px;
}

@media screen and (max-width: 600px) {
  .thanks-footer {
  }
}

.thanks-footer-wrap {
  max-width: 77%;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .thanks-footer-wrap {
    max-width: 100%;
    margin: 0 20px;
  }
}

.thanks-footer-wrap .footer-menu img {
  width: 50%;
}

@media screen and (max-width: 1200px) {
  .thanks-footer-wrap .footer-menu img {
    width: 100%;
  }
}

.thanks-footer-wrap .footer-link {
  margin-top: 55px;
  text-align: center;
}

@media screen and (max-width: 600px) {
  .thanks-footer-wrap .footer-link {
    flex-direction: column;
  }
}

.thanks-footer-wrap .footer-link a {
  display: inline-block;
  width: 65%;
}

@media screen and (max-width: 600px) {
  .thanks-footer-wrap .footer-link a {
    width: 80%;
    margin-top: 30px;
  }
}

@media screen and (max-width: 600px) {
  .m20 {
    padding: 0 20px;
  }
}

.btn {
  margin-bottom: 5rem;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdsb2JhbC5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQTtFQUdJO0VBQ0E7RUFDQTs7O0FBRUo7RUFDSTs7O0FBRUo7RUFDSTtFQUNBO0VBQ0E7OztBQUVKO0VBQ0k7SUFDSTs7O0FBR1I7RUFDSTtFQUNBO0VBQ0E7OztBQUVKO0VBQ0k7OztBQUVKO0VBQ0k7RUFDQTs7O0FBRUo7RUFDSTtFQUNBOzs7QUFFSjtFQUNJOzs7QUFFSjtFQUNJOzs7QUFFSjtFQUNJOzs7QUFFSjtFQUNJO0VBQ0E7OztBQUVKO0VBQ0k7OztBQUVKO0VBQ0k7OztBQUVKO0VBQ0k7RUFDQTs7O0FBRUo7RUFDSTs7O0FBRUo7RUFDSTtFQUNBOzs7QUFFSjtFQUNJO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7OztBQUVKO0VBQ0k7RUFDQTtFQUNBOzs7QUFFSjtFQUNJOzs7QUFFSjtFQUNJO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOzs7QUFHSjtFQUNJO0VBQ0E7RUFDQTs7QUFDQTtFQUpKO0lBS1E7SUFDQTtJQUNBO0lBQ0E7SUFDQTtJQUNBO0lBQ0E7SUFDQTs7O0FBRUo7RUFDSTtFQUNBOztBQUNBO0VBSEo7SUFJUTtJQUNBOzs7QUFHUjtFQUNJO0VBQ0E7O0FBQ0E7RUFISjtJQUlRO0lBQ0E7OztBQUdSO0VBQ0k7O0FBQ0E7RUFGSjtJQUdRO0lBQ0E7Ozs7QUFLWjtFQUNJOztBQUNBO0VBRko7SUFHUTs7OztBQUlSO0VBQ0k7RUFDQTtFQUNBOzs7QUFHSjtFQUNJOztBQUNBO0VBRko7SUFHUTtJQUNBOzs7QUFFSjtFQUNJO0VBQ0E7OztBQUlSO0VBQ0k7RUFDQTtFQUNBOztBQUNBO0VBSko7SUFLUTs7O0FBRUo7RUFDSTtFQUNBOztBQUNBO0VBSEo7SUFJUTtJQUNBOzs7QUFHQTtFQUNJOztBQUNBO0VBRko7SUFHUTs7O0FBSVo7RUFDSTtFQUNBO0VBQ0E7O0FBQ0E7RUFKSjtJQUtROzs7QUFFSjtFQUNJOztBQUNBO0VBRko7SUFHUTtJQUNBOzs7O0FBT2hCO0VBREo7SUFFUSIsImZpbGUiOiJnbG9iYWwuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiKixcbio6OmJlZm9yZSxcbio6OmFmdGVyIHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuOndoZXJlKFtoaWRkZW5dOm5vdChbaGlkZGVuPVwidW50aWwtZm91bmRcIl0pKSB7XG4gICAgZGlzcGxheTogbm9uZSAhaW1wb3J0YW50O1xufVxuOndoZXJlKGh0bWwpIHtcbiAgICAtd2Via2l0LXRleHQtc2l6ZS1hZGp1c3Q6IG5vbmU7XG4gICAgY29sb3Itc2NoZW1lOiBkYXJrIGxpZ2h0O1xuICAgIHRhYi1zaXplOiAyO1xufVxuQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiBuby1wcmVmZXJlbmNlKSB7XG4gICAgOndoZXJlKGh0bWw6Zm9jdXMtd2l0aGluKSB7XG4gICAgICAgIHNjcm9sbC1iZWhhdmlvcjogc21vb3RoO1xuICAgIH1cbn1cbjp3aGVyZShib2R5KSB7XG4gICAgbGluZS1oZWlnaHQ6IDEuNTtcbiAgICBmb250LWZhbWlseTogc3lzdGVtLXVpLCBzYW5zLXNlcmlmO1xuICAgIC13ZWJraXQtZm9udC1zbW9vdGhpbmc6IGFudGlhbGlhc2VkO1xufVxuOndoZXJlKGJ1dHRvbikge1xuICAgIGFsbDogdW5zZXQ7XG59XG46d2hlcmUoaW5wdXQsIGJ1dHRvbiwgdGV4dGFyZWEsIHNlbGVjdCkge1xuICAgIGZvbnQ6IGluaGVyaXQ7XG4gICAgY29sb3I6IGluaGVyaXQ7XG59XG46d2hlcmUodGV4dGFyZWEpIHtcbiAgICByZXNpemU6IHZlcnRpY2FsO1xuICAgIHJlc2l6ZTogYmxvY2s7XG59XG46d2hlcmUoYnV0dG9uLCBsYWJlbCwgc2VsZWN0LCBzdW1tYXJ5LCBbcm9sZT1cImJ1dHRvblwiXSwgW3JvbGU9XCJvcHRpb25cIl0pIHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG59XG46d2hlcmUoOmRpc2FibGVkKSB7XG4gICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbn1cbjp3aGVyZShsYWJlbDpoYXMoPiBpbnB1dDpkaXNhYmxlZCksIGxhYmVsOmhhcygrIGlucHV0OmRpc2FibGVkKSkge1xuICAgIGN1cnNvcjogbm90LWFsbG93ZWQ7XG59XG46d2hlcmUoYSkge1xuICAgIGNvbG9yOiBpbmhlcml0O1xuICAgIHRleHQtdW5kZXJsaW5lLW9mZnNldDogMC4yZXg7XG59XG46d2hlcmUodWwsIG9sKSB7XG4gICAgbGlzdC1zdHlsZTogbm9uZTtcbn1cbjp3aGVyZShpbWcsIHN2ZywgdmlkZW8sIGNhbnZhcywgYXVkaW8sIGlmcmFtZSwgZW1iZWQsIG9iamVjdCkge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xufVxuOndoZXJlKGltZywgcGljdHVyZSwgc3ZnLCB2aWRlbykge1xuICAgIG1heC1pbmxpbmUtc2l6ZTogMTAwJTtcbiAgICBibG9jay1zaXplOiBhdXRvO1xufVxuOndoZXJlKHAsIGgxLCBoMiwgaDMsIGg0LCBoNSwgaDYpIHtcbiAgICBvdmVyZmxvdy13cmFwOiBicmVhay13b3JkO1xufVxuOndoZXJlKGgxLCBoMiwgaDMpIHtcbiAgICBsaW5lLWhlaWdodDogY2FsYygxZW0gKyAwLjVyZW0pO1xuICAgIHRleHQtd3JhcDogYmFsYW5jZTtcbn1cbjp3aGVyZShocikge1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3JkZXItYmxvY2stc3RhcnQ6IDFweCBzb2xpZDtcbiAgICBjb2xvcjogaW5oZXJpdDtcbiAgICBibG9jay1zaXplOiAwO1xuICAgIG92ZXJmbG93OiB2aXNpYmxlO1xufVxuOndoZXJlKDpmb2N1cy12aXNpYmxlKSB7XG4gICAgb3V0bGluZTogM3B4IHNvbGlkIENhbnZhc1RleHQ7XG4gICAgYm94LXNoYWRvdzogMCAwIDAgNXB4IENhbnZhcztcbiAgICBvdXRsaW5lLW9mZnNldDogMXB4O1xufVxuOndoZXJlKDpmb2N1cy12aXNpYmxlLCA6dGFyZ2V0KSB7XG4gICAgc2Nyb2xsLW1hcmdpbi1ibG9jazogOHZoO1xufVxuOndoZXJlKC52aXN1YWxseS1oaWRkZW46bm90KDpmb2N1cy13aXRoaW4sIDphY3RpdmUpKSB7XG4gICAgY2xpcC1wYXRoOiBpbnNldCg1MCUpICFpbXBvcnRhbnQ7XG4gICAgaGVpZ2h0OiAxcHggIWltcG9ydGFudDtcbiAgICB3aWR0aDogMXB4ICFpbXBvcnRhbnQ7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbiAhaW1wb3J0YW50O1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZSAhaW1wb3J0YW50O1xuICAgIHdoaXRlLXNwYWNlOiBub3dyYXAgIWltcG9ydGFudDtcbiAgICBib3JkZXI6IDAgIWltcG9ydGFudDtcbn1cblxuLmNvbnRhY3QtbGlua3tcbiAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgYm90dG9tOiAzMHB4O1xuICAgIHJpZ2h0OiAzMHB4O1xuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6NjAwcHgpe1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgdG9wOiAwO1xuICAgICAgICBib3R0b206IHVuc2V0O1xuICAgICAgICByaWdodDogMDtcbiAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xuICAgICAgICBwYWRkaW5nOiAxNXB4IDEwcHg7XG4gICAgfVxuICAgIC5saW5rLWluZGV4e1xuICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOjYwMHB4KXtcbiAgICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiB1bnNldDtcbiAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICAgIH1cbiAgICB9XG4gICAgaW1ne1xuICAgICAgICB3aWR0aDogODBweDtcbiAgICAgICAgbWFyZ2luOiAxMHB4IDEwcHg7XG4gICAgICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6NjAwcHgpe1xuICAgICAgICAgICAgd2lkdGg6IDMycHg7XG4gICAgICAgICAgICBtYXJnaW46IDAgNXB4O1xuICAgICAgICB9XG4gICAgfVxuICAgID4gaW1ne1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOjYwMHB4KXtcbiAgICAgICAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgICAgICAgd2lkdGg6IDE4MHB4O1xuICAgICAgICB9XG4gICAgfVxufVxuXG4ucGMtdmlld3tcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOjYwMHB4KXtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICB9XG59XG5cbi5wYy12aWV3IGlmcmFtZXtcbiAgICB3aWR0aDogNzclO1xuICAgIG1hcmdpbjogMCBhdXRvO1xuICAgIG1hcmdpbi10b3A6IDEwMHB4O1xufVxuXG4uc3Atdmlld3tcbiAgICBkaXNwbGF5OiBub25lO1xuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6NjAwcHgpe1xuICAgICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcbiAgICB9XG4gICAgaWZyYW1le1xuICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgbWFyZ2luOiA1MHB4IDAgMTBweCAwO1xuICAgIH1cbn1cblxuLmZvb3RlcntcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjODg2MjAwO1xuICAgIHBhZGRpbmctdG9wOiA2NXB4O1xuICAgIHBhZGRpbmctYm90dG9tOiA4MHB4O1xuICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6NjAwcHgpe1xuICAgICAgICBtYXJnaW4tdG9wOiA3MHB4O1xuICAgIH1cbiAgICAmLXdyYXB7XG4gICAgICAgIG1heC13aWR0aDogNzclO1xuICAgICAgICBtYXJnaW46IDAgYXV0bztcbiAgICAgICAgQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDo2MDBweCl7XG4gICAgICAgICAgICBtYXgtd2lkdGg6IDEwMCU7XG4gICAgICAgICAgICBtYXJnaW46IDAgMjBweDtcbiAgICAgICAgfVxuICAgICAgICAuZm9vdGVyLW1lbnV7XG4gICAgICAgICAgICBpbWd7XG4gICAgICAgICAgICAgICAgd2lkdGg6IDUwJTtcbiAgICAgICAgICAgICAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOjEyMDBweCl7XG4gICAgICAgICAgICAgICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgICAuZm9vdGVyLWxpbmt7XG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xuICAgICAgICAgICAgbWFyZ2luLXRvcDogNTVweDtcbiAgICAgICAgICAgIEBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6NjAwcHgpe1xuICAgICAgICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICBhe1xuICAgICAgICAgICAgICAgIHdpZHRoOiBjYWxjKCgxMDAlIC8gMikgLSAyMHB4KTtcbiAgICAgICAgICAgICAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOjYwMHB4KXtcbiAgICAgICAgICAgICAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgICAgICAgICAgICAgIG1hcmdpbi10b3A6IDMwcHg7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxufVxuLm0yMHtcbiAgICBAbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOjYwMHB4KXtcbiAgICAgICAgcGFkZGluZzogMCAyMHB4O1xuICAgIH1cbn0iXX0= */

/* pure-drawer */
.pure-container .pure-drawer > div {
  padding: 20px 10px 0;
  color: #fff;
  height: 60px;
}
@media screen and (min-width: 600px) and (max-width: 767px) {
  .pure-container .pure-drawer > div {
    height: 70px;
    padding: 25px 10px 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .pure-container .pure-drawer > div {
    height: 107px;
    padding: 40px 10px 0;
  }
}
.pure-container .pure-drawer ul {
  list-style-type: none;
  background: #fff;
}
.pure-container .pure-drawer ul li {
  border-bottom: 1px solid #004e2e;
}
.pure-container .pure-drawer ul li a {
  display: block;
  padding: 10px;
  color: #004e2e;
}
@media screen and (max-width: 599px) {
  .pure-container .pure-toggle-label {
    height: 35px;
  }
  .pure-container .pure-toggle-label .pure-toggle-icon:before {
    transform: translate3d(-50%, -15px, 0);
    -webkit-transform: translate3d(-50%, -15px, 0);
  }
  .pure-container .pure-toggle-label .pure-toggle-icon:after {
    transform: translate3d(-50%, 8px, 0);
    -webkit-transform: translate3d(-50%, 10px, 0);
  }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
  .pure-container .pure-toggle-label {
    height: 50px;
    top: 25px;
  }
  .pure-container .pure-toggle-label .pure-toggle-icon:before {
    transform: translate3d(-50%, -15px, 0);
    -webkit-transform: translate3d(-50%, -20px, 0);
  }
  .pure-container .pure-toggle-label .pure-toggle-icon:after {
    transform: translate3d(-50%, 8px, 0);
    -webkit-transform: translate3d(-50%, 14px, 0);
  }
}
@media screen and (min-width: 980px) {
  .pure-container {
    display: none;
  }
}

@media screen and (max-width: 979px) {
  /**************
      ## Animation ##
      **************/
  /************
      ## Toggler ##
      ************/
  /***********
      ## Drawer ##
      ***********/
  /***********
      ## Pusher ##
      ***********/
  /*******************
      ## Pusher Overlay ##
      *******************/
  /**************
      ## Variables ##
      **************/
  /*************
      ## Required ##
      *************/
  html,
  body {
    height: 100%;
  }

  body {
    margin: 0;
  }

  /**************
      ## Container ##
      **************/
  .pure-container {
    position: relative;
    /*height: 100%;*/
    -webkit-overflow-scrolling: touch;
  }

  /************
      ## Toggler ##
      ************/
  .pure-toggle {
    left: -9999px;
    position: absolute;
    top: -9999px;
  }

  .pure-toggle:focus ~ .pure-toggle-label {
    border-color: #221815;
    color: #221815;
  }

  .pure-toggle-label {
    display: none;
    cursor: pointer;
    display: block;
    position: fixed;
    top: 10px;
    z-index: 99;
    color: #221815;
    width: 50px;
    height: 50px;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    /*border: 2px solid #5d809d;*/
    border-radius: 50%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .pure-toggle-label:hover {
    border-color: #221815;
    color: #221815;
  }

  .pure-toggle-label:hover .pure-toggle-icon,
  .pure-toggle-label:hover .pure-toggle-icon:before,
  .pure-toggle-label:hover .pure-toggle-icon:after {
    background-color: #221815;
  }

  .pure-toggle-label:active {
    -webkit-tap-highlight-color: transparent;
  }

  .pure-toggle-label .pure-toggle-icon,
  .pure-toggle-label .pure-toggle-icon:before,
  .pure-toggle-label .pure-toggle-icon:after {
    position: absolute;
    top: 52%;
    left: 50%;
    height: 6px;
    width: 50px;
    cursor: pointer;
    background: #221815;
    display: block;
    content: "";
    border-radius: 3px;
    -webkit-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
  }

  .pure-toggle-label .pure-toggle-icon {
    transform: translate3d(-50%, -2px, 0);
    -webkit-transform: translate3d(-50%, -2px, 0);
  }

  .pure-toggle-label .pure-toggle-icon:before {
    transform: translate3d(-50%, -12px, 0);
    -webkit-transform: translate3d(-50%, -20px, 0);
  }

  .pure-toggle-label .pure-toggle-icon:after {
    transform: translate3d(-50%, 8px, 0);
    -webkit-transform: translate3d(-50%, 15px, 0);
  }

  .pure-toggle-label[data-toggle-label="left"] {
    left: 15px;
    right: auto;
  }

  .pure-toggle-label[data-toggle-label="right"] {
    right: 10px;
    left: auto;
  }

  .pure-toggle-label[data-toggle-label="top"] {
    left: 50%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  .pure-toggle[data-toggle="left"]:checked
    ~ .pure-toggle-label:not([data-toggle-label="left"]),
  .pure-toggle[data-toggle="right"]:checked
    ~ .pure-toggle-label:not([data-toggle-label="right"]),
  .pure-toggle[data-toggle="top"]:checked
    ~ .pure-toggle-label:not([data-toggle-label="top"]) {
    opacity: 0;
    z-index: -1;
  }

  .pure-toggle[data-toggle="left"]:checked
    ~ .pure-toggle-label[data-toggle-label="left"],
  .pure-toggle[data-toggle="right"]:checked
    ~ .pure-toggle-label[data-toggle-label="right"],
  .pure-toggle[data-toggle="top"]:checked
    ~ .pure-toggle-label[data-toggle-label="top"] {
    border-color: #221815;
    color: #221815;
  }

  .pure-toggle[data-toggle="left"]:checked
    ~ .pure-toggle-label[data-toggle-label="left"]
    .pure-toggle-icon,
  .pure-toggle[data-toggle="right"]:checked
    ~ .pure-toggle-label[data-toggle-label="right"]
    .pure-toggle-icon,
  .pure-toggle[data-toggle="top"]:checked
    ~ .pure-toggle-label[data-toggle-label="top"]
    .pure-toggle-icon {
    background-color: transparent;
  }

  .pure-toggle[data-toggle="left"]:checked
    ~ .pure-toggle-label[data-toggle-label="left"]
    .pure-toggle-icon:before,
  .pure-toggle[data-toggle="left"]:checked
    ~ .pure-toggle-label[data-toggle-label="left"]
    .pure-toggle-icon:after,
  .pure-toggle[data-toggle="right"]:checked
    ~ .pure-toggle-label[data-toggle-label="right"]
    .pure-toggle-icon:before,
  .pure-toggle[data-toggle="right"]:checked
    ~ .pure-toggle-label[data-toggle-label="right"]
    .pure-toggle-icon:after,
  .pure-toggle[data-toggle="top"]:checked
    ~ .pure-toggle-label[data-toggle-label="top"]
    .pure-toggle-icon:before,
  .pure-toggle[data-toggle="top"]:checked
    ~ .pure-toggle-label[data-toggle-label="top"]
    .pure-toggle-icon:after {
    top: 0;
  }

  .pure-toggle[data-toggle="left"]:checked
    ~ .pure-toggle-label[data-toggle-label="left"]
    .pure-toggle-icon:before,
  .pure-toggle[data-toggle="right"]:checked
    ~ .pure-toggle-label[data-toggle-label="right"]
    .pure-toggle-icon:before,
  .pure-toggle[data-toggle="top"]:checked
    ~ .pure-toggle-label[data-toggle-label="top"]
    .pure-toggle-icon:before {
    transform: translateX(-50%) rotate(45deg);
    -webkit-transform: translateX(-50%) rotate(45deg);
  }

  .pure-toggle[data-toggle="left"]:checked
    ~ .pure-toggle-label[data-toggle-label="left"]
    .pure-toggle-icon:after,
  .pure-toggle[data-toggle="right"]:checked
    ~ .pure-toggle-label[data-toggle-label="right"]
    .pure-toggle-icon:after,
  .pure-toggle[data-toggle="top"]:checked
    ~ .pure-toggle-label[data-toggle-label="top"]
    .pure-toggle-icon:after {
    transform: translateX(-50%) translateY(-10px) rotate(-45deg);
    -webkit-transform: translateX(-50%) translateY(-10px) rotate(-45deg);
    top: 10px;
  }

  /***********
      ## Drawer ##
      ***********/
  .pure-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    visibility: hidden;
    background-color: #004e2e;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    width: 100%;
  }

  @media only screen and (min-width: 40.063em) {
    .pure-drawer {
      width: 300px;
    }
  }

  @media only screen and (min-width: 64.063em) {
    .pure-drawer {
      width: 300px;
    }
  }

  .pure-drawer[data-position="right"] {
    left: auto;
    right: 0;
  }

  .pure-drawer[data-position="top"] {
    height: 100%;
    width: 100%;
  }

  @media only screen and (min-width: 40.063em) {
    .pure-drawer[data-position="top"] {
      height: 100%;
    }
  }

  @media only screen and (min-width: 64.063em) {
    .pure-drawer[data-position="top"] {
      height: 100px;
    }
  }

  /*********************
      ## Pusher Container ##
      *********************/
  .pure-pusher-container {
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  /***********
      ## Pusher ##
      ***********/
  .pure-pusher {
    position: relative;
    height: 100%;
    overflow-y: auto;
    left: 0;
    z-index: 2;
    background-color: #fff;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }

  /*******************
      ## Pusher Overlay ##
      *******************/
  .pure-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
  }

  .pure-toggle[data-toggle="left"]:checked
    ~ .pure-overlay[data-overlay="left"] {
    left: 100%;
  }

  @media only screen and (min-width: 40.063em) {
    .pure-toggle[data-toggle="left"]:checked
      ~ .pure-overlay[data-overlay="left"] {
      left: 300px;
    }
  }

  @media only screen and (min-width: 64.063em) {
    .pure-toggle[data-toggle="left"]:checked
      ~ .pure-overlay[data-overlay="left"] {
      left: 300px;
    }
  }

  .pure-toggle[data-toggle="right"]:checked
    ~ .pure-overlay[data-overlay="right"] {
    right: 100%;
  }

  @media only screen and (min-width: 40.063em) {
    .pure-toggle[data-toggle="right"]:checked
      ~ .pure-overlay[data-overlay="right"] {
      right: 300px;
    }
  }

  @media only screen and (min-width: 64.063em) {
    .pure-toggle[data-toggle="right"]:checked
      ~ .pure-overlay[data-overlay="right"] {
      right: 300px;
    }
  }

  .pure-toggle[data-toggle="top"]:checked ~ .pure-overlay[data-overlay="top"] {
    top: 100%;
  }

  @media only screen and (min-width: 40.063em) {
    .pure-toggle[data-toggle="top"]:checked
      ~ .pure-overlay[data-overlay="top"] {
      top: 100%;
    }
  }

  @media only screen and (min-width: 64.063em) {
    .pure-toggle[data-toggle="top"]:checked
      ~ .pure-overlay[data-overlay="top"] {
      top: 100px;
    }
  }

  .pure-toggle[data-toggle="left"]:checked ~ .pure-overlay[data-overlay="left"],
  .pure-toggle[data-toggle="right"]:checked
    ~ .pure-overlay[data-overlay="right"],
  .pure-toggle[data-toggle="top"]:checked ~ .pure-overlay[data-overlay="top"] {
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 2;
  }

  /********************************
      ## Fallback for older browsers ##
      ********************************/
  .no-csstransforms3d
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    left: 100%;
  }

  @media only screen and (min-width: 40.063em) {
    .no-csstransforms3d
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      left: 300px;
    }
  }

  @media only screen and (min-width: 64.063em) {
    .no-csstransforms3d
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      left: 300px;
    }
  }

  .no-csstransforms3d
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    left: -100%;
  }

  @media only screen and (min-width: 40.063em) {
    .no-csstransforms3d
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      left: -300px;
    }
  }

  @media only screen and (min-width: 64.063em) {
    .no-csstransforms3d
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      left: -300px;
    }
  }

  .no-csstransforms3d
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    top: 100%;
  }

  @media only screen and (min-width: 40.063em) {
    .no-csstransforms3d
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      top: 100%;
    }
  }

  @media only screen and (min-width: 64.063em) {
    .no-csstransforms3d
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      top: 100px;
    }
  }

  /*****************************
      ## Effect - Slide in on top ##
      *****************************/
  /* DRAWER */
  [data-effect="pure-effect-slide"] .pure-drawer {
    z-index: 3;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-slide"] .pure-drawer[data-position="left"] {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  [data-effect="pure-effect-slide"] .pure-drawer[data-position="right"] {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  [data-effect="pure-effect-slide"] .pure-drawer[data-position="top"] {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  [data-effect="pure-effect-slide"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-slide"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-slide"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* OVERLAY */
  [data-effect="pure-effect-slide"] .pure-overlay {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: 250ms;
    transition-delay: 250ms;
  }

  /********************
      ## Effect - Reveal ##
      ********************/
  /* DRAWER */
  [data-effect="pure-effect-reveal"] .pure-drawer {
    visibility: visible;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  /* PUSHER */
  [data-effect="pure-effect-reveal"] .pure-pusher-container .pure-pusher {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-reveal"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-reveal"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-reveal"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  [data-effect="pure-effect-reveal"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-reveal"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-reveal"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  [data-effect="pure-effect-reveal"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-reveal"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-reveal"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100px, 0);
      transform: translate3d(0, 100px, 0);
    }
  }

  /* OVERLAY */
  [data-effect="pure-effect-reveal"] .pure-overlay {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: 250ms;
    transition-delay: 250ms;
  }

  /*************************
      ## Effect - Slide along ##
      *************************/
  /* DRAWER */
  [data-effect="pure-effect-slideAlong"] .pure-drawer {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-slideAlong"] .pure-drawer[data-position="left"] {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  [data-effect="pure-effect-slideAlong"] .pure-drawer[data-position="right"] {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }

  [data-effect="pure-effect-slideAlong"] .pure-drawer[data-position="top"] {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }

  [data-effect="pure-effect-slideAlong"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-slideAlong"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-slideAlong"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* PUSHER */
  [data-effect="pure-effect-slideAlong"] .pure-pusher-container .pure-pusher {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-slideAlong"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-slideAlong"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-slideAlong"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  [data-effect="pure-effect-slideAlong"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-slideAlong"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-slideAlong"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  [data-effect="pure-effect-slideAlong"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-slideAlong"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-slideAlong"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100px, 0);
      transform: translate3d(0, 100px, 0);
    }
  }

  /* OVERLAY */
  [data-effect="pure-effect-slideAlong"] .pure-overlay {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: 250ms;
    transition-delay: 250ms;
  }

  /*******************************
      ## Effect - Reverse slide out ##
      *******************************/
  /* DRAWER */
  [data-effect="pure-effect-reverseSlide"] .pure-drawer {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-reverseSlide"] .pure-drawer[data-position="left"] {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }

  [data-effect="pure-effect-reverseSlide"] .pure-drawer[data-position="right"] {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  [data-effect="pure-effect-reverseSlide"] .pure-drawer[data-position="top"] {
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  [data-effect="pure-effect-reverseSlide"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-reverseSlide"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-reverseSlide"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* PUSHER */
  [data-effect="pure-effect-reverseSlide"] .pure-pusher-container .pure-pusher {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-reverseSlide"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-reverseSlide"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-reverseSlide"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  [data-effect="pure-effect-reverseSlide"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-reverseSlide"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-reverseSlide"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  [data-effect="pure-effect-reverseSlide"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-reverseSlide"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-reverseSlide"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100px, 0);
      transform: translate3d(0, 100px, 0);
    }
  }

  /* OVERLAY */
  [data-effect="pure-effect-reverseSlide"] .pure-overlay {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  /*********************************
      ## Effect 5 - Scale Down Pusher ##
      *********************************/
  /* DRAWER */
  [data-effect="pure-effect-scaleDown"] .pure-drawer {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-scaleDown"] .pure-drawer[data-position="left"] {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  [data-effect="pure-effect-scaleDown"] .pure-drawer[data-position="right"] {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  [data-effect="pure-effect-scaleDown"] .pure-drawer[data-position="top"] {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  [data-effect="pure-effect-scaleDown"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-scaleDown"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-scaleDown"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* PUSHER CONTAINER */
  [data-effect="pure-effect-scaleDown"] .pure-pusher-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
  }

  /* PUSHER */
  /* Needed for Firefox */
  [data-effect="pure-effect-scaleDown"] .pure-pusher-container .pure-pusher {
    z-index: 1;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-scaleDown"]
    .pure-toggle:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(0, 0, -300px);
    transform: translate3d(0, 0, -300px);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-scaleDown"]
      .pure-toggle:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 0, -300px);
      transform: translate3d(0, 0, -300px);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-scaleDown"]
      .pure-toggle:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 0, -300px);
      transform: translate3d(0, 0, -300px);
    }
  }

  /* OVERLAY */
  [data-effect="pure-effect-scaleDown"] .pure-overlay {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: 250ms;
    transition-delay: 250ms;
  }

  /*************************
      ## Effect - Scale Up ##
      *************************/
  /* CONTAINER */
  [data-effect="pure-effect-scaleUp"] {
    -webkit-perspective: 1500px;
    perspective: 1500px;
  }

  [data-effect="pure-effect-scaleUp"][data-position="left"] {
    -webkit-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
  }

  [data-effect="pure-effect-scaleUp"][data-position="right"] {
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
  }

  [data-effect="pure-effect-scaleUp"][data-position="top"] {
    -webkit-perspective-origin: 50% 0;
    perspective-origin: 50% 0;
  }

  /* DRAWER */
  [data-effect="pure-effect-scaleUp"] .pure-drawer {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-scaleUp"] .pure-drawer[data-position="left"] {
    -webkit-transform: translate3d(0, 0, -100%);
    transform: translate3d(0, 0, -100%);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-scaleUp"] .pure-drawer[data-position="left"] {
      -webkit-transform: translate3d(0, 0, -300px);
      transform: translate3d(0, 0, -300px);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-scaleUp"] .pure-drawer[data-position="left"] {
      -webkit-transform: translate3d(0, 0, -300px);
      transform: translate3d(0, 0, -300px);
    }
  }

  [data-effect="pure-effect-scaleUp"] .pure-drawer[data-position="right"] {
    -webkit-transform: translate3d(100%, 0, -100%);
    transform: translate3d(100%, 0, -100%);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-scaleUp"] .pure-drawer[data-position="right"] {
      -webkit-transform: translate3d(300px, 0, -300px);
      transform: translate3d(300px, 0, -300px);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-scaleUp"] .pure-drawer[data-position="right"] {
      -webkit-transform: translate3d(300px, 0, -300px);
      transform: translate3d(300px, 0, -300px);
    }
  }

  [data-effect="pure-effect-scaleUp"] .pure-drawer[data-position="top"] {
    -webkit-transform: translate3d(0, 0, -100%);
    transform: translate3d(0, 0, -100%);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-scaleUp"] .pure-drawer[data-position="top"] {
      -webkit-transform: translate3d(0, 0, -100%);
      transform: translate3d(0, 0, -100%);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-scaleUp"] .pure-drawer[data-position="top"] {
      -webkit-transform: translate3d(0, 0, -100px);
      transform: translate3d(0, 0, -100px);
    }
  }

  [data-effect="pure-effect-scaleUp"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-scaleUp"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-scaleUp"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* PUSHER */
  [data-effect="pure-effect-scaleUp"] .pure-pusher-container .pure-pusher {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-scaleUp"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-scaleUp"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-scaleUp"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  [data-effect="pure-effect-scaleUp"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-scaleUp"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-scaleUp"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  [data-effect="pure-effect-scaleUp"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-scaleUp"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-scaleUp"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100px, 0);
      transform: translate3d(0, 100px, 0);
    }
  }

  /* OVERLAY */
  [data-effect="pure-effect-scaleUp"] .pure-overlay {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: 250ms;
    transition-delay: 250ms;
  }

  /****************************************
      ## Effect - Scale and Rotate Pusher ##
      ****************************************/
  /* DRAWER */
  [data-effect="pure-effect-scaleRotate"] .pure-drawer {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-scaleRotate"] .pure-drawer[data-position="left"] {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  [data-effect="pure-effect-scaleRotate"] .pure-drawer[data-position="right"] {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  [data-effect="pure-effect-scaleRotate"] .pure-drawer[data-position="top"] {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  [data-effect="pure-effect-scaleRotate"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-scaleRotate"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-scaleRotate"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* PUSHER CONTAINER */
  [data-effect="pure-effect-scaleRotate"] .pure-pusher-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
  }

  /* PUSHER */
  [data-effect="pure-effect-scaleRotate"] .pure-pusher-container .pure-pusher {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-scaleRotate"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
    transform: translate3d(100px, 0, -600px) rotateY(-20deg);
  }

  [data-effect="pure-effect-scaleRotate"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(100px, 0, -600px) rotateY(20deg);
    transform: translate3d(100px, 0, -600px) rotateY(20deg);
  }

  [data-effect="pure-effect-scaleRotate"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(0, 0, -100px) rotateX(20deg);
    transform: translate3d(0, 0, -100px) rotateX(20deg);
  }

  /* OVERLAY */
  [data-effect="pure-effect-scaleRotate"] .pure-overlay {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: 250ms;
    transition-delay: 250ms;
  }

  /**************************
      ## Effect - Fall in ##
      **************************/
  /* DRAWER */
  [data-effect="pure-effect-fall"] .pure-drawer {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-fall"] .pure-drawer[data-position="left"],
  [data-effect="pure-effect-fall"] .pure-drawer[data-position="right"] {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  [data-effect="pure-effect-fall"] .pure-drawer[data-position="top"] {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  [data-effect="pure-effect-fall"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-fall"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-fall"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* PUSHER */
  [data-effect="pure-effect-fall"] .pure-pusher-container .pure-pusher {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-fall"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-fall"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-fall"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  [data-effect="pure-effect-fall"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-fall"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-fall"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  [data-effect="pure-effect-fall"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-fall"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-fall"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100px, 0);
      transform: translate3d(0, 100px, 0);
    }
  }

  /* OVERLAY */
  [data-effect="pure-effect-fall"] .pure-overlay {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: 250ms;
    transition-delay: 250ms;
  }

  /*********************
      ## Effect - Push ##
      *********************/
  /* DRAWER */
  [data-effect="pure-effect-push"] .pure-drawer {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-push"] .pure-drawer[data-position="left"] {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  [data-effect="pure-effect-push"] .pure-drawer[data-position="right"] {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  [data-effect="pure-effect-push"] .pure-drawer[data-position="top"] {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  [data-effect="pure-effect-push"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-push"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-push"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  /* PUSHER */
  [data-effect="pure-effect-push"] .pure-pusher-container .pure-pusher {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
  }

  [data-effect="pure-effect-push"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-push"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-push"]
      .pure-toggle[data-toggle="left"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
    }
  }

  [data-effect="pure-effect-push"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-push"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-push"]
      .pure-toggle[data-toggle="right"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(-300px, 0, 0);
      transform: translate3d(-300px, 0, 0);
    }
  }

  [data-effect="pure-effect-push"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-pusher-container
    .pure-pusher {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  @media only screen and (min-width: 40.063em) {
    [data-effect="pure-effect-push"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }

  @media only screen and (min-width: 64.063em) {
    [data-effect="pure-effect-push"]
      .pure-toggle[data-toggle="top"]:checked
      ~ .pure-pusher-container
      .pure-pusher {
      -webkit-transform: translate3d(0, 100px, 0);
      transform: translate3d(0, 100px, 0);
    }
  }

  /* OVERLAY */
  [data-effect="pure-effect-push"] .pure-overlay {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    -webkit-transition-delay: 250ms;
    transition-delay: 250ms;
  }

  /********************
      ## Effect - Bounce ##
      ********************/
  /* DRAWER */
  [data-effect="pure-effect-bounce"] .pure-drawer {
    z-index: 3;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  [data-effect="pure-effect-bounce"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-bounce"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-bounce"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
  }

  /* OVERLAY */
  [data-effect="pure-effect-bounce"] .pure-overlay {
    -webkit-transition-duration: 1000ms;
    transition-duration: 1000ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
  }

  /******************
      ## Effect - Fade ##
      ******************/
  /* DRAWER */
  [data-effect="pure-effect-fade"] .pure-drawer {
    z-index: 3;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  [data-effect="pure-effect-fade"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-fade"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-fade"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
  }

  /* OVERLAY */
  [data-effect="pure-effect-fade"] .pure-overlay {
    -webkit-transition-duration: 1000ms;
    transition-duration: 1000ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
  }

  /*******************
      ## Effect - FlipX ##
      *******************/
  /* DRAWER */
  [data-effect="pure-effect-flipX"] .pure-drawer {
    z-index: 3;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  [data-effect="pure-effect-flipX"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-flipX"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-flipX"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
  }

  /* OVERLAY */
  [data-effect="pure-effect-flipX"] .pure-overlay {
    -webkit-transition-duration: 1000ms;
    transition-duration: 1000ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
  }

  /*******************
      ## Effect - FlipY ##
      *******************/
  /* DRAWER */
  [data-effect="pure-effect-flipY"] .pure-drawer {
    z-index: 3;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  [data-effect="pure-effect-flipY"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-flipY"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-flipY"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
  }

  /* OVERLAY */
  [data-effect="pure-effect-flipY"] .pure-overlay {
    -webkit-transition-duration: 1000ms;
    transition-duration: 1000ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
  }

  /******************
      ## Effect - Zoom ##
      ******************/
  /* DRAWER */
  [data-effect="pure-effect-zoom"] .pure-drawer {
    z-index: 3;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  [data-effect="pure-effect-zoom"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-zoom"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-zoom"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    visibility: visible;
  }

  /* OVERLAY */
  [data-effect="pure-effect-zoom"] .pure-overlay {
    -webkit-transition-duration: 1000ms;
    transition-duration: 1000ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
  }

  /*!
      Animate.css - http://daneden.me/animate
      Licensed under the MIT license - http://opensource.org/licenses/MIT
      
      Copyright (c) 2014 Daniel Eden
      */
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }

  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }

  @-webkit-keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
      -webkit-transition-timing-function: cubic-bezier(
        0.755,
        0.05,
        0.855,
        0.06
      );
      transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0);
    }
    70% {
      -webkit-transition-timing-function: cubic-bezier(
        0.755,
        0.05,
        0.855,
        0.06
      );
      transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0);
    }
    90% {
      -webkit-transform: translate3d(0, -4px, 0);
      transform: translate3d(0, -4px, 0);
    }
  }

  @keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
      -webkit-transition-timing-function: cubic-bezier(
        0.755,
        0.05,
        0.855,
        0.06
      );
      transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -30px, 0);
      transform: translate3d(0, -30px, 0);
    }
    70% {
      -webkit-transition-timing-function: cubic-bezier(
        0.755,
        0.05,
        0.855,
        0.06
      );
      transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      -webkit-transform: translate3d(0, -15px, 0);
      transform: translate3d(0, -15px, 0);
    }
    90% {
      -webkit-transform: translate3d(0, -4px, 0);
      transform: translate3d(0, -4px, 0);
    }
  }

  .bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  @-webkit-keyframes flash {
    0%,
    50%,
    100% {
      opacity: 1;
    }
    25%,
    75% {
      opacity: 0;
    }
  }

  @keyframes flash {
    0%,
    50%,
    100% {
      opacity: 1;
    }
    25%,
    75% {
      opacity: 0;
    }
  }

  .flash {
    -webkit-animation-name: flash;
    animation-name: flash;
  }

  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  @-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    50% {
      -webkit-transform: scale3d(1.05, 1.05, 1.05);
      transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes pulse {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    50% {
      -webkit-transform: scale3d(1.05, 1.05, 1.05);
      transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  .pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
  }

  @-webkit-keyframes rubberBand {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes rubberBand {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  .rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
  }

  @-webkit-keyframes shake {
    0%,
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  @keyframes shake {
    0%,
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }

  @-webkit-keyframes swing {
    20% {
      -webkit-transform: rotate3d(0, 0, 1, 15deg);
      transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
      -webkit-transform: rotate3d(0, 0, 1, -10deg);
      transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
      -webkit-transform: rotate3d(0, 0, 1, 5deg);
      transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
      -webkit-transform: rotate3d(0, 0, 1, -5deg);
      transform: rotate3d(0, 0, 1, -5deg);
    }
    100% {
      -webkit-transform: rotate3d(0, 0, 1, 0deg);
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }

  @keyframes swing {
    20% {
      -webkit-transform: rotate3d(0, 0, 1, 15deg);
      transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
      -webkit-transform: rotate3d(0, 0, 1, -10deg);
      transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
      -webkit-transform: rotate3d(0, 0, 1, 5deg);
      transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
      -webkit-transform: rotate3d(0, 0, 1, -5deg);
      transform: rotate3d(0, 0, 1, -5deg);
    }
    100% {
      -webkit-transform: rotate3d(0, 0, 1, 0deg);
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }

  .swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
  }

  @-webkit-keyframes tada {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes tada {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
    10%,
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  .tada {
    -webkit-animation-name: tada;
    animation-name: tada;
  }

  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  @-webkit-keyframes wobble {
    0% {
      -webkit-transform: none;
      transform: none;
    }
    15% {
      -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
      -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
      -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
      -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
      -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes wobble {
    0% {
      -webkit-transform: none;
      transform: none;
    }
    15% {
      -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
      -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
      -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
      -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
      -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  .wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
  }

  @-webkit-keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  @keyframes bounceIn {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

  .bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
  }

  @-webkit-keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }
    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes bounceInDown {
    0%,
    60%,
    75%,
    90%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -3000px, 0);
      transform: translate3d(0, -3000px, 0);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, 25px, 0);
      transform: translate3d(0, 25px, 0);
    }
    75% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
    90% {
      -webkit-transform: translate3d(0, 5px, 0);
      transform: translate3d(0, 5px, 0);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  .bounceInDown,
  [data-effect="pure-effect-bounce"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
  }

  @-webkit-keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-3000px, 0, 0);
      transform: translate3d(-3000px, 0, 0);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(25px, 0, 0);
      transform: translate3d(25px, 0, 0);
    }
    75% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
    90% {
      -webkit-transform: translate3d(5px, 0, 0);
      transform: translate3d(5px, 0, 0);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes bounceInLeft {
    0%,
    60%,
    75%,
    90%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-3000px, 0, 0);
      transform: translate3d(-3000px, 0, 0);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(25px, 0, 0);
      transform: translate3d(25px, 0, 0);
    }
    75% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
    90% {
      -webkit-transform: translate3d(5px, 0, 0);
      transform: translate3d(5px, 0, 0);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  .bounceInLeft,
  [data-effect="pure-effect-bounce"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"] {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
  }

  @-webkit-keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(3000px, 0, 0);
      transform: translate3d(3000px, 0, 0);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(-25px, 0, 0);
      transform: translate3d(-25px, 0, 0);
    }
    75% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
    90% {
      -webkit-transform: translate3d(-5px, 0, 0);
      transform: translate3d(-5px, 0, 0);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes bounceInRight {
    0%,
    60%,
    75%,
    90%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(3000px, 0, 0);
      transform: translate3d(3000px, 0, 0);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(-25px, 0, 0);
      transform: translate3d(-25px, 0, 0);
    }
    75% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
    90% {
      -webkit-transform: translate3d(-5px, 0, 0);
      transform: translate3d(-5px, 0, 0);
    }
    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  .bounceInRight,
  [data-effect="pure-effect-bounce"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"] {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
  }

  @-webkit-keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 3000px, 0);
      transform: translate3d(0, 3000px, 0);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
    }
    75% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
    }
    90% {
      -webkit-transform: translate3d(0, -5px, 0);
      transform: translate3d(0, -5px, 0);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes bounceInUp {
    0%,
    60%,
    75%,
    90%,
    100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 3000px, 0);
      transform: translate3d(0, 3000px, 0);
    }
    60% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
    }
    75% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
    }
    90% {
      -webkit-transform: translate3d(0, -5px, 0);
      transform: translate3d(0, -5px, 0);
    }
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
  }

  @-webkit-keyframes bounceOut {
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
    50%,
    55% {
      opacity: 1;
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  }

  @keyframes bounceOut {
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
    50%,
    55% {
      opacity: 1;
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  }

  .bounceOut {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
  }

  @-webkit-keyframes bounceOutDown {
    20% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
    }
    40%,
    45% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
  }

  @keyframes bounceOutDown {
    20% {
      -webkit-transform: translate3d(0, 10px, 0);
      transform: translate3d(0, 10px, 0);
    }
    40%,
    45% {
      opacity: 1;
      -webkit-transform: translate3d(0, -20px, 0);
      transform: translate3d(0, -20px, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
  }

  .bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
  }

  @-webkit-keyframes bounceOutLeft {
    20% {
      opacity: 1;
      -webkit-transform: translate3d(20px, 0, 0);
      transform: translate3d(20px, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);
    }
  }

  @keyframes bounceOutLeft {
    20% {
      opacity: 1;
      -webkit-transform: translate3d(20px, 0, 0);
      transform: translate3d(20px, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);
    }
  }

  .bounceOutLeft,
  [data-effect="pure-effect-bounce"] .pure-drawer[data-position="left"] {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
  }

  @-webkit-keyframes bounceOutRight {
    20% {
      opacity: 1;
      -webkit-transform: translate3d(-20px, 0, 0);
      transform: translate3d(-20px, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);
    }
  }

  @keyframes bounceOutRight {
    20% {
      opacity: 1;
      -webkit-transform: translate3d(-20px, 0, 0);
      transform: translate3d(-20px, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);
    }
  }

  .bounceOutRight,
  [data-effect="pure-effect-bounce"] .pure-drawer[data-position="right"] {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
  }

  @-webkit-keyframes bounceOutUp {
    20% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
    40%,
    45% {
      opacity: 1;
      -webkit-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
  }

  @keyframes bounceOutUp {
    20% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
    40%,
    45% {
      opacity: 1;
      -webkit-transform: translate3d(0, 20px, 0);
      transform: translate3d(0, 20px, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
  }

  .bounceOutUp,
  [data-effect="pure-effect-bounce"] .pure-drawer[data-position="top"] {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }

  @-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .fadeInDown,
  [data-effect="pure-effect-fade"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
  }

  @-webkit-keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInDownBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
  }

  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .fadeInLeft,
  [data-effect="pure-effect-fade"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"] {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
  }

  @-webkit-keyframes fadeInLeftBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInLeftBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
  }

  @-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .fadeInRight,
  [data-effect="pure-effect-fade"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"] {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
  }

  @-webkit-keyframes fadeInRightBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInRightBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
  }

  @-webkit-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }

  @-webkit-keyframes fadeInUpBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes fadeInUpBig {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
  }

  @-webkit-keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
  }

  @-webkit-keyframes fadeOutDown {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }

  @keyframes fadeOutDown {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }

  .fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
  }

  @-webkit-keyframes fadeOutDownBig {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
  }

  @keyframes fadeOutDownBig {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
  }

  .fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
  }

  @-webkit-keyframes fadeOutLeft {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }

  @keyframes fadeOutLeft {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  }

  .fadeOutLeft,
  [data-effect="pure-effect-fade"] .pure-drawer[data-position="left"] {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
  }

  @-webkit-keyframes fadeOutLeftBig {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);
    }
  }

  @keyframes fadeOutLeftBig {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(-2000px, 0, 0);
      transform: translate3d(-2000px, 0, 0);
    }
  }

  .fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
  }

  @-webkit-keyframes fadeOutRight {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  }

  @keyframes fadeOutRight {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  }

  .fadeOutRight,
  [data-effect="pure-effect-fade"] .pure-drawer[data-position="right"] {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
  }

  @-webkit-keyframes fadeOutRightBig {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);
    }
  }

  @keyframes fadeOutRightBig {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(2000px, 0, 0);
      transform: translate3d(2000px, 0, 0);
    }
  }

  .fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
  }

  @-webkit-keyframes fadeOutUp {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  }

  @keyframes fadeOutUp {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  }

  .fadeOutUp,
  [data-effect="pure-effect-fade"] .pure-drawer[data-position="top"] {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
  }

  @-webkit-keyframes fadeOutUpBig {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
  }

  @keyframes fadeOutUpBig {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, -2000px, 0);
      transform: translate3d(0, -2000px, 0);
    }
  }

  .fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
  }

  @-webkit-keyframes flip {
    0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    40% {
      -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -190deg);
      transform: perspective(400px) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -190deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    50% {
      -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -170deg);
      transform: perspective(400px) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -170deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    80% {
      -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
      transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  }

  @keyframes flip {
    0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    40% {
      -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -190deg);
      transform: perspective(400px) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -190deg);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    50% {
      -webkit-transform: perspective(400px) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -170deg);
      transform: perspective(400px) translate3d(0, 0, 150px)
        rotate3d(0, 1, 0, -170deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    80% {
      -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
      transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  }

  .animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
  }

  @-webkit-keyframes flipInX {
    0% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0;
    }
    40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
    }
    60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }
    80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
  }

  @keyframes flipInX {
    0% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0;
    }
    40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
    }
    60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }
    80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
  }

  .flipInX,
  [data-effect="pure-effect-flipX"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-flipX"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-flipX"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
  }

  @-webkit-keyframes flipInY {
    0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0;
    }
    40% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
    }
    60% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      opacity: 1;
    }
    80% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
  }

  @keyframes flipInY {
    0% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      opacity: 0;
    }
    40% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
    }
    60% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
      opacity: 1;
    }
    80% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }
    100% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
  }

  .flipInY,
  [data-effect="pure-effect-flipY"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"],
  [data-effect="pure-effect-flipY"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"],
  [data-effect="pure-effect-flipY"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
  }

  @-webkit-keyframes flipOutX {
    0% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
    30% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      opacity: 0;
    }
  }

  @keyframes flipOutX {
    0% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
    30% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      opacity: 0;
    }
  }

  .flipOutX,
  [data-effect="pure-effect-flipX"] .pure-drawer[data-position="left"],
  [data-effect="pure-effect-flipX"] .pure-drawer[data-position="right"],
  [data-effect="pure-effect-flipX"] .pure-drawer[data-position="top"] {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
  }

  @-webkit-keyframes flipOutY {
    0% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
    30% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      opacity: 0;
    }
  }

  @keyframes flipOutY {
    0% {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
    30% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
      opacity: 0;
    }
  }

  .flipOutY,
  [data-effect="pure-effect-flipY"] .pure-drawer[data-position="left"],
  [data-effect="pure-effect-flipY"] .pure-drawer[data-position="right"],
  [data-effect="pure-effect-flipY"] .pure-drawer[data-position="top"] {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
  }

  @-webkit-keyframes lightSpeedIn {
    0% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
      transform: translate3d(100%, 0, 0) skewX(-30deg);
      opacity: 0;
    }
    60% {
      -webkit-transform: skewX(20deg);
      transform: skewX(20deg);
      opacity: 1;
    }
    80% {
      -webkit-transform: skewX(-5deg);
      transform: skewX(-5deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  @keyframes lightSpeedIn {
    0% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
      transform: translate3d(100%, 0, 0) skewX(-30deg);
      opacity: 0;
    }
    60% {
      -webkit-transform: skewX(20deg);
      transform: skewX(20deg);
      opacity: 1;
    }
    80% {
      -webkit-transform: skewX(-5deg);
      transform: skewX(-5deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  .lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  @-webkit-keyframes lightSpeedOut {
    0% {
      opacity: 1;
    }
    100% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
      transform: translate3d(100%, 0, 0) skewX(30deg);
      opacity: 0;
    }
  }

  @keyframes lightSpeedOut {
    0% {
      opacity: 1;
    }
    100% {
      -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
      transform: translate3d(100%, 0, 0) skewX(30deg);
      opacity: 0;
    }
  }

  .lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  @-webkit-keyframes rotateIn {
    0% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, -200deg);
      transform: rotate3d(0, 0, 1, -200deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  @keyframes rotateIn {
    0% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, -200deg);
      transform: rotate3d(0, 0, 1, -200deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  .rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
  }

  @-webkit-keyframes rotateInDownLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  @keyframes rotateInDownLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  .rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
  }

  @-webkit-keyframes rotateInDownRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  @keyframes rotateInDownRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  .rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
  }

  @-webkit-keyframes rotateInUpLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  @keyframes rotateInUpLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  .rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
  }

  @-webkit-keyframes rotateInUpRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, -90deg);
      transform: rotate3d(0, 0, 1, -90deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  @keyframes rotateInUpRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, -90deg);
      transform: rotate3d(0, 0, 1, -90deg);
      opacity: 0;
    }
    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: none;
      transform: none;
      opacity: 1;
    }
  }

  .rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
  }

  @-webkit-keyframes rotateOut {
    0% {
      -webkit-transform-origin: center;
      transform-origin: center;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, 200deg);
      transform: rotate3d(0, 0, 1, 200deg);
      opacity: 0;
    }
  }

  @keyframes rotateOut {
    0% {
      -webkit-transform-origin: center;
      transform-origin: center;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, 200deg);
      transform: rotate3d(0, 0, 1, 200deg);
      opacity: 0;
    }
  }

  .rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
  }

  @-webkit-keyframes rotateOutDownLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }
  }

  @keyframes rotateOutDownLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, 45deg);
      transform: rotate3d(0, 0, 1, 45deg);
      opacity: 0;
    }
  }

  .rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
  }

  @-webkit-keyframes rotateOutDownRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }

  @keyframes rotateOutDownRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }

  .rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
  }

  @-webkit-keyframes rotateOutUpLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }

  @keyframes rotateOutUpLeft {
    0% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: left bottom;
      transform-origin: left bottom;
      -webkit-transform: rotate3d(0, 0, 1, -45deg);
      transform: rotate3d(0, 0, 1, -45deg);
      opacity: 0;
    }
  }

  .rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
  }

  @-webkit-keyframes rotateOutUpRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, 90deg);
      transform: rotate3d(0, 0, 1, 90deg);
      opacity: 0;
    }
  }

  @keyframes rotateOutUpRight {
    0% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      opacity: 1;
    }
    100% {
      -webkit-transform-origin: right bottom;
      transform-origin: right bottom;
      -webkit-transform: rotate3d(0, 0, 1, 90deg);
      transform: rotate3d(0, 0, 1, 90deg);
      opacity: 0;
    }
  }

  .rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
  }

  @-webkit-keyframes hinge {
    0% {
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }
    20%,
    60% {
      -webkit-transform: rotate3d(0, 0, 1, 80deg);
      transform: rotate3d(0, 0, 1, 80deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }
    40%,
    80% {
      -webkit-transform: rotate3d(0, 0, 1, 60deg);
      transform: rotate3d(0, 0, 1, 60deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      opacity: 1;
    }
    100% {
      -webkit-transform: translate3d(0, 700px, 0);
      transform: translate3d(0, 700px, 0);
      opacity: 0;
    }
  }

  @keyframes hinge {
    0% {
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }
    20%,
    60% {
      -webkit-transform: rotate3d(0, 0, 1, 80deg);
      transform: rotate3d(0, 0, 1, 80deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
    }
    40%,
    80% {
      -webkit-transform: rotate3d(0, 0, 1, 60deg);
      transform: rotate3d(0, 0, 1, 60deg);
      -webkit-transform-origin: top left;
      transform-origin: top left;
      -webkit-animation-timing-function: ease-in-out;
      animation-timing-function: ease-in-out;
      opacity: 1;
    }
    100% {
      -webkit-transform: translate3d(0, 700px, 0);
      transform: translate3d(0, 700px, 0);
      opacity: 0;
    }
  }

  .hinge {
    -webkit-animation-name: hinge;
    animation-name: hinge;
  }

  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  @-webkit-keyframes rollIn {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  @keyframes rollIn {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
      transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    }
    100% {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }

  .rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
  }

  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  @-webkit-keyframes rollOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
  }

  @keyframes rollOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
      transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    }
  }

  .rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
  }

  @-webkit-keyframes zoomIn {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
      opacity: 1;
    }
  }

  @keyframes zoomIn {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
      opacity: 1;
    }
  }

  .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
  }

  @-webkit-keyframes zoomInDown {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  @keyframes zoomInDown {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  .zoomInDown,
  [data-effect="pure-effect-zoom"]
    .pure-toggle[data-toggle="top"]:checked
    ~ .pure-drawer[data-position="top"] {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown;
  }

  @-webkit-keyframes zoomInLeft {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  @keyframes zoomInLeft {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  .zoomInLeft,
  [data-effect="pure-effect-zoom"]
    .pure-toggle[data-toggle="left"]:checked
    ~ .pure-drawer[data-position="left"] {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft;
  }

  @-webkit-keyframes zoomInRight {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  @keyframes zoomInRight {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  .zoomInRight,
  [data-effect="pure-effect-zoom"]
    .pure-toggle[data-toggle="right"]:checked
    ~ .pure-drawer[data-position="right"] {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
  }

  @-webkit-keyframes zoomInUp {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  @keyframes zoomInUp {
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  .zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp;
  }

  @-webkit-keyframes zoomOut {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes zoomOut {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
    100% {
      opacity: 0;
    }
  }

  .zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
  }

  @-webkit-keyframes zoomOutDown {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  @keyframes zoomOutDown {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  .zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
  }

  @-webkit-keyframes zoomOutLeft {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
      transform: scale(0.1) translate3d(-2000px, 0, 0);
      -webkit-transform-origin: left center;
      transform-origin: left center;
    }
  }

  @keyframes zoomOutLeft {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
      transform: scale(0.1) translate3d(-2000px, 0, 0);
      -webkit-transform-origin: left center;
      transform-origin: left center;
    }
  }

  .zoomOutLeft,
  [data-effect="pure-effect-zoom"] .pure-drawer[data-position="left"] {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
  }

  @-webkit-keyframes zoomOutRight {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
      transform: scale(0.1) translate3d(2000px, 0, 0);
      -webkit-transform-origin: right center;
      transform-origin: right center;
    }
  }

  @keyframes zoomOutRight {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
      transform: scale(0.1) translate3d(2000px, 0, 0);
      -webkit-transform-origin: right center;
      transform-origin: right center;
    }
  }

  .zoomOutRight,
  [data-effect="pure-effect-zoom"] .pure-drawer[data-position="right"] {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
  }

  @-webkit-keyframes zoomOutUp {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  @keyframes zoomOutUp {
    40% {
      opacity: 1;
      -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    100% {
      opacity: 0;
      -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
      transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
  }

  .zoomOutUp,
  [data-effect="pure-effect-zoom"] .pure-drawer[data-position="top"] {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
  }

  @-webkit-keyframes slideInDown {
    0% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      visibility: visible;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @keyframes slideInDown {
    0% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      visibility: visible;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
  }

  @-webkit-keyframes slideInLeft {
    0% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      visibility: visible;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes slideInLeft {
    0% {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      visibility: visible;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
  }

  @-webkit-keyframes slideInRight {
    0% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
      visibility: visible;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    0% {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
      visibility: visible;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  .slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
  }

  @-webkit-keyframes slideInUp {
    0% {
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
      visibility: visible;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @keyframes slideInUp {
    0% {
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
      visibility: visible;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
  }

  @-webkit-keyframes slideOutDown {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }
  }

  @keyframes slideOutDown {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
    }
  }

  .slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown;
  }

  @-webkit-keyframes slideOutLeft {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @keyframes slideOutLeft {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  .slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
  }

  @-webkit-keyframes slideOutRight {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }

  @keyframes slideOutRight {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
  }

  .slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
  }

  @-webkit-keyframes slideOutUp {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
  }

  @keyframes slideOutUp {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    100% {
      visibility: hidden;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }
  }

  .slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
  }
}

.thanks-container {
  max-width: 600px;
  margin: 50px auto;
  padding: 40px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-align: center;
}

.thanks-container h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.thanks-container p {
  margin-bottom: 30px;
}

.back-to-top {
  display: inline-block;
  padding: 10px 20px;
  background-color: #004e2e;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}

.back-to-top:hover {
  background-color: #07ed8d;
}

form p {
  font-size: 1.2rem;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.form-header {
  text-align: center;
  margin: 20px auto;
}

.form-header h1 {
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/* フォーム全体のスタイル */
.h-adr {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* フォーム内のテーブル */
.h-adr table {
  width: 100%;
  border-collapse: collapse;
}

.h-adr table tr td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.h-adr table tr td:last-child {
  padding-right: 0;
}

/* 必須項目のスタイル */
.h-adr span {
  color: #ffff;
  font-weight: bold;
}

/* 入力フィールドのスタイル */
.h-adr input[type="text"], .h-adr select {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.h-adr textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
}

/* 送信ボタンのスタイル */
.h-adr button[type="submit"] {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #004e2e;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.h-adr button[type="submit"]:hover {
  background-color: #07ed8d;

}

.required {
  margin: 10px;
  display: inline-block;
  padding: 2px 5px;
  background-color: #ff0000;
  color: #fff;
  border-radius: 5px;
  font-weight: bold;
  font-size: 12px;
}

.footer-items {
margin-top: 10px;
}

.footer-item {
  margin-right: 5px;
  text-decoration: none;
  color: #ffff;
}