body {
  background-size: cover;
  font-family: "Montserrat", sans-serif;
  color: #0a4a98;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FAFAFA url(/assets/img/bg.png) no-repeat fixed center;
  box-sizing: border-box;
  flex-direction: column;
  padding: 0;
  font-size: 16px;
  margin: 0;
  width: 100%;
  height: 100%; }
  @media screen and (max-width: 940px) {
    body {
      justify-content: flex-start; } }

html {
  width: 100%;
  height: 100%; }

.big-title {
  font-weight: 600;
  text-align: center;
  margin-bottom: 2em; }
  .big-title #big-text {
    text-align: center;
    display: flex;
    justify-content: center;
    font-size: 3em; }
    .big-title #big-text h3 {
      margin: 0; }

h1, h2, h3 {
  font-weight: 600; }

@keyframes card {
  from {
    transform: scaleY(0.8);
    opacity: 0; }
  to {
    transform: scaleY(1);
    opacity: 1; } }

/* 

  @keyframes slide1 {
    from { 
      transform: translateX(0px);
    }
  
    to {
      transform: translateX(24px);
    }
  }

  @keyframes slide2 {
    from { 
      transform: translateX(24px);
    }
  
    to {
      transform: translateX(48px);
    }
  }
  */
@keyframes opacity {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

/*
  @keyframes anim1 {
    0% {
      opacity: 0;
      transform: rotate3d(0.1, 1, 0.2, -150deg) scale(0.5);
    }
  
    50% {
      opacity: 1;
    }
  
    100% {
      opacity: 1;
      transform: rotate3d(0.1, 1, 0.2, -120deg) scale(0.8);
    }
  }

  @keyframes anim2 {
    0% {
      transform: rotate3d(0.1, 1, 0.2, -120deg) scale(0.8);
    }

  
    100% {
      transform: rotate3d(0.1, 1, 0.2, 0deg) scale(1);
    }
  }
  */
@keyframes reflection {
  from {
    transform: translateX(0px); }
  to {
    transform: translateX(48px); } }

select {
  cursor: pointer; }

input:not([type="submit"]):not([type="checkbox"]):not([type="file"]), select {
  -o-appearance: none;
  font-family: "Montserrat", sans-serif;
  appearance: none;
  outline: none;
  border: none;
  padding: 1em;
  box-sizing: border-box;
  background-color: #D7D7D7;
  min-height: 48px;
  width: 200px;
  font-size: 16px;
  border-radius: 14px;
  transform-origin: center;
  color: #3b70b1;
  font-weight: 600;
  transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition-property: transform, background-color; }

input:not([type="submit"]):not([type="checkbox"]):not([type="file"])::-webkit-input-placeholder {
  color: #3b70b1;
  font-weight: 600; }

input:not([type="submit"]):not([type="checkbox"]):not([type="file"]):hover, select:hover {
  background-color: #f1f1f1; }

input:not([type="submit"]):not([type="checkbox"]):not([type="file"]):focus, select:focus {
  color: #FDBF2D;
  background-color: #FFFFFF;
  box-shadow: 0 11px 22px 0 rgba(0, 0, 0, 0.14);
  border-radius: 16.17px;
  transform: scale(1.05); }

.card {
  background-color: white;
  box-shadow: 0px 11px 22px rgba(0, 0, 0, 0.05);
  background-size: contain;
  width: 450px;
  height: 300px;
  animation: 1.1s card cubic-bezier(0.41, 0.01, 0, 0.99) forwards;
  animation-delay: .3s;
  opacity: 0;
  padding: 2em;
  box-sizing: border-box;
  position: relative;
  z-index: 9;
  margin: 2em auto;
  overflow: hidden;
  border-radius: 16px; }
  .card #card-content {
    animation: .5s opacity forwards;
    opacity: 0;
    animation-delay: 1.1s;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: space-between; }
    .card #card-content #card-number {
      color: #FDBF2D; }
    .card #card-content #exp {
      color: rgba(255, 255, 255, 0.4); }
  .card#insert-code #card-content {
    justify-content: center; }
    .card#insert-code #card-content #code-input {
      text-align: center;
      font-size: 20px;
      width: 150px; }
  .card:before {
    content: "";
    background: url(../img/reflection.png) top right no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    pointer-events: none;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: 1s reflection forwards, 0.8s cubic-bezier(0.49, 0.01, 0.49, 1) opacity forwards;
    animation-delay: .3s; }

@media screen and (max-width: 600px) {
  .card {
    background: none;
    animation: none;
    opacity: 1;
    height: auto;
    width: 100%; }
    .card #card-content {
      animation: none;
      opacity: 1;
      height: auto; }
    .card:before {
      content: none; } }

.button.round {
  border: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font-size: 28px;
  outline: none;
  cursor: pointer;
  background: #FDBF2D;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.25);
  transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
  .button.round:hover {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
    transform: scale(1.1); }
  .button.round:active {
    transform: scale(0.9);
    transition: .1s; }

#golden {
  color: #FDBF2D; }

a {
  color: #0a4a98;
  text-decoration: none;
  font-weight: bold; }
  a:hover {
    color: #0d61c8; }
  a:visited {
    color: #0a4a98; }