@import url(https://fast.fonts.net/t/1.css?apiType=css&projectid=aead45ef-003c-4cc3-8d04-18c5a822c940);
@font-face {
  font-family: "HelveticaNeueW02-45Ligh";
  src: url(d57caf27bb4785f7706241b11fddd1e4.eot?#iefix);
  src: url(d57caf27bb4785f7706241b11fddd1e4.eot?#iefix) format("eot"), url(7b745463db013c663282663237738889.woff2) format("woff2"), url(071c48540fd727a032c53ce511eea442.woff) format("woff"), url(f18a0ab360b205e1e37e3f6997af156e.ttf) format("truetype"), url(422c7c40cfe4bb8fab6fe00b8de102a9.svg#48d599a6-92b5-4d43-a4ac-8959f6971853) format("svg"); }

body {
  background: #333333;
  font-family: "HelveticaNeueW02-65Medi" sans-serif;
  font-weight: 300; }

.content {
  background: #fafafa;
  display: block;
  min-height: 600px;
  padding: 100px 0;
  position: relative;
  text-align: center;
  z-index: 1; }

p {
  font-family: "HelveticaNeueW02-45Ligh" sans-serif; }

p a {
  color: inherit;
  border-bottom: solid 1px;
  transition: all 0.3s ease-out;
  text-decoration: none; }

p a:hover {
  color: inherit;
  text-decoration: none;
  border-bottom: solid 3px; }

.header {
  background: #ffffff;
  height: fit-content;
  min-height: 55px;
  padding: 0 8px;
  position: fixed;
  width: 100%;
  z-index: 99;
  border-bottom: solid 3px #f2f2f2; }

.header .container,
.header .row {
  height: 100%; }

.by-line a {
  color: #6d6d6d;
  margin-left: 8px;
  font-size: 12px;
  vertical-align: bottom; }

.btn {
  background: #ebad00;
  color: #ffffff !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease-out; }

.btn:hover {
  background: #c77412; }

.footer {
  background: #333333;
  color: #ffffff;
  padding: 24px;
  position: relative;
  z-index: 1;
  border-top: solid 3px #444444; }

.thankful-text {
  margin-bottom: 24px; }

.what-we-are-thankful-for {
  text-align: center;
  color: #cccccc;
  font-size: 24px;
  padding: 48px 0;
  width: 100%; }

.api-badge {
  background: #6d6d6d;
  border-radius: 4px;
  height: 55px;
  transition: all 0.3s ease-out; }

.api-badge .logo-box {
  background: #ffffff;
  border-radius: 4px;
  height: 55px;
  width: 55px; }

.api-badge-text {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.25;
  padding: 8px 16px 4px 8px; }

.api-badge:hover {
  text-decoration: none;
  background: #000000; }

.form {
  position: relative;
  z-index: 1; }

h1 {
  font-size: 42px;
  line-height: 1;
  font-weight: 500; }

.ampersand {
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
  text-align: center; }

.inspire-btn {
  align-items: center;
  background: #ebad00;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  border: none;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  outline: none;
  position: relative;
  transition: background 0.3s ease-out;
  width: 48px; }

.inspire-btn:hover {
  background: #c77412; }

.btn-tip {
  color: #ffffff;
  font-weight: 500;
  padding: 0 8px; }

@media only screen and (min-width: 768px) {
  .no-result .btn-tip,
  .inspire-btn:hover .btn-tip {
    visibility: visible;
    opacity: 1;
    bottom: 120%; }
  .btn-tip {
    background: #ebad00;
    width: 200px;
    display: block;
    position: absolute;
    bottom: 100%;
    padding: 8px;
    border-radius: 4px;
    visibility: hidden;
    transition: all 0.3s ease-out;
    opacity: 0;
    z-index: 2; }
  .btn-tip:after {
    content: "";
    position: absolute;
    border-width: 8px;
    border-style: solid;
    border-color: #ebad00 transparent transparent transparent;
    left: 50%;
    bottom: -16px;
    margin-left: -8px; } }

.thankful-input {
  background: none;
  border: none;
  border-bottom: solid 5px;
  font-size: 42px;
  font-weight: 500;
  line-height: 1;
  outline: none;
  text-align: center;
  text-transform: capitalize;
  width: 100%; }

.thankful-input.no-result {
  border-bottom: solid 5px #963b18;
  color: #963b18; }

input::placeholder {
  color: #f2f2f2; }

.icon-choice-container {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-top: 32px;
  padding: 0; }

.loading-choices {
  text-align: center;
  width: 100%; }

.loading-choices {
  background: #f2f2f2;
  border-radius: 15%;
  flex-grow: 0;
  height: 56px;
  padding: 4px;
  transition: all 0.3s ease-out;
  width: 56px; }

.icon-choice {
  background: #ffffff;
  border-radius: 4px;
  border: solid 3px transparent;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  flex-grow: 0;
  height: 56px;
  padding: 4px;
  transition: all 0.3s ease-out;
  width: 56px; }

.icon-choice.selected-icon {
  border: solid 3px #ebad00; }

.icon-choice:hover {
  border: solid 3px #ebad00;
  transform: scale(2); }

.canvas-container {
  height: 292px;
  left: 5px;
  margin: 24px auto;
  overflow: hidden;
  position: relative;
  width: 550px; }

#canvas {
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
  position: relative;
  transform-origin: top left;
  transform: scale(0.5);
  z-index: 1; }

.share-btn {
  color: #ffffff;
  max-width: 540px;
  width: 100%; }

.share-container {
  position: relative;
  z-index: 1; }

.share-image {
  background: #ffffff;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
  display: block;
  margin: auto; }

.share-image-loading {
  background: #ffffff;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
  display: block;
  height: 282px;
  margin: auto;
  position: relative;
  width: 540px;
  z-index: 1; }

.button-container {
  margin: 24px 12px; }

.download-btn {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 4px;
  box-shadow: none; }

.leaf-container {
  height: 100%;
  left: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1; }

.falling-leaf {
  animation-duration: 12s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  bottom: 120%;
  transform: translateX(calc(50vw - 30px));
  position: absolute; }

.falling-leaf img {
  height: 60px;
  position: relative; }

@keyframes fall1 {
  0% {
    bottom: 120%;
    left: 0%; }
  25% {
    bottom: 50%;
    left: 20%; }
  50% {
    bottom: 20%;
    left: -2%; }
  100% {
    bottom: -5%;
    left: 0%; } }

@keyframes fall2 {
  0% {
    bottom: 120%;
    left: 0%; }
  25% {
    bottom: 60%;
    left: 10%; }
  50% {
    bottom: 33%;
    left: -8%; }
  100% {
    bottom: -5%;
    left: 0%; } }

@keyframes fall3 {
  0% {
    bottom: 120%;
    left: 0%; }
  25% {
    bottom: 44%;
    left: -12%; }
  50% {
    bottom: 18%;
    left: 4%; }
  100% {
    bottom: -5%;
    left: 0%; } }

@media only screen and (max-width: 768px) {
  h1,
  .thankful-input {
    font-size: 36px; }
  .ampersand {
    width: 100%; }
  .icon-choice-container {
    margin-top: 8px; }
  .canvas-container {
    height: 182px;
    width: 350px; }
  #canvas {
    transform: scale(0.29); }
  .inspire-btn {
    width: 100%; }
  .share-image,
  .share-image-loading {
    width: 350px;
    height: 182px; } }

.patient-pup {
  bottom: -155px;
  visibility: hidden;
  position: absolute;
  right: 16%;
  z-index: -2;
  animation-name: pup-up;
  animation-delay: 120s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  transition: all 0.3s ease-out; }

@keyframes pup-up {
  0% {
    bottom: -155px;
    visibility: visible; }
  25% {
    bottom: -50px;
    visibility: visible; }
  50% {
    bottom: -80px;
    visibility: visible; }
  100% {
    bottom: -10px;
    visibility: visible; } }


/*# sourceMappingURL=main.739ec24eb271c9c0292b.css.map*/