@font-face {
  font-family: 'Creta';
  src: url("../fonts/Creta_TRIAL.ttf") format("truetype"), url("../fonts/Creta_TRIAL.otf") format("otf");
  font-weight: normal;
  font-style: normal; }
.loss-aversion-container {
  max-width: 500px;
  display: block;
  padding: 15px;
  /* height: 28vw; */
  margin: 0 auto 40px;
  perspective: 600px;
  transition: all .5s ease-in-out;
  color: #00a3ff; }

.loss-aversion-box {
  width: 100%;
  height: 100%;
  /*      background-color: whitesmoke; */
  transform: rotateY(0deg);
  padding-bottom: 30px;
  padding-top: 10px;
  box-shadow: 1px 10px 6px 3px rgba(0, 0, 0, 0.06); }

/*
   .bottom-to-top {
    border-width: 3px;
    border-style: solid;
    -webkit-border-image:
      -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image:
      -webkit-linear-gradient(bottom, #dd0808, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(bottom, #ff0505, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
      -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%;
    border-image:
      linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%;
} */
.bottom-to-top {
  /*       width: 400px; */
  /*     padding: 20px; */
  border-top: 3px solid #FFFF00;
  border-bottom: 3px solid #ff60ef;
  background-image: linear-gradient(#FFFF00, #ff9df9), linear-gradient(#FFFF00, #ff91e4);
  background-size: 4px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat; }

.loss-aversion-button {
  margin: 30px;
  height: 50px;
  font-size: 2em;
  background: mediumslateblue;
  color: white;
  outline: none; }

.loss-aversion-button:hover {
  background: indigo;
  color: white; }

.textInput {
  font-size: 1.5em; }

.loss-aversion-h2 {
  font-size: 2.1em;
  /*  font-family: 'Creta'; */ }

.textInputField:focus {
  border: 1px black solid;
  outline: none; }

.form-text {
  /*   width: 100%; */
  left: 50%;
  text-align: center;
  position: relative;
  transform: translateX(-50%); }

.inline {
  margin: 10px;
  margin-bottom: 20px; }

.form-text .textInputField {
  height: 30px;
  width: 260px;
  font-size: 1.5em;
  color: #646464; }

#Questionaire {
  left: 50%;
  transform: translateX(-50%);
  display: none;
  position: relative;
  width: 100%;
  text-align: center;
  /*   opacity: 0; */ }

#Final {
  left: 50%;
  transform: translateX(-50%);
  display: none;
  position: relative;
  width: 100%;
  text-align: center;
  /*   opacity: 0; */ }

#slider-answer {
  font-size: 2em; }

.helper {
  color: grey;
  position: relative;
  top: -15px;
  font-size: .9em; }

@keyframes wiggle {
  10% {
    transform: rotateY(35deg); }
  35% {
    transform: rotateY(-35deg); }
  50% {
    transform: rotateY(20deg); }
  85% {
    transform: rotateY(-15deg); } }
.over-it {
  margin-top: 35px;
  text-align: center;
  text-decoration: underline;
  color: grey;
  opacity: 1;
  z-index: 500; }

.over-it:hover {
  cursor: pointer; }

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