web-story/web-story.css

Library for building tours on your front page (Step-by-step guide and feature introduction)

.story-tool-tip-container.left::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 100%;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 24px solid #6537d7; }

.story-tool-tip-container.right::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 45%;
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 24px solid #6537d7; }

.story-tool-tip-container.top::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 5%;
  width: 0;
  height: 0;
  border-top: 25px solid #6537d7;
  border-right: 17px solid transparent;
  border-left: 16px solid transparent; }

.story-tool-tip-container.bottom::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 5%;
  width: 0;
  height: 0;
  border-bottom: 25px solid #6537d7;
  border-right: 17px solid transparent;
  border-left: 16px solid transparent; }
.story-modal-container-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in; }
  .story-modal-container-mask .story-modal-container {
    width: 50%;
    height: 50%;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }

.story-modal-container-mask:after {
  content: '';
  position: absolute;
  background-color: #666666;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: -1; }
.purple-flower {
  background: #6d35de;
  background: -moz-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
  background: -webkit-gradient(left top, right bottom, color-stop(6%, #6d35de), color-stop(47%, #413fb5), color-stop(64%, #2f43a4), color-stop(83%, #1b4891));
  background: -webkit-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
  background: -o-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
  background: -ms-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
  background: linear-gradient(135deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d35de', endColorstr='#1b4891', GradientType=1);
  padding: 30px 30px 0 30px;
  color: white;
  min-width: 300px; }
  .purple-flower a {
    color: white; }
  .purple-flower .header {
    font-size: 18px;
    font-weight: 500; }
  .purple-flower .seperator {
    margin: auto;
    width: 100%;
    border-bottom: 1px dashed #8aa4c5; }
  .purple-flower .story-actions {
    margin: 30px 25%;
    width: 50%;
    display: inline-flex; }
    .purple-flower .story-actions .page-counter {
      margin-top: 10px; }
      .purple-flower .story-actions .page-counter.no-back {
        margin-top: 12px; }
  .purple-flower .content {
    font-size: 16px;
    font-weight: 400; }
  .purple-flower .fotter {
    margin: 7px 0 7px 0;
    color: white;
    display: inline-flex;
    width: 100%; }
    .purple-flower .fotter div {
      display: inline-flex; }
  .purple-flower .story-neverTell {
    width: 20px;
    margin-left: 0px;
    margin-right: 10px; }
  .purple-flower .btn-content-right {
    display: inline-flex;
    margin-top: 3px; }
    .purple-flower .btn-content-right span {
      margin-right: 4px;
      font-weight: 400;
      font-size: 20px; }
    .purple-flower .btn-content-right svg {
      margin-left: 1px;
      fill: white; }
  .purple-flower .btn-content-left {
    display: inline-flex;
    margin-top: 3px; }
    .purple-flower .btn-content-left svg {
      margin-right: 1px;
      fill: white; }
    .purple-flower .btn-content-left span {
      margin-left: 4px;
      font-weight: 400;
      font-size: 20px; }
  .purple-flower .story-skip {
    right: 3%;
    position: absolute; }
  .purple-flower .story-next {
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    background-color: #62caff;
    color: white;
    border: 0px;
    width: 100%;
    height: 40px; }
    .purple-flower .story-next:hover {
      cursor: pointer; }
  .purple-flower .story-end {
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
    background-color: #62caff;
    color: white;
    border: 0px;
    width: 100%;
    height: 40px; }
    .purple-flower .story-end:hover {
      cursor: pointer; }
  .purple-flower .story-back {
    border-bottom-left-radius: 30px;
    border-top-left-radius: 30px;
    background-color: #62caff;
    margin-left: 12px;
    margin-right: 2px;
    width: 100%;
    color: white;
    border: 0px;
    height: 40px; }
    .purple-flower .story-back:hover {
      cursor: pointer; }
  .purple-flower .hide-back {
    border-radius: 100%;
    margin-left: 20px; }

.welcome-page {
  background-color: white;
  padding: 10px;
  width: 100%;
  height: 100%; }
  .welcome-page .wp-container {
    height: 100%; }
  .welcome-page .up {
    position: relative;
    height: 40%;
    background: #7434e3;
    background: -moz-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #7434e3), color-stop(8%, #7434e3), color-stop(100%, #094c80));
    background: -webkit-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
    background: -o-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
    background: -ms-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
    background: linear-gradient(to bottom, #7434e3 0%, #7434e3 8%, #094c80 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7434e3', endColorstr='#094c80', GradientType=0); }
    .welcome-page .up .up-content {
      width: 90%;
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: white;
      text-align: center; }
      .welcome-page .up .up-content .header {
        font-size: 48px;
        font-weight: 400; }
      .welcome-page .up .up-content .subHeader {
        font-size: 44%;
        width: 90%;
        font-weight: 400;
        margin: auto; }
  .welcome-page .down {
    height: 60%; }
    .welcome-page .down .start-section {
      position: absolute;
      left: 34%;
      top: 60%; }
    .welcome-page .down .story-neverTell {
      width: 18px;
      margin-right: 10px; }
    .welcome-page .down .story-neverTell-label {
      color: #7a7a7a; }
    .welcome-page .down .story-skip {
      margin-bottom: 11px;
      color: #7A7A7A;
      left: 90%;
      position: absolute; }
    .welcome-page .down .start-story {
      position: relative;
      border-radius: 28px;
      font-size: 26px;
      font-weight: 400;
      width: 330px;
      height: 55px;
      background-color: #30a4e1; }
      .welcome-page .down .start-story:hover {
        cursor: pointer; }
      .welcome-page .down .start-story span {
        color: white;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .welcome-page .down .bye-actions {
      display: inline-flex;
      position: absolute;
      width: 97%;
      top: 94%; }
      .welcome-page .down .bye-actions div {
        display: inline-flex; }

@media screen and (max-width: 1366px) {
  .purple-flower {
    background: #6d35de;
    background: -moz-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: -webkit-gradient(left top, right bottom, color-stop(6%, #6d35de), color-stop(47%, #413fb5), color-stop(64%, #2f43a4), color-stop(83%, #1b4891));
    background: -webkit-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: -o-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: -ms-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: linear-gradient(135deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d35de', endColorstr='#1b4891', GradientType=1);
    padding: 30px 30px 0 30px;
    color: white;
    min-width: 300px; }
    .purple-flower a {
      color: white; }
    .purple-flower .header {
      font-size: 18px;
      font-weight: 500; }
    .purple-flower .seperator {
      margin: auto;
      width: 100%;
      border-bottom: 1px dashed #8aa4c5; }
    .purple-flower .story-actions {
      margin: 30px 25%;
      width: 50%;
      display: inline-flex; }
      .purple-flower .story-actions .page-counter {
        margin-top: 10px; }
    .purple-flower .content {
      font-size: 16px;
      font-weight: 400; }
    .purple-flower .fotter {
      margin: 7px 0 7px 0;
      color: white;
      display: inline-flex;
      width: 100%; }
      .purple-flower .fotter div {
        display: inline-flex; }
    .purple-flower .story-neverTell {
      width: 20px;
      margin-left: 0px;
      margin-right: 10px; }
    .purple-flower .btn-content-right {
      display: inline-flex;
      margin-top: 3px; }
      .purple-flower .btn-content-right span {
        margin-right: 4px;
        font-weight: 400;
        font-size: 20px; }
      .purple-flower .btn-content-right svg {
        margin-left: 1px;
        fill: white; }
    .purple-flower .btn-content-left {
      display: inline-flex;
      margin-top: 3px; }
      .purple-flower .btn-content-left svg {
        margin-right: 1px;
        fill: white; }
      .purple-flower .btn-content-left span {
        margin-left: 4px;
        font-weight: 400;
        font-size: 20px; }
    .purple-flower .story-skip {
      right: 3%;
      position: absolute; }
    .purple-flower .story-next {
      border-bottom-right-radius: 30px;
      border-top-right-radius: 30px;
      background-color: #62caff;
      color: white;
      border: 0px;
      width: 100%;
      height: 40px; }
      .purple-flower .story-next:hover {
        cursor: pointer; }
    .purple-flower .story-end {
      border-bottom-right-radius: 30px;
      border-top-right-radius: 30px;
      background-color: #62caff;
      color: white;
      border: 0px;
      width: 100%;
      height: 40px; }
      .purple-flower .story-end:hover {
        cursor: pointer; }
    .purple-flower .story-back {
      border-bottom-left-radius: 30px;
      border-top-left-radius: 30px;
      background-color: #62caff;
      margin-left: 12px;
      margin-right: 2px;
      width: 100%;
      color: white;
      border: 0px;
      height: 40px; }
      .purple-flower .story-back:hover {
        cursor: pointer; }
  .welcome-page {
    background-color: white;
    padding: 10px;
    width: 100%;
    height: 100%; }
    .welcome-page .wp-container {
      height: 100%; }
    .welcome-page .up {
      position: relative;
      height: 40%;
      background: #7434e3;
      background: -moz-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, #7434e3), color-stop(8%, #7434e3), color-stop(100%, #094c80));
      background: -webkit-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: -o-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: -ms-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: linear-gradient(to bottom, #7434e3 0%, #7434e3 8%, #094c80 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7434e3', endColorstr='#094c80', GradientType=0); }
      .welcome-page .up .up-content {
        width: 90%;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
        text-align: center; }
        .welcome-page .up .up-content .header {
          font-size: 48px;
          font-weight: 400; }
        .welcome-page .up .up-content .subHeader {
          font-size: 44%;
          width: 90%;
          font-weight: 400;
          margin: auto; }
    .welcome-page .down {
      height: 60%; }
      .welcome-page .down .start-section {
        position: absolute;
        left: 29%;
        top: 60%; }
      .welcome-page .down .story-neverTell {
        width: 18px;
        margin-right: 10px; }
      .welcome-page .down .story-neverTell-label {
        font-size: 16px;
        color: #7a7a7a; }
      .welcome-page .down .story-skip {
        margin-bottom: 11px;
        font-size: 16px;
        color: #7A7A7A;
        left: 88%;
        position: absolute; }
      .welcome-page .down .start-story {
        position: relative;
        border-radius: 28px;
        font-size: 26px;
        font-weight: 400;
        width: 330px;
        height: 55px;
        background-color: #30a4e1; }
        .welcome-page .down .start-story:hover {
          cursor: pointer; }
        .welcome-page .down .start-story span {
          color: white;
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
      .welcome-page .down .bye-actions {
        display: inline-flex;
        position: absolute;
        width: 97%;
        top: 94%; }
        .welcome-page .down .bye-actions div {
          display: inline-flex; } }

@media screen and (max-width: 640px) {
  .purple-flower {
    background: #6d35de;
    background: -moz-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: -webkit-gradient(left top, right bottom, color-stop(6%, #6d35de), color-stop(47%, #413fb5), color-stop(64%, #2f43a4), color-stop(83%, #1b4891));
    background: -webkit-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: -o-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: -ms-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: linear-gradient(135deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d35de', endColorstr='#1b4891', GradientType=1);
    padding: 20px 20px 0 20px;
    max-width: 180px;
    color: white;
    min-width: 200px; }
    .purple-flower a {
      color: white; }
    .purple-flower .header {
      font-size: 18px;
      font-weight: 500; }
    .purple-flower .seperator {
      margin: auto;
      width: 100%;
      border-bottom: 1px dashed #8aa4c5; }
    .purple-flower .story-actions {
      margin: 30px 16%;
      width: 50%;
      display: inline-flex; }
      .purple-flower .story-actions .page-counter {
        margin-top: 10px; }
    .purple-flower .content {
      font-size: 16px;
      font-weight: 400; }
    .purple-flower .fotter {
      margin: 7px 0 7px 0;
      color: white;
      display: inline-flex;
      width: 100%; }
      .purple-flower .fotter div {
        display: inline-flex;
        margin-left: -10px; }
        .purple-flower .fotter div span {
          font-size: 10px;
          margin-top: 4px; }
    .purple-flower .story-neverTell {
      width: 20px;
      margin-left: 0px;
      margin-right: 0px; }
    .purple-flower .btn-content-right {
      display: inline-flex;
      margin-top: 3px; }
      .purple-flower .btn-content-right span {
        display: none;
        margin-right: 4px;
        font-weight: 400;
        font-size: 18px; }
      .purple-flower .btn-content-right svg {
        margin-left: 1px;
        fill: white; }
    .purple-flower .btn-content-left {
      display: inline-flex;
      margin-top: 3px; }
      .purple-flower .btn-content-left svg {
        margin-right: 1px;
        fill: white; }
      .purple-flower .btn-content-left span {
        display: none;
        margin-left: 4px;
        font-weight: 400;
        font-size: 18px; }
    .purple-flower .story-skip {
      right: 3%;
      position: absolute;
      font-size: 10px; }
    .purple-flower .story-next {
      border-bottom-right-radius: 30px;
      border-top-right-radius: 30px;
      background-color: #62caff;
      color: white;
      border: 0px;
      width: 100%;
      height: 40px; }
      .purple-flower .story-next:hover {
        cursor: pointer; }
    .purple-flower .story-end {
      border-bottom-right-radius: 30px;
      border-top-right-radius: 30px;
      background-color: #62caff;
      color: white;
      border: 0px;
      width: 100%;
      height: 40px; }
      .purple-flower .story-end:hover {
        cursor: pointer; }
    .purple-flower .story-back {
      border-bottom-left-radius: 30px;
      border-top-left-radius: 30px;
      background-color: #62caff;
      margin-left: 12px;
      margin-right: 2px;
      width: 100%;
      color: white;
      border: 0px;
      height: 40px; }
      .purple-flower .story-back:hover {
        cursor: pointer; }
  .welcome-page {
    background-color: white;
    padding: 10px;
    width: 100%;
    height: 100%; }
    .welcome-page .wp-container {
      height: 100%; }
    .welcome-page .up {
      position: relative;
      height: 40%;
      background: #7434e3;
      background: -moz-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, #7434e3), color-stop(8%, #7434e3), color-stop(100%, #094c80));
      background: -webkit-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: -o-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: -ms-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: linear-gradient(to bottom, #7434e3 0%, #7434e3 8%, #094c80 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7434e3', endColorstr='#094c80', GradientType=0); }
      .welcome-page .up .up-content {
        width: 90%;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
        text-align: center; }
        .welcome-page .up .up-content .header {
          font-size: 35px;
          font-weight: 400; }
        .welcome-page .up .up-content .subHeader {
          font-size: 44%;
          width: 90%;
          font-weight: 400;
          margin: auto; }
    .welcome-page .down {
      height: 60%; }
      .welcome-page .down .start-section {
        position: absolute;
        left: 36%;
        top: 54%; }
      .welcome-page .down .story-neverTell {
        width: 18px;
        margin-right: 5px; }
      .welcome-page .down .story-neverTell-label {
        font-size: 13px;
        color: #7a7a7a; }
      .welcome-page .down .story-skip {
        margin-bottom: 11px;
        font-size: 13px;
        color: #7A7A7A;
        left: 80%;
        position: absolute; }
      .welcome-page .down .start-story {
        position: relative;
        border-radius: 100%;
        font-size: 26px;
        font-weight: 400;
        width: 120px;
        height: 120px;
        background-color: #30a4e1; }
        .welcome-page .down .start-story:hover {
          cursor: pointer; }
        .welcome-page .down .start-story span {
          color: white;
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
      .welcome-page .down .bye-actions {
        display: inline-flex;
        position: absolute;
        width: 90%;
        top: 94%; }
        .welcome-page .down .bye-actions div {
          display: inline-flex; } }

@media screen and (max-width: 375px) {
  .purple-flower {
    background: #6d35de;
    background: -moz-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: -webkit-gradient(left top, right bottom, color-stop(6%, #6d35de), color-stop(47%, #413fb5), color-stop(64%, #2f43a4), color-stop(83%, #1b4891));
    background: -webkit-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: -o-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: -ms-linear-gradient(-45deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    background: linear-gradient(135deg, #6d35de 6%, #413fb5 47%, #2f43a4 64%, #1b4891 83%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d35de', endColorstr='#1b4891', GradientType=1);
    padding: 20px 20px 0 20px;
    max-width: 180px;
    color: white;
    min-width: 200px; }
    .purple-flower a {
      color: white; }
    .purple-flower .header {
      font-size: 18px;
      font-weight: 500; }
    .purple-flower .seperator {
      margin: auto;
      width: 100%;
      border-bottom: 1px dashed #8aa4c5; }
    .purple-flower .story-actions {
      margin: 30px 16%;
      width: 50%;
      display: inline-flex; }
      .purple-flower .story-actions .page-counter {
        margin-top: 10px; }
    .purple-flower .content {
      font-size: 16px;
      font-weight: 400; }
    .purple-flower .fotter {
      margin: 7px 0 7px 0;
      color: white;
      display: inline-flex;
      width: 100%; }
      .purple-flower .fotter div {
        display: inline-flex;
        margin-left: -10px; }
        .purple-flower .fotter div span {
          font-size: 10px;
          margin-top: 4px; }
    .purple-flower .story-neverTell {
      width: 20px;
      margin-left: 0px;
      margin-right: 0px; }
    .purple-flower .btn-content-right {
      display: inline-flex;
      margin-top: 3px; }
      .purple-flower .btn-content-right span {
        display: none;
        margin-right: 4px;
        font-weight: 400;
        font-size: 18px; }
      .purple-flower .btn-content-right svg {
        margin-left: 1px;
        fill: white; }
    .purple-flower .btn-content-left {
      display: inline-flex;
      margin-top: 3px; }
      .purple-flower .btn-content-left svg {
        margin-right: 1px;
        fill: white; }
      .purple-flower .btn-content-left span {
        display: none;
        margin-left: 4px;
        font-weight: 400;
        font-size: 18px; }
    .purple-flower .story-skip {
      right: 3%;
      position: absolute;
      font-size: 10px; }
    .purple-flower .story-next {
      border-bottom-right-radius: 30px;
      border-top-right-radius: 30px;
      background-color: #62caff;
      color: white;
      border: 0px;
      width: 100%;
      height: 40px; }
      .purple-flower .story-next:hover {
        cursor: pointer; }
    .purple-flower .story-end {
      border-bottom-right-radius: 30px;
      border-top-right-radius: 30px;
      background-color: #62caff;
      color: white;
      border: 0px;
      width: 100%;
      height: 40px; }
      .purple-flower .story-end:hover {
        cursor: pointer; }
    .purple-flower .story-back {
      border-bottom-left-radius: 30px;
      border-top-left-radius: 30px;
      background-color: #62caff;
      margin-left: 12px;
      margin-right: 2px;
      width: 100%;
      color: white;
      border: 0px;
      height: 40px; }
      .purple-flower .story-back:hover {
        cursor: pointer; }
  .welcome-page {
    background-color: white;
    padding: 10px;
    width: 100%;
    height: 100%; }
    .welcome-page .wp-container {
      height: 100%; }
    .welcome-page .up {
      position: relative;
      height: 40%;
      background: #7434e3;
      background: -moz-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, #7434e3), color-stop(8%, #7434e3), color-stop(100%, #094c80));
      background: -webkit-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: -o-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: -ms-linear-gradient(top, #7434e3 0%, #7434e3 8%, #094c80 100%);
      background: linear-gradient(to bottom, #7434e3 0%, #7434e3 8%, #094c80 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7434e3', endColorstr='#094c80', GradientType=0); }
      .welcome-page .up .up-content {
        width: 90%;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
        text-align: center; }
        .welcome-page .up .up-content .header {
          font-size: 22px;
          font-weight: 400; }
        .welcome-page .up .up-content .subHeader {
          font-size: 60%;
          width: 90%;
          font-weight: 400;
          margin: auto; }
    .welcome-page .down {
      height: 60%; }
      .welcome-page .down .start-section {
        position: absolute;
        left: 28%;
        top: 50%; }
      .welcome-page .down .story-neverTell {
        width: 18px;
        margin-right: 5px; }
      .welcome-page .down .story-neverTell-label {
        font-size: 9px;
        color: #7a7a7a;
        margin-top: 5px; }
      .welcome-page .down .story-skip {
        margin-bottom: 11px;
        font-size: 9px;
        color: #7A7A7A;
        left: 87%;
        position: absolute; }
      .welcome-page .down .start-story {
        position: relative;
        border-radius: 100%;
        font-size: 26px;
        font-weight: 400;
        width: 120px;
        height: 120px;
        background-color: #30a4e1; }
        .welcome-page .down .start-story:hover {
          cursor: pointer; }
        .welcome-page .down .start-story span {
          color: white;
          position: absolute;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
      .welcome-page .down .bye-actions {
        display: inline-flex;
        position: absolute;
        width: 87%;
        top: 93%; }
        .welcome-page .down .bye-actions div {
          display: inline-flex; } }