.typed-cursor {
  opacity: 1;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
  display: inline-block; }

h1 {
  font-size: 50px;
  font-weight: 400; }

@keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

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

@-moz-keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fb_iframe_widget {
  display: block !important; }

body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  background: white;
  color: #333;
  min-height: 100vh; }

.container {
  max-width: 375px;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center; }

.one{
    height: calc(100vh - 90px);
    display: flex;
    flex-flow: column;
}
.two{
    height:calc(100vh);
    max-width: 450px;
}
.two p{
    font-weight: 300;
    font-size: 24px;
}
.two img{
    max-width: 100%;
}

.description {
  color: #333;
  font-size: 24px;
  font-weight: 300;
  margin: 40px 0 60px 0; }

.hero img {
  max-width: 25%;
  margin: 20px 0;
  border-radius: 50%; }

.get_started_early {
  background-image: url("/public/images/messenger-bolt.png");
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  max-width: 330px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 1.65px;
  background: #0080FF;
  text-decoration: none;
  border-radius: 50px;
  color: white;
  text-transform: uppercase; }
  .get_started_early img {
    max-height: 10px;
    margin-right: 10px; }

.get_started_early:hover {
  opacity: 0.95; }
small{
    font-weight: 300;
    width: 270px;
    display: flex;
    margin: 10px auto;
}

.navbar {
  height: 50px;
  width: 100%;
  display: flex; }
  .navbar .navbar-inner {
    display: flex;
    width: 100%;
    max-width: 960px;
    margin: 0 auto; }
  .navbar .link-container {
    margin-left: auto;
    display: flex;
    align-items: center; }
    .navbar .link-container a {
      display: flex;
      align-items: center;
      padding: 10px;
      text-decoration: none;
      color: #333;
      font-weight: 300;
      text-transform: capitalize; }

/*//PRODUCT HUNT*/
.refBar{
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #333;
  border-bottom: 1px solid #ededed;
}
.refBar img{
    max-height: 50%;
    margin-right: 20px;
}
.refBar .text{
    display: flex;
    flex-flow: column;
}
.refBar .text span:last-child{
    font-weight: 300;
}

/*DEMO*/
@-webkit-keyframes dotSpinnerBounceDelay {
  0%,
  100%,
  80% {
    opacity: 0.5;
  }
  40% {
    opacity: 1;
  }
}
@keyframes dotSpinnerBounceDelay {
  0%,
  100%,
  80% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}
.spinner {
    min-height: 20px;
    align-items: center;
    padding: 12px;
    background-color: #F1F0F0;
    border-radius: 40px;
}

.spinner .dot {
  margin: .2em .2em;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #999;
  -webkit-animation: dotSpinnerBounceDelay 1.4s infinite ease-in-out;
  animation: dotSpinnerBounceDelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .dot-1 {
  -webkit-animation-delay: -.32s;
  animation-delay: -.32s;
}

.spinner.dot {
  /*width: 100%;*/
  text-align: center;
  display: flex;
}

.spinner .dot-2 {
  -webkit-animation-delay: -.16s;
  animation-delay: -.16s;
}

.msg-overlay {
  display: none;
  position: absolute;
  z-index: 2;
  right: 0;
  top: 80px;
  left: 0;
  height: 50px;
  /* adjust it to your needs */
  background: url(data:image/svg+xml;base64,alotofcodehere);
  background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, white 70%);
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(70%, white));
  background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, white 70%);
  background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, white 70%);
  background: -ms-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, white 70%);
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 70%);
}

.holder {
  position: relative;
  margin-top: 30px;
}

.bubbles {
  position: relative;
  overflow-y: scroll;
  height: auto;
  max-width: 652px;
  width: 100%;
  padding-bottom: 75px;
}

.bubbles::-webkit-scrollbar {
  width: 0 !important;
}

.bubbles .bubble {
  /*border: 0.1em solid transparent;*/
  /*padding: 6px 12px;*/
  margin: 0;
  /*border-radius: 18px;*/
  box-sizing: content-box;
  font-size: 1.5em;
  opacity: 1;
  -webkit-transition: all 500ms ease-in;
  transition: all 500ms ease-in;
  float: left;
  clear: both;
  position: relative;
  background-color: #fff;
  color: #333;
  font-weight: 300;
  word-wrap: break-word;
}
.message {
  max-width: 75%;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.message.user{
    margin-left: auto;
}
.message .avatar {
  margin-right: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  align-self: flex-start;
  /*margin-top: 5px;*/
}
.message .text{
    text-align: left;
    font-size: 16px;
    margin: 0;
    padding: 10px 18px;
    border-radius: 18px;
}
.message.joy .text{
    background-color: #ededed;
}
.message.user .text{
    background-color:#0080FF;
    color: white;
}
.message.user .bubble{
    margin-left: auto;
}
.message.joy .avatar {
  background-image: url("/public/images/logo.png") !important;
}
.message.joy .bubble{
    /*background-color:#ededed;*/
}
.message.joy .bubble .text {
  display: none;
}
.message.user .avatar {
    display:none;
}
.message .card{
    border: 1px solid rgba(0, 0, 0, .1);
    display: flex;
    flex-flow: column;
    flex: 100%;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}
.message .card .preview_image{
    height: 175px;
    background-image: url("http://www.hellojoy.ai/public/images/messenger_images/1.png");
    background-size: cover;
}
.message .card .description{
    display: flex;
    flex-flow: column;
    padding: 6px 12px 12px 12px;
    margin: 0;
}
.message .card .description h4{
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    text-align: left;
}
.message .card .description p{
    font-weight: 300;
    font-size: 14px;
    color:#999;
    margin: 0;
    text-align: left;
}
.message .card .ctas{
    display: flex;
    flex-flow: column;
    font-size: 14px;
}
.message .card .ctas span{
    color: #0084ff;
    font-weight: 400;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.message .card .ctas span:first-child{
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.message .card .ctas span:last-child{
    border-bottom: 0;
}
.message-5{
    margin-bottom: 0;
}
.message-5 .text{
    border-bottom-left-radius:0;
    border-bottom-right-radius: 0;
}
.message-6 .avatar{
    visibility: hidden;
}

.message-2, .message-3, .message-4, .message-5, .message-6, .message-7, .message-8, .message-9, .message-10, .message-11, .message-12, .message-13 {
  display: none;
}

a.scroll-down{
    display: flex;
    justify-content: center;
    margin-top: auto;
    margin-bottom: 20px;
}

@media (max-width: 375px) {
    .message{
        max-width: 95%;
    }
    .two p{
        font-size: 16px;
    }
    .hero h1{
        margin: 0;
    }
    .hero .description{
        margin-bottom: 40px;
    }
    .one{
        padding-top: 0;
    }
    a.scroll-down{
        margin: 0;
        position: absolute;
        left: 50%;
        margin-left: calc((151px / 2)* -1);
        bottom: 10px;
}