@charset "UTF-8";
/**
 * @license
 * MyFonts Webfont Build ID 3890686, 2020-04-14T12:06:35-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: Circe-Light by ParaType
 * URL: https://www.myfonts.com/fonts/paratype/circe/light/
 *
 * Webfont: Circe-Regular by ParaType
 * URL: https://www.myfonts.com/fonts/paratype/circe/regular/
 *
 *
 * Webfonts copyright: Copyright &amp;#x00A9; 2011 ParaType Inc., ParaType Ltd. All rights reserved.
 *
 * © 2020 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3b5dfe");
@font-face {
  font-family: "Circe-Regular";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/Circe-Regular/font.woff2") format("woff2"), url("/assets/fonts/Circe-Regular/font.woff") format("woff");
}
@font-face {
  font-family: "Circe-Light";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/Circe-Light/font.woff2") format("woff2"), url("/assets/fonts/Circe-Light/font.woff") format("woff");
}
/* -- globals -- */
/* Content Boost Vars */
/* mobile vars */
/* mobile */
/* 2019 Website - Media Queries */
/* 2019 Website - Vars */
/* 2019 Website - Animation Vars */
/* 2019 Updated Colors */
/* Ripple Section */
/* end of ripple section */
@-webkit-keyframes zestIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes zestIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes zestIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes borderDown {
  from {
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-moz-keyframes borderDown {
  from {
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes borderDown {
  from {
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes nonono {
  0%, 100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
}
@keyframes slide-top {
  0% {
    opacity: 0;
    -webkit-transform: translateY(5%) scale(0.9);
    transform: translateY(5%) scale(0.9);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes slide-out-left {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1) rotate(0deg);
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(3%, -5%) scale(1.1) rotate(2deg);
    transform: translate(3%, -5%) scale(1.1) rotate(2deg);
  }
}
@keyframes slide-down {
  0% {
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

script {
  display: none !important;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */
q {
  quotes: "“" "”" "‘" "’";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

@font-face {
  font-family: "zest";
  src: url("/assets/fonts/zest.ttf?pqp25y");
  src: url("/assets/fonts/zest.woff?pqp25y#iefix") format("woff"), url("/assets/fonts/zest.ttf?pqp25y") format("truetype"), url("/assets/fonts/zest.svg?pqp25y#zest") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "zest" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-apple-store:before {
  content: "";
}

.icon-google-play:before {
  content: "";
}

.icon-feedly:before {
  content: "";
}

.icon-integrations:before {
  content: "";
}

.icon-lock-solid:before {
  content: "";
}

.icon-lock:before {
  content: "";
}

.icon-memo-solid:before {
  content: "";
}

.icon-memo:before {
  content: "";
}

.icon-reload:before {
  content: "";
}

.icon-mst:before {
  content: "";
}

.icon-add-user-solid:before {
  content: "";
}

.icon-add-user:before {
  content: "";
}

.icon-arrow-down:before {
  content: "";
}

.icon-arrow-left:before {
  content: "";
}

.icon-arrow-right:before {
  content: "";
}

.icon-arrow-up:before {
  content: "";
}

.icon-calendar-solid:before {
  content: "";
}

.icon-calendar:before {
  content: "";
}

.icon-cards-solid:before {
  content: "";
}

.icon-cards:before {
  content: "";
}

.icon-clicks:before {
  content: "";
}

.icon-cog-solid:before {
  content: "";
}

.icon-cog:before {
  content: "";
}

.icon-comment-solid:before {
  content: "";
}

.icon-comment:before {
  content: "";
}

.icon-crown-solid:before {
  content: "";
}

.icon-crown:before {
  content: "";
}

.icon-done-solid:before {
  content: "";
}

.icon-done:before {
  content: "";
}

.icon-duration-solid:before {
  content: "";
}

.icon-duration:before {
  content: "";
}

.icon-filter-solid:before {
  content: "";
}

.icon-filter:before {
  content: "";
}

.icon-home-solid:before {
  content: "";
}

.icon-home:before {
  content: "";
}

.icon-info-solid:before {
  content: "";
}

.icon-info:before {
  content: "";
}

.icon-lightbulb-solid:before {
  content: "";
}

.icon-lightbulb:before {
  content: "";
}

.icon-link-solid:before {
  content: "";
}

.icon-link:before {
  content: "";
}

.icon-loading:before {
  content: "";
}

.icon-menu-vertical:before {
  content: "";
}

.icon-menu:before {
  content: "";
}

.icon-participants-solid:before {
  content: "";
}

.icon-participants:before {
  content: "";
}

.icon-pie-solid:before {
  content: "";
}

.icon-pie:before {
  content: "";
}

.icon-research:before {
  content: "";
}

.icon-search-solid:before {
  content: "";
}

.icon-snooze-solid:before {
  content: "";
}

.icon-snooze:before {
  content: "";
}

.icon-suggest-solid:before {
  content: "";
}

.icon-suggest:before {
  content: "";
}

.icon-tag-solid:before {
  content: "";
}

.icon-tag:before {
  content: "";
}

.icon-text-solid:before {
  content: "";
}

.icon-text:before {
  content: "";
}

.icon-thumb-down-solid:before {
  content: "";
}

.icon-thumb-down:before {
  content: "";
}

.icon-thumb-up-solid:before {
  content: "";
}

.icon-thumb-up:before {
  content: "";
}

.icon-time-solid:before {
  content: "";
}

.icon-time:before {
  content: "";
}

.icon-trend-solid:before {
  content: "";
}

.icon-trend:before {
  content: "";
}

.icon-user-added-solid:before {
  content: "";
}

.icon-user-added:before {
  content: "";
}

.icon-user-solid:before {
  content: "";
}

.icon-user:before {
  content: "";
}

.icon-users-solid:before {
  content: "";
}

.icon-users:before {
  content: "";
}

.icon-waiting:before {
  content: "";
}

.icon-zest_top:before {
  content: "";
}

.icon-zest .path1:before {
  content: "";
  color: black;
}

.icon-zest .path2:before {
  content: "";
  margin-left: -1em;
  color: black;
}

.icon-zest .path3:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-zest .path4:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-zest .path5:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-zest .path6:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-zest .path7:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-zest .path8:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-zest .path9:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-zest .path10:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-add:before {
  content: "";
}

.icon-backward-solid:before {
  content: "";
}

.icon-backward:before {
  content: "";
}

.icon-bell-active-solid:before {
  content: "";
}

.icon-bell-active:before {
  content: "";
}

.icon-bell-inactive-solid:before {
  content: "";
}

.icon-bell-inactive:before {
  content: "";
}

.icon-boost-solid:before {
  content: "";
}

.icon-boost:before {
  content: "";
}

.icon-buffer:before {
  content: "";
}

.icon-buffer-color:before {
  content: "";
}

.icon-check-x:before {
  content: "";
}

.icon-check:before {
  content: "";
}

.icon-chrome-luncher .path1:before {
  content: "";
  color: #dc4749;
}

.icon-chrome-luncher .path2:before {
  content: "";
  margin-left: -1em;
  color: #dc4749;
}

.icon-chrome-luncher .path3:before {
  content: "";
  margin-left: -1em;
  color: #dc4749;
}

.icon-chrome-luncher .path4:before {
  content: "";
  margin-left: -1em;
  color: #57be56;
}

.icon-chrome-luncher .path5:before {
  content: "";
  margin-left: -1em;
  color: #0089f7;
}

.icon-chrome-luncher .path6:before {
  content: "";
  margin-left: -1em;
  color: #ffb100;
}

.icon-chrome-luncher .path7:before {
  content: "";
  margin-left: -1em;
  color: #57be56;
}

.icon-chrome-luncher .path8:before {
  content: "";
  margin-left: -1em;
  color: #ffb100;
}

.icon-chrome-luncher .path9:before {
  content: "";
  margin-left: -1em;
  color: #ffb100;
}

.icon-chrome:before {
  content: "";
}

.icon-delete-solid:before {
  content: "";
}

.icon-delete:before {
  content: "";
}

.icon-ebook-solid:before {
  content: "";
}

.icon-ebook:before {
  content: "";
}

.icon-logout:before {
  content: "";
}

.icon-edit-solid:before {
  content: "";
}

.icon-edit:before {
  content: "";
}

.icon-explore-solid:before {
  content: "";
}

.icon-explore:before {
  content: "";
}

.icon-facebook:before {
  content: "";
}

.icon-facebook-color:before {
  content: "";
  color: #324d8f;
}

.icon-flag-solid:before {
  content: "";
}

.icon-flag:before {
  content: "";
}

.icon-forward-solid:before {
  content: "";
}

.icon-forward:before {
  content: "";
}

.icon-gmail:before {
  content: "";
}

.icon-google:before {
  content: "";
}

.icon-google-color:before {
  content: "";
  color: #eb4335;
}

.icon-linkedin:before {
  content: "";
}

.icon-linkedin-color:before {
  content: "";
  color: #1b85bc;
}

.icon-medium-rect:before {
  content: "";
}

.icon-medium:before {
  content: "";
}

.icon-pause-solid:before {
  content: "";
}

.icon-pause:before {
  content: "";
}

.icon-play:before {
  content: "";
}

.icon-play-solid:before {
  content: "";
}

.icon-playstore:before {
  content: "";
}

.icon-podcast-solid:before {
  content: "";
}

.icon-podcast:before {
  content: "";
}

.icon-saved-solid:before {
  content: "";
  margin-right: -0.5px;
}

.icon-saved:before {
  content: "";
}

.icon-search:before {
  content: "";
}

.icon-select-solid:before {
  content: "";
}

.icon-select:before {
  content: "";
}

.icon-send-solid:before {
  content: "";
}

.icon-send:before {
  content: "";
}

.icon-share-solid:before {
  content: "";
}

.icon-share:before {
  content: "";
}

.icon-slack .path1:before {
  content: "";
}

.icon-slack .path2:before {
  content: "";
  margin-left: -1em;
}

.icon-slack .path3:before {
  content: "";
  margin-left: -1em;
}

.icon-slack .path4:before {
  content: "";
  margin-left: -1em;
}

.icon-slack .path5:before {
  content: "";
  margin-left: -1em;
}

.icon-slack .path6:before {
  content: "";
  margin-left: -1em;
}

.icon-slack .path7:before {
  content: "";
  margin-left: -1em;
}

.icon-slack .path8:before {
  content: "";
  margin-left: -1em;
}

.icon-slack-color .path1:before {
  content: "";
  color: #e01e5a;
}

.icon-slack-color .path2:before {
  content: "";
  margin-left: -1em;
  color: #e01e5a;
}

.icon-slack-color .path3:before {
  content: "";
  margin-left: -1em;
  color: #36c5f0;
}

.icon-slack-color .path4:before {
  content: "";
  margin-left: -1em;
  color: #36c5f0;
}

.icon-slack-color .path5:before {
  content: "";
  margin-left: -1em;
  color: #2eb67d;
}

.icon-slack-color .path6:before {
  content: "";
  margin-left: -1em;
  color: #2eb67d;
}

.icon-slack-color .path7:before {
  content: "";
  margin-left: -1em;
  color: #ecb22e;
}

.icon-slack-color .path8:before {
  content: "";
  margin-left: -1em;
  color: #ecb22e;
}

.icon-speaker-mute-solid:before {
  content: "";
}

.icon-speaker-mute:before {
  content: "";
}

.icon-speaker-solid:before {
  content: "";
}

.icon-speaker:before {
  content: "";
}

.icon-trello .path1:before {
  content: "";
}

.icon-trello .path2:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-trello .path3:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-trello-color .path1:before {
  content: "";
  color: #026aa7;
}

.icon-trello-color .path2:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-trello-color .path3:before {
  content: "";
  margin-left: -1em;
  color: white;
}

.icon-twitter:before {
  content: "";
}

.icon-twitter-color:before {
  content: "";
  color: #0295f3;
}

.icon-video-solid:before {
  content: "";
}

.icon-video:before {
  content: "";
}

.icon-view-solid:before {
  content: "";
}

.icon-view:before {
  content: "";
}

.icon-whatsapp:before {
  content: "";
}

.icon-whatsapp-color:before {
  content: "";
  color: #25d366;
}

.icon-youtube:before {
  content: "";
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, q, small, strong, sub, sup, dl, dt, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0;
  margin: 0;
  padding: 0;
}

article, aside, figure, figure img, figcaption, footer, header, nav, section, video, object {
  display: block;
}

a img {
  border: 0;
}

figure {
  position: relative;
}

figure img {
  width: 100%;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

li {
  list-style: none;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.left {
  float: left;
}

.right {
  float: right;
}

.t_center {
  text-align: center;
}

.clear {
  clear: both;
}

html, body {
  font-family: "Lato", "Lucida Grande", sans-serif;
  line-height: 1.4;
  font-weight: 400;
  overflow: auto;
  font-size: 10px;
}
@media only screen and (max-width : 750px) {
  html, body {
    line-height: 1.35;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

::-moz-selection {
  color: #fff;
  text-shadow: none;
  background-color: #C400BB;
}

::selection {
  color: #fff;
  text-shadow: none;
  background-color: #C400BB;
}

a, a:hover, a.active, a:visited {
  text-decoration: none;
  outline: none;
}

a:focus {
  -moz-outline-style: none;
}

a, a:active, a:focus {
  outline: none;
}

input, textarea, button, select {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
}
input:focus, textarea:focus, button:focus, select:focus {
  outline: none;
  box-shadow: none;
}

.hover {
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  cursor: pointer;
}
.hover:hover {
  opacity: 0.65;
}

.hover_rev {
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  cursor: pointer;
  opacity: 0.25;
}
.hover_rev:hover {
  opacity: 0.8;
}

.upper {
  text-transform: uppercase;
}

.inline_block_mid {
  display: inline-block;
  vertical-align: middle;
}

.linethrough {
  text-decoration: line-through;
}

@-webkit-keyframes breath {
  0%, 100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  50% {
    -webkit-transform: matrix(1.05, 0, 0, 1.05, 0, 0);
    transform: matrix(1.05, 0, 0, 1.05, 0, 0);
  }
}
@-moz-keyframes breath {
  0%, 100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  50% {
    -webkit-transform: matrix(1.05, 0, 0, 1.05, 0, 0);
    transform: matrix(1.05, 0, 0, 1.05, 0, 0);
  }
}
@keyframes breath {
  0%, 100% {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  50% {
    -webkit-transform: matrix(1.05, 0, 0, 1.05, 0, 0);
    transform: matrix(1.05, 0, 0, 1.05, 0, 0);
  }
}
.desk {
  display: block;
}
@media only screen and (max-width : 880px) {
  .desk {
    display: none;
  }
}

.no_mob {
  display: block;
}
@media only screen and (max-width : 750px) {
  .no_mob {
    display: none !important;
  }
}

.mob {
  display: none;
}
@media only screen and (max-width : 750px) {
  .mob {
    display: block;
  }
}

@media only screen and (max-width : 880px) {
  .no_tablet {
    display: none;
  }
}

.no_tablet_block {
  display: block;
}
@media only screen and (max-width : 880px) {
  .no_tablet_block {
    display: none;
  }
}

.tablet {
  display: none;
}
@media only screen and (max-width : 880px) {
  .tablet {
    display: block;
  }
}

.to-hp {
  position: absolute;
  left: 50%;
  bottom: 30%;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 7px 20px 8px;
  font-weight: 300;
  font-size: 1.4rem;
  font-family: "Lato", "Lucida Grande", sans-serif;
  color: #fff;
  opacity: 0.5;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
  -webkit-border-radius: 30px;
  border-radius: 30px;
  -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.to-hp:hover {
  opacity: 0.8;
}
@media only screen and (max-width : 750px) {
  .to-hp {
    bottom: 20%;
    font-size: 1.3rem;
  }
}

@-webkit-keyframes tileDropout {
  0% {
    opacity: 0.99;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@-moz-keyframes tileDropout {
  0% {
    opacity: 0.99;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@keyframes tileDropout {
  0% {
    opacity: 0.99;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@-webkit-keyframes lemonEnter {
  0% {
    opacity: 0.001;
    -webkit-transform: scale(0.9) translateY(4px) rotate(0deg);
    transform: scale(0.9) translateY(4px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-10px) rotate(0deg);
    transform: translateY(-10px) rotate(0deg);
  }
  100% {
    opacity: 0.999;
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
}
@-moz-keyframes lemonEnter {
  0% {
    opacity: 0.001;
    -webkit-transform: scale(0.9) translateY(4px) rotate(0deg);
    transform: scale(0.9) translateY(4px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-10px) rotate(0deg);
    transform: translateY(-10px) rotate(0deg);
  }
  100% {
    opacity: 0.999;
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
}
@keyframes lemonEnter {
  0% {
    opacity: 0.001;
    -webkit-transform: scale(0.9) translateY(4px) rotate(0deg);
    transform: scale(0.9) translateY(4px) rotate(0deg);
  }
  50% {
    -webkit-transform: translateY(-10px) rotate(0deg);
    transform: translateY(-10px) rotate(0deg);
  }
  100% {
    opacity: 0.999;
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
  }
}
@-webkit-keyframes panelLoading {
  0% {
    opacity: 0;
    fill: #d4d1d1;
  }
  100% {
    opacity: 1;
    fill: #211f1f;
  }
}
@-moz-keyframes panelLoading {
  0% {
    opacity: 0;
    fill: #d4d1d1;
  }
  100% {
    opacity: 1;
    fill: #211f1f;
  }
}
@keyframes panelLoading {
  0% {
    opacity: 0;
    fill: #d4d1d1;
  }
  100% {
    opacity: 1;
    fill: #211f1f;
  }
}
@-webkit-keyframes makeRounds {
  0%, 100% {
    transform: translate(0, 0) rotate(15deg);
  }
  50% {
    transform: translate(0, 300%) rotate(-8deg);
  }
}
@-moz-keyframes makeRounds {
  0%, 100% {
    transform: translate(0, 0) rotate(15deg);
  }
  50% {
    transform: translate(0, 300%) rotate(-8deg);
  }
}
@keyframes makeRounds {
  0%, 100% {
    transform: translate(0, 0) rotate(15deg);
  }
  50% {
    transform: translate(0, 300%) rotate(-8deg);
  }
}
@-webkit-keyframes flyingHearts {
  0%, 100% {
    -webkit-transform: scale(0.4, 1);
    transform: scale(0.4, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
    transform: scale(1.2, 1);
  }
}
@-moz-keyframes flyingHearts {
  0%, 100% {
    -webkit-transform: scale(0.4, 1);
    transform: scale(0.4, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
    transform: scale(1.2, 1);
  }
}
@keyframes flyingHearts {
  0%, 100% {
    -webkit-transform: scale(0.4, 1);
    transform: scale(0.4, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes fallingHeartsLeft {
  0% {
    -webkit-transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
    transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
  }
  100% {
    -webkit-transform: rotate(-52deg) translate(-75px, 175px) scale(1.2, 1);
    transform: rotate(-52deg) translate(-75px, 175px) scale(1.2, 1);
  }
}
@-moz-keyframes fallingHeartsLeft {
  0% {
    -webkit-transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
    transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
  }
  100% {
    -webkit-transform: rotate(-52deg) translate(-75px, 175px) scale(1.2, 1);
    transform: rotate(-52deg) translate(-75px, 175px) scale(1.2, 1);
  }
}
@keyframes fallingHeartsLeft {
  0% {
    -webkit-transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
    transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
  }
  100% {
    -webkit-transform: rotate(-52deg) translate(-75px, 175px) scale(1.2, 1);
    transform: rotate(-52deg) translate(-75px, 175px) scale(1.2, 1);
  }
}
@-webkit-keyframes fallingHeartsRight {
  0% {
    -webkit-transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
    transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
  }
  100% {
    -webkit-transform: rotate(48deg) translate(187px, 2px) scale(1.2, 1);
    transform: rotate(48deg) translate(187px, 2px) scale(1.2, 1);
  }
}
@-moz-keyframes fallingHeartsRight {
  0% {
    -webkit-transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
    transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
  }
  100% {
    -webkit-transform: rotate(48deg) translate(187px, 2px) scale(1.2, 1);
    transform: rotate(48deg) translate(187px, 2px) scale(1.2, 1);
  }
}
@keyframes fallingHeartsRight {
  0% {
    -webkit-transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
    transform: rotate(0deg) translate(0px, 0) scale(1.2, 1);
  }
  100% {
    -webkit-transform: rotate(48deg) translate(187px, 2px) scale(1.2, 1);
    transform: rotate(48deg) translate(187px, 2px) scale(1.2, 1);
  }
}
@-webkit-keyframes dotEnter {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  60% {
    -webkit-transform: scale(1.17);
    transform: scale(1.17);
  }
  100% {
    opacity: 0.999;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes dotEnter {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  60% {
    -webkit-transform: scale(1.17);
    transform: scale(1.17);
  }
  100% {
    opacity: 0.999;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes dotEnter {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  60% {
    -webkit-transform: scale(1.17);
    transform: scale(1.17);
  }
  100% {
    opacity: 0.999;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0.001;
  }
  100% {
    opacity: 0.999;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0.001;
  }
  100% {
    opacity: 0.999;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0.001;
  }
  100% {
    opacity: 0.999;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 0.999;
  }
  100% {
    opacity: 0.001;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 0.999;
  }
  100% {
    opacity: 0.001;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 0.999;
  }
  100% {
    opacity: 0.001;
  }
}
@-webkit-keyframes fadeInAndOut {
  0% {
    opacity: 0.001;
  }
  10% {
    opacity: 0.999;
  }
  80% {
    opacity: 0.999;
  }
  100% {
    opacity: 0.001;
  }
}
@-moz-keyframes fadeInAndOut {
  0% {
    opacity: 0.001;
  }
  10% {
    opacity: 0.999;
  }
  80% {
    opacity: 0.999;
  }
  100% {
    opacity: 0.001;
  }
}
@keyframes fadeInAndOut {
  0% {
    opacity: 0.001;
  }
  10% {
    opacity: 0.999;
  }
  80% {
    opacity: 0.999;
  }
  100% {
    opacity: 0.001;
  }
}
@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}
@-moz-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}
@keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none;
}

@-webkit-keyframes scaleIn {
  from {
    opacity: 0.001;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  to {
    opacity: 0.999;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes scaleIn {
  from {
    opacity: 0.001;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  to {
    opacity: 0.999;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0.001;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  to {
    opacity: 0.999;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes logoEnter {
  0% {
    opacity: 0.001;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  30% {
    opacity: 0.999;
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0.999;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }
}
@-moz-keyframes logoEnter {
  0% {
    opacity: 0.001;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  30% {
    opacity: 0.999;
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0.999;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }
}
@keyframes logoEnter {
  0% {
    opacity: 0.001;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  30% {
    opacity: 0.999;
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0.999;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rocket {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  28% {
    -webkit-transform: translate3d(10px, -10px, 0) rotate(35deg);
    transform: translate3d(10px, -10px, 0) rotate(35deg);
  }
  75% {
    -webkit-transform: translate3d(115px, -12px, 0) rotate(43deg);
    transform: translate3d(115px, -12px, 0) rotate(43deg);
  }
  100% {
    -webkit-transform: translate3d(160px, -12px, 0) rotate(30deg);
    transform: translate3d(160px, -12px, 0) rotate(30deg);
  }
}
@-moz-keyframes rocket {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  28% {
    -webkit-transform: translate3d(10px, -10px, 0) rotate(35deg);
    transform: translate3d(10px, -10px, 0) rotate(35deg);
  }
  75% {
    -webkit-transform: translate3d(115px, -12px, 0) rotate(43deg);
    transform: translate3d(115px, -12px, 0) rotate(43deg);
  }
  100% {
    -webkit-transform: translate3d(160px, -12px, 0) rotate(30deg);
    transform: translate3d(160px, -12px, 0) rotate(30deg);
  }
}
@keyframes rocket {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  28% {
    -webkit-transform: translate3d(10px, -10px, 0) rotate(35deg);
    transform: translate3d(10px, -10px, 0) rotate(35deg);
  }
  75% {
    -webkit-transform: translate3d(115px, -12px, 0) rotate(43deg);
    transform: translate3d(115px, -12px, 0) rotate(43deg);
  }
  100% {
    -webkit-transform: translate3d(160px, -12px, 0) rotate(30deg);
    transform: translate3d(160px, -12px, 0) rotate(30deg);
  }
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
}
.bg.fixed {
  position: fixed;
}
.bg.dark, .slack .bg#top-menu, .gmail .bg#top-menu {
  background-color: rgba(0, 0, 0, 0.85);
}
.bg.transparent {
  background-color: transparent;
}

@-webkit-keyframes fromBottom {
  from {
    opacity: 0.001;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 0.999;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes fromBottom {
  from {
    opacity: 0.001;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 0.999;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fromBottom {
  from {
    opacity: 0.001;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  to {
    opacity: 0.999;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes fromTop {
  from {
    opacity: 0.001;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  to {
    opacity: 0.999;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-moz-keyframes fromTop {
  from {
    opacity: 0.001;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  to {
    opacity: 0.999;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fromTop {
  from {
    opacity: 0.001;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  to {
    opacity: 0.999;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes toTop {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
}
@-moz-keyframes toTop {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
}
@keyframes toTop {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
}
@-webkit-keyframes toLeft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
}
@-moz-keyframes toLeft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
}
@keyframes toLeft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
}
@-webkit-keyframes toRight {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
}
@-moz-keyframes toRight {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
}
@keyframes toRight {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
}
.Icon.spinIcon {
  -webkit-animation: spin 0.6s infinite;
  animation: spin 0.6s infinite;
  display: inline-block;
  padding: 5px;
  color: #959595;
  font-size: 2rem;
  opacity: 0.5;
}

#wrapper {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.column, .wide-column {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 1025px;
}
@media only screen and (max-width : 1180px) {
  .column, .wide-column {
    padding: 0 32px;
  }
}
@media only screen and (max-width : 750px) {
  .column, .wide-column {
    padding: 0 25px;
  }
}
@media only screen and (max-width : 450px) {
  .column, .wide-column {
    padding: 0 20px;
  }
}
@media only screen and (max-width : 361px) {
  .column, .wide-column {
    padding: 0 15px;
  }
}

.wide-column {
  max-width: 1075px;
}

.column-title {
  text-align: left;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.column-title.l {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.column-title.l .title-strip:after {
  -webkit-transform-origin: left;
  transform-origin: left;
}
.column-title.r {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
@media only screen and (max-width : 880px) {
  .column-title.r {
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
}
.column-title.r .title-strip:after {
  -webkit-transform-origin: right;
  transform-origin: right;
}
@media only screen and (max-width : 880px) {
  .column-title.r .title-strip:after {
    -webkit-transform-origin: left;
    transform-origin: left;
  }
}
.column-title.c {
  text-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.column-title.c h2 .title-strip:after {
  -webkit-transform-origin: right;
  transform-origin: right;
}
.column-title.c p .title-strip:after, .column-title.c blockquote .title-strip:after {
  -webkit-transform-origin: left;
  transform-origin: left;
}
.column-title .title-strip {
  position: relative;
}
.column-title .title-strip:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  bottom: -1px;
  will-change: transform;
  -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
.column-title h2 {
  color: #000;
  font-size: 4.2rem;
  line-height: 1.3;
}
@media only screen and (max-width : 880px) {
  .column-title h2 {
    font-size: 4.2rem;
  }
}
@media only screen and (max-width : 1180px) {
  .column-title h2 {
    font-size: 3.4rem;
  }
}
@media only screen and (max-width : 750px) {
  .column-title h2 {
    font-size: 2.7rem;
  }
}
.column-title h2 .title-strip:nth-of-type(2):after {
  -webkit-transition-delay: 0.1s !important;
  transition-delay: 0.1s !important;
}
.column-title h2 .title-strip:nth-of-type(3):after {
  -webkit-transition-delay: 0.2s !important;
  transition-delay: 0.2s !important;
}
.column-title p {
  font-size: 2rem;
  margin-top: 8px;
}
@media only screen and (max-width : 1180px) {
  .column-title p {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width : 750px) {
  .column-title p {
    font-size: 1.6rem;
  }
}
.column-title p, .column-title .zest-influencer, .column-title .influencer .name {
  color: #4b474d;
}
.column-title p .title-strip:nth-of-type(1):after, .column-title blockquote .title-strip:nth-of-type(1):after {
  -webkit-transition-delay: 0.2s !important;
  transition-delay: 0.2s !important;
}
.column-title p .title-strip:nth-of-type(2):after, .column-title blockquote .title-strip:nth-of-type(2):after {
  -webkit-transition-delay: 0.3s !important;
  transition-delay: 0.3s !important;
}
.column-title p .title-strip:nth-of-type(3):after, .column-title blockquote .title-strip:nth-of-type(3):after {
  -webkit-transition-delay: 0.4s !important;
  transition-delay: 0.4s !important;
}
.column-title.inview.active .title-strip:after {
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}
.column-title.inview.active .influencer, .column-title.inview.active blockquote:before, .column-title.inview.active blockquote:after {
  -webkit-transition: opacity 0.3s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 1;
}
.column-title.white h2, .column-title.white .zest-influencer, .column-title.white .influencer .name {
  color: #fff;
}
.column-title.white p {
  color: rgba(255, 255, 255, 0.8);
}

@-webkit-keyframes iconActive {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@-moz-keyframes iconActive {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes iconActive {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
#loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  background-color: #fff;
  z-index: 1000;
  opacity: 0.999;
  -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#loader.done {
  pointer-events: none;
  opacity: 0.001;
}
#loader div {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#loader div:before {
  content: "";
  position: absolute;
  width: 28px;
  height: 0;
  left: 5px;
  bottom: -20px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-color: #efefef;
  box-shadow: 0 0 20px 10px #efefef;
  -webkit-animation: loaderShadow 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
  animation: loaderShadow 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
#loader img {
  display: block;
  position: relative;
  -webkit-animation: loader 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
  animation: loader 2s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

@-webkit-keyframes loader {
  0%, 100% {
    -webkit-transform: scale(1, 1) translateY(0) rotate(0deg);
    transform: scale(1, 1) translateY(0) rotate(0deg);
  }
  30%, 80% {
    -webkit-transform: scale(1, 1.07) translateY(5px) rotate(-1deg);
    transform: scale(1, 1.07) translateY(5px) rotate(-1deg);
  }
  50% {
    -webkit-transform: scale(1.05, 1) translateY(-10px) rotate(5deg);
    transform: scale(1.05, 1) translateY(-10px) rotate(5deg);
  }
}
@-moz-keyframes loader {
  0%, 100% {
    -webkit-transform: scale(1, 1) translateY(0) rotate(0deg);
    transform: scale(1, 1) translateY(0) rotate(0deg);
  }
  30%, 80% {
    -webkit-transform: scale(1, 1.07) translateY(5px) rotate(-1deg);
    transform: scale(1, 1.07) translateY(5px) rotate(-1deg);
  }
  50% {
    -webkit-transform: scale(1.05, 1) translateY(-10px) rotate(5deg);
    transform: scale(1.05, 1) translateY(-10px) rotate(5deg);
  }
}
@keyframes loader {
  0%, 100% {
    -webkit-transform: scale(1, 1) translateY(0) rotate(0deg);
    transform: scale(1, 1) translateY(0) rotate(0deg);
  }
  30%, 80% {
    -webkit-transform: scale(1, 1.07) translateY(5px) rotate(-1deg);
    transform: scale(1, 1.07) translateY(5px) rotate(-1deg);
  }
  50% {
    -webkit-transform: scale(1.05, 1) translateY(-10px) rotate(5deg);
    transform: scale(1.05, 1) translateY(-10px) rotate(5deg);
  }
}
@-webkit-keyframes loaderShadow {
  0%, 100% {
    -webkit-transform: scale(1.05, 1);
    transform: scale(1.05, 1);
    opacity: 0.85;
  }
  30%, 80% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.15, 1.05);
    transform: scale(1.15, 1.05);
    opacity: 0.75;
  }
}
@-moz-keyframes loaderShadow {
  0%, 100% {
    -webkit-transform: scale(1.05, 1);
    transform: scale(1.05, 1);
    opacity: 0.85;
  }
  30%, 80% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.15, 1.05);
    transform: scale(1.15, 1.05);
    opacity: 0.75;
  }
}
@keyframes loaderShadow {
  0%, 100% {
    -webkit-transform: scale(1.05, 1);
    transform: scale(1.05, 1);
    opacity: 0.85;
  }
  30%, 80% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.15, 1.05);
    transform: scale(1.15, 1.05);
    opacity: 0.75;
  }
}
@-webkit-keyframes upAndDownLight {
  0%, 100% {
    -webkit-transform: scale(1, 1) translateY(0) rotate(0deg);
    transform: scale(1, 1) translateY(0) rotate(0deg);
  }
  50% {
    -webkit-transform: scale(1.02, 1) translateY(-5px) rotate(0deg);
    transform: scale(1.02, 1) translateY(-5px) rotate(0deg);
  }
}
@-moz-keyframes upAndDownLight {
  0%, 100% {
    -webkit-transform: scale(1, 1) translateY(0) rotate(0deg);
    transform: scale(1, 1) translateY(0) rotate(0deg);
  }
  50% {
    -webkit-transform: scale(1.02, 1) translateY(-5px) rotate(0deg);
    transform: scale(1.02, 1) translateY(-5px) rotate(0deg);
  }
}
@keyframes upAndDownLight {
  0%, 100% {
    -webkit-transform: scale(1, 1) translateY(0) rotate(0deg);
    transform: scale(1, 1) translateY(0) rotate(0deg);
  }
  50% {
    -webkit-transform: scale(1.02, 1) translateY(-5px) rotate(0deg);
    transform: scale(1.02, 1) translateY(-5px) rotate(0deg);
  }
}
.alerts {
  display: none;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.4rem !important;
  color: #FF765F !important;
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: 12px;
  font-style: italic;
  -webkit-animation: scaleIn 0.15s both;
  animation: scaleIn 0.15s both;
}
.alerts.success {
  color: #4b474d !important;
  font-size: 1.6rem !important;
}
.alerts.success.white {
  color: #fff !important;
}

form button i.icon-loading {
  -webkit-animation: spin 0.5s linear infinite;
  animation: spin 0.5s linear infinite;
}

.async-hide {
  opacity: 0 !important;
}

/* -----> Components <----- */
.hero-title {
  font-size: 5.5rem;
  font-weight: 600;
  line-height: 7rem;
}

.hero-subtitle {
  font-size: 2.8rem;
  line-height: 3.8rem;
}

.tile {
  background-color: #fff;
  border-radius: 14px;
  width: 100%;
  -webkit-transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  box-shadow: -4px -4px 30px 8px rgba(239, 239, 239, 0.2);
  -webkit-box-shadow: -4px -4px 30px 8px rgba(239, 239, 239, 0.2);
}
.tile:hover {
  box-shadow: 0px 0px 20px 5px rgba(144, 144, 144, 0.3);
  -webkit-box-shadow: 0px 0px 20px 5px rgba(144, 144, 144, 0.3);
}

/* -----> Input <----- */
.input-field {
  border-bottom: 1px solid #7f7f7f;
  padding-bottom: 5px;
  position: relative;
}
.input-field input, .input-field textarea {
  font-size: 1.6rem;
  font-weight: 300;
  font-family: "Lato", "Lucida Grande", sans-serif;
  line-height: 2.8rem;
  color: #7f7f7f;
  width: 100%;
  background-color: transparent;
}
.input-field input::-webkit-input-placeholder, .input-field textarea::-webkit-input-placeholder {
  color: #7f7f7f;
  opacity: 1;
  font-size: 1.6rem;
  font-weight: 300;
  -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.input-field textarea {
  resize: none;
  border: 1px solid #7f7f7f;
  padding: 12px 17px;
  border-radius: 6px;
}
.input-field.textarea {
  border-bottom: none;
  padding-bottom: 0;
}
.input-field.horizontal {
  display: inline-block;
  vertical-align: middle;
}
.input-field.error {
  border-bottom-color: #FF765F;
}
.input-field.error::after {
  display: block;
  content: attr(data-error);
  position: absolute;
  font-size: 1.2em;
  left: 0;
  bottom: -1.7em;
  color: #FF765F;
  white-space: nowrap;
  -webkit-animation: scaleIn 0.15s both;
  animation: scaleIn 0.15s both;
}
.input-field.loading {
  border-bottom-color: #ffcf2e;
}
.input-field.loading::after {
  display: none;
}
.input-field.success {
  border-bottom-color: #00C999;
}
.input-field.success::after {
  display: block;
  content: attr(data-success);
  position: absolute;
  font-size: 1.2em;
  left: 0;
  bottom: -1.7em;
  color: #00C999;
  white-space: nowrap;
  -webkit-animation: scaleIn 0.15s both;
  animation: scaleIn 0.15s both;
}
.input-field.mandatory::before {
  content: "";
  background-color: #FF765F;
  width: 6px;
  height: 6px;
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 4px;
  -webkit-transform: translate(-300%, -50%);
  transform: translate(-300%, -50%);
}

/* -----> Checkbox <----- */
.checkbox {
  white-space: nowrap;
}
.checkbox > label > span:first-child {
  color: #a7a7a7;
  cursor: pointer;
  background-color: #f7f7f7;
  border: 1px solid #efefef;
  margin-top: -1px;
  border-radius: 0.5em;
  height: 2rem;
  width: 2rem;
  display: inline-block;
  vertical-align: middle;
}
.checkbox > label > span:first-child > i {
  font-size: 2.2em;
  line-height: 1rem;
  margin-left: -0.6rem;
  margin-top: 0.4rem;
  opacity: 0;
  display: inline-block;
  vertical-align: top;
}
.checkbox > label span:last-child {
  margin-left: 5px;
  cursor: pointer;
}
.checkbox.active i {
  -webkit-animation: scaleIn 0.15s both;
  animation: scaleIn 0.15s both;
}

/* -----> Button <----- */
.btn {
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-family: "Circe-Light", "Lucida Grande", serif;
  font-size: 1.6rem;
  line-height: 2.5rem;
  padding: 9px 20px 10px 13px;
  font-weight: 400;
  text-align: center;
  -webkit-touch-callout: none;
  display: inline-block;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  /* Colors */
  /* Sizes */
}
.btn > i.icon {
  font-size: 1.4em;
  display: inline-block;
  vertical-align: middle;
}
.btn > span {
  display: inline-block;
  vertical-align: middle;
}
.btn.green {
  background-color: #00C999;
  color: #fff;
}
.btn.green:hover {
  background-color: #00b086;
}
.btn.yellow {
  background-color: #FFDB00;
  color: #5e079a;
}
.btn.yellow:hover {
  background-color: #e6c500;
}
.btn.purple {
  background-color: #5e079a;
  color: #ffcf2e;
}
.btn.purple:hover {
  background-color: #4f0682;
}
.btn.ghost {
  background-color: transparent;
  border: 1px solid #7f7f7f;
  color: #7f7f7f;
  font-weight: 400;
  opacity: 0.8;
}
.btn.ghost:hover {
  opacity: 1;
  border-color: #00C999;
  color: #00C999;
}
.btn.ghost:active {
  opacity: 1;
  border-color: #00C999;
  background-color: #00C999;
  color: #fff;
}
.btn.fat {
  font-size: 2.1rem;
  padding: 22px 40px 22px 30px;
}
.btn.small {
  font-size: 1.4rem;
  line-height: 1em;
  padding: 13px 32px;
}
.btn.tiny {
  font-size: 1.25rem;
  line-height: 1.4rem;
  padding: 12px 24px;
}

[rel=nofollow] {
  text-decoration: none !important;
}

/* Light Button */
/* Light Inverted Button */
/* Primary Button */
/* Primary Inverted Button */
/* Download Button */
/* Inverted Download Button */
/* Primary Input */
/* Secondary Input */
/* Zest */
/* User Card */
/* SignUp Form */
/* Color palette */
.btn-base, .btn-ghost, .user-card .user-footer .btn-ghost, .btn-download-invert, .btn-download, .btn-light-invert, .btn-light, .btn-primary-invert, .btn-primary {
  display: inline-flex;
  display: -webkit-inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 15px 25px;
  border-radius: 8px;
  cursor: pointer;
  perspective-origin: none;
  -webkit-user-select: none;
  user-select: none;
}
@media screen and (max-width: 669px) {
  .btn-base, .btn-ghost, .user-card .user-footer .btn-ghost, .btn-download-invert, .btn-download, .btn-light-invert, .btn-light, .btn-primary-invert, .btn-primary {
    padding: 15px;
  }
}
.btn-base .label, .btn-ghost .label, .user-card .user-footer .btn-ghost .label, .btn-download-invert .label, .btn-download .label, .btn-light-invert .label, .btn-light .label, .btn-primary-invert .label, .btn-primary .label, .btn-base .icon, .btn-ghost .icon, .user-card .user-footer .btn-ghost .icon, .btn-download-invert .icon, .btn-download .icon, .btn-light-invert .icon, .btn-light .icon, .btn-primary-invert .icon, .btn-primary .icon {
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.4rem;
  line-height: 1.3em;
  letter-spacing: 0.17px;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media screen and (max-width: 669px) {
  .btn-base .label, .btn-ghost .label, .user-card .user-footer .btn-ghost .label, .btn-download-invert .label, .btn-download .label, .btn-light-invert .label, .btn-light .label, .btn-primary-invert .label, .btn-primary .label, .btn-base .icon, .btn-ghost .icon, .user-card .user-footer .btn-ghost .icon, .btn-download-invert .icon, .btn-download .icon, .btn-light-invert .icon, .btn-light .icon, .btn-primary-invert .icon, .btn-primary .icon {
    font-size: 1.3rem;
  }
}
.btn-base .label, .btn-ghost .label, .user-card .user-footer .btn-ghost .label, .btn-download-invert .label, .btn-download .label, .btn-light-invert .label, .btn-light .label, .btn-primary-invert .label, .btn-primary .label {
  font-size: 1.3rem;
}
.btn-base .icon, .btn-ghost .icon, .user-card .user-footer .btn-ghost .icon, .btn-download-invert .icon, .btn-download .icon, .btn-light-invert .icon, .btn-light .icon, .btn-primary-invert .icon, .btn-primary .icon {
  margin-left: 15px;
}
.btn-base .icon.right, .btn-ghost .icon.right, .btn-download-invert .icon.right, .btn-download .icon.right, .btn-light-invert .icon.right, .btn-light .icon.right, .btn-primary-invert .icon.right, .btn-primary .icon.right {
  margin-left: 0;
  margin-right: 15px;
}
.btn-base .icon-loading, .btn-ghost .icon-loading, .user-card .user-footer .btn-ghost .icon-loading, .btn-download-invert .icon-loading, .btn-download .icon-loading, .btn-light-invert .icon-loading, .btn-light .icon-loading, .btn-primary-invert .icon-loading, .btn-primary .icon-loading {
  margin-right: -15px;
  -webkit-animation: spin 0.5s linear infinite;
  animation: spin 0.5s linear infinite;
}

.btn-primary {
  background-color: #fdd85b;
}
.btn-primary, .btn-primary:focus, .btn-primary .focus {
  box-shadow: 0 0 5px 0 rgba(47, 5, 88, 0.1);
  -webkit-box-shadow: 0 0 5px 0 rgba(47, 5, 88, 0.1);
}
.btn-primary .label, .btn-primary .icon {
  font-weight: bold;
  color: #5e079b;
}
.btn-primary:hover, .btn-primary .hover {
  background-color: #f9ca69;
  box-shadow: 0 0 5px 0 rgba(47, 5, 88, 0.1);
  -webkit-box-shadow: 0 0 5px 0 rgba(47, 5, 88, 0.1);
}
.btn-primary:hover .label, .btn-primary .hover .label {
  color: #4c0a8e;
}
.btn-primary:active, .btn-primary .active {
  background-color: #ecca5a;
  box-shadow: 0 3px 10px 0 rgba(47, 5, 88, 0.1);
  -webkit-box-shadow: 0 3px 10px 0 rgba(47, 5, 88, 0.1);
}
.btn-primary:active .label, .btn-primary .active .label {
  color: #5e079b;
}

.btn-primary-invert {
  background-color: #5804a0;
}
.btn-primary-invert, .btn-primary-invert:focus, .btn-primary-invert .focus {
  box-shadow: 0 16px 35px 0 rgba(93, 6, 155, 0.39);
  -webkit-box-shadow: 0 16px 35px 0 rgba(93, 6, 155, 0.39);
}
.btn-primary-invert .label {
  font-weight: bold;
  color: #f8c14f;
}
.btn-primary-invert .icon {
  color: #f8c14f;
  display: inline-block;
  vertical-align: middle;
}
.btn-primary-invert .icon::before {
  color: inherit;
}
.btn-primary-invert:hover, .btn-primary-invert .hover {
  background-color: #6a1ea8;
  box-shadow: 0 16px 35px 0 rgba(93, 6, 155, 0.39);
  -webkit-box-shadow: 0 16px 35px 0 rgba(93, 6, 155, 0.39);
}
.btn-primary-invert:hover .label, .btn-primary-invert .hover .label {
  color: #f8c14f;
}
.btn-primary-invert:active, .btn-primary-invert .active {
  background-color: #4c068f;
  box-shadow: 0 0 20px 0 rgba(93, 6, 155, 0.39);
  -webkit-box-shadow: 0 0 20px 0 rgba(93, 6, 155, 0.39);
}
.btn-primary-invert:active .label, .btn-primary-invert .active .label {
  color: #f8c14f;
}

.btn-light {
  background-color: #e2dbf4;
}
.btn-light, .btn-light:focus, .btn-light .focus {
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.03);
  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.03);
}
.btn-light .label {
  color: #4c0a8e;
}
.btn-light:hover, .btn-light .hover {
  background-color: #ede9f8;
  box-shadow: none;
}
.btn-light:hover .label, .btn-light .hover .label {
  color: #6431c4;
}
.btn-light:active, .btn-light .active {
  background-color: #c9c1e0;
  box-shadow: none;
}
.btn-light:active .label, .btn-light .active .label {
  color: #4c0a8e;
}

.btn-light-invert {
  padding: 12px 30px;
  background-color: transparent;
  border: 2px solid #e2dbf4;
}
@media screen and (max-width: 669px) {
  .btn-light-invert {
    padding: 10px 20px;
  }
}
.btn-light-invert .label {
  color: #e2dbf4;
  text-transform: none;
}
.btn-light-invert:hover, .btn-light-invert .hover {
  background-color: #7424b1;
}
.btn-light-invert:hover .label, .btn-light-invert .hover .label {
  color: #e2dbf4;
}
.btn-light-invert:active, .btn-light-invert .active {
  background-color: #551883;
}
.btn-light-invert:active .label, .btn-light-invert .active .label {
  color: #e2dbf4;
}

.btn-download {
  padding: 15px 26px;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: #2b1b4c;
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  background-color: #f7f7f7;
}
.btn-download .icon {
  font-size: 2.4rem;
  line-height: 3.2rem;
  margin-left: 0px;
  margin-right: 15px;
}
.btn-download, .btn-download:focus, .btn-download .focus {
  box-shadow: 0 4px 5px 0 #ced0d8;
  -webkit-box-shadow: 0 4px 5px 0 #ced0d8;
}
.btn-download:hover, .btn-download .hover {
  background-color: #f2f2f3;
  box-shadow: 0 4px 5px 0 #ced0d8;
  -webkit-box-shadow: 0 4px 5px 0 #ced0d8;
}
.btn-download:active, .btn-download .active {
  background-color: #efeff1;
  box-shadow: 0 0 5px 0 #ced0d8;
  -webkit-box-shadow: 0 0 5px 0 #ced0d8;
}

.btn-download-invert {
  padding: 7px 13px;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.3rem;
  line-height: 1.5rem;
  color: #2b1b4c;
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  background-color: transparent;
}
.btn-download-invert .icon {
  font-size: 2rem;
  line-height: 2rem;
  margin-left: 0;
  margin-right: 10px;
}
.btn-download-invert, .btn-download-invert:focus, .btn-download-invert .focus {
  border: solid 2px #7d769e;
}
.btn-download-invert:hover, .btn-download-invert .hover {
  border-color: #6a6385;
}
.btn-download-invert:active, .btn-download-invert .active {
  border-color: #55506b;
}

.btn-ghost, .user-card .user-footer .btn-ghost {
  font-size: 1.4rem;
  display: inline-flex;
  display: -webkit-inline-flex;
  -webkit-align-items: center;
  align-items: center;
  perspective-origin: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.btn-ghost .label, .user-card .user-footer .btn-ghost .label {
  display: inline-block;
  vertical-align: middle;
  line-height: 2rem;
  color: white;
}
.btn-ghost .icon, .user-card .user-footer .btn-ghost .icon {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-size: 0.9em;
  line-height: 2rem;
  opacity: 0;
  -webkit-transform: translate(-5px, 0);
  transform: translate(-5px, 0);
}
.btn-ghost:hover > .icon, .user-card .user-footer .btn-ghost:hover > .icon {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
.btn-ghost, .user-card .user-footer .btn-ghost, .btn-ghost .icon, .user-card .user-footer .btn-ghost .icon {
  font-weight: bold;
}

.input-wrapper {
  position: relative;
  display: inline-block;
}
.input-wrapper .icon {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
}
.input-wrapper .icon.clickable {
  pointer-events: all;
  cursor: pointer;
}
.input-wrapper .primary-input + .icon {
  color: #fff;
}
.input-wrapper .secondary-input + .icon {
  color: #160a52;
}
.input-wrapper .secondary-input.error + .icon {
  color: #e3476e;
}
.input-wrapper.focus-only .icon {
  opacity: 0;
}
.input-wrapper.focus-only .icon.clickable {
  pointer-events: none;
}
.input-wrapper.focus-only .input-base:not(:placeholder-shown) + .icon, .input-wrapper.focus-only .secondary-input:not(:placeholder-shown) + .icon, .input-wrapper.focus-only .primary-input:not(:placeholder-shown) + .icon {
  opacity: 1;
}
.input-wrapper.focus-only .input-base:not(:placeholder-shown) + .icon.clickable, .input-wrapper.focus-only .secondary-input:not(:placeholder-shown) + .icon.clickable, .input-wrapper.focus-only .primary-input:not(:placeholder-shown) + .icon.clickable {
  pointer-events: all;
}

.input-base, .secondary-input, .primary-input {
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.4rem;
  background-color: transparent;
  position: relative;
  border-radius: 8px;
  width: 100%;
}

.primary-input {
  color: #fff;
  background-image: linear-gradient(124deg, rgba(242, 229, 255, 0.16) 5%, rgba(214, 185, 240, 0.16) 92%);
  padding: 13px 45px 13px 25px;
}
.primary-input::placeholder {
  color: rgba(249, 226, 255, 0.8);
}
.primary-input:-ms-input-placeholder {
  color: rgba(249, 226, 255, 0.8);
}
.primary-input::-ms-input-placeholder {
  color: rgba(249, 226, 255, 0.8);
}
.primary-input::-webkit-input-placeholder {
  color: rgba(249, 226, 255, 0.8);
}

.secondary-input {
  color: #160a52;
  background-color: rgba(125, 118, 158, 0.08);
  padding: 14px 50px 15px 28px;
  border: solid 2px transparent;
}
.secondary-input::placeholder {
  color: #7d769e;
}
.secondary-input:-ms-input-placeholder {
  color: #7d769e;
}
.secondary-input::-ms-input-placeholder {
  color: #7d769e;
}
.secondary-input::-webkit-input-placeholder {
  color: #7d769e;
}
.secondary-input.error {
  color: #e3476e;
  border: solid 2px rgba(255, 20, 47, 0.2);
  background-color: rgba(255, 20, 47, 0.08);
}
.secondary-input.error::placeholder {
  color: rgba(227, 71, 110, 0.4);
}
.secondary-input.error:-ms-input-placeholder {
  color: rgba(227, 71, 110, 0.4);
}
.secondary-input.error::-ms-input-placeholder {
  color: rgba(227, 71, 110, 0.4);
}
.secondary-input.error::-webkit-input-placeholder {
  color: rgba(227, 71, 110, 0.4);
}

.link {
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.8rem;
  line-height: 2.9rem;
  color: #2b1b4c;
  font-weight: normal;
  text-align: center;
}
.link:hover, .link:active {
  font-weight: bold;
}

.nav-arrow {
  font-size: 2.5rem;
  line-height: 1;
  color: #160a52;
  font-weight: normal;
  text-align: center;
  display: inline-block;
  font-weight: bold;
}
.nav-arrow:hover {
  color: #4c0a8e;
}
.nav-arrow:active {
  color: #6431c4;
}

.tab-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.tab-wrapper .tab {
  flex: 1;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.4rem;
  line-height: 2.9rem;
  color: #160a52;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  perspective-origin: none;
  -webkit-user-select: none;
  user-select: none;
}
.tab-wrapper .tab span {
  position: relative;
  cursor: pointer;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tab-wrapper .tab span:hover {
  font-weight: bold;
}
.tab-wrapper .tab span::after {
  content: " ";
  opacity: 0;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  .tab-wrapper .tab {
    font-size: 1.2rem;
  }
}
.tab-wrapper .tab.selected span {
  font-weight: bold;
}
.tab-wrapper .tab.selected span::after {
  position: absolute;
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  content: "";
  width: 100%;
  bottom: -5px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background-color: #6431c4;
}

.zest {
  width: 100%;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  -webkit-animation: zestIn 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) both;
  animation: zestIn 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) both;
  background-image: linear-gradient(to left, #fcfcfc, #f5f5f5);
  display: inline-flex;
  display: -webkit-inline-flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  cursor: pointer;
}
.zest:nth-of-type(1) {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}
.zest:nth-of-type(2) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.zest:nth-of-type(3) {
  -webkit-animation-delay: 450ms;
  animation-delay: 450ms;
}
.zest:hover, .zest.hover {
  background-image: linear-gradient(to left, #fcfcfc, #fcfcfc);
}
.zest .zest-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 15px;
  flex-shrink: 0;
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  .zest .zest-img {
    width: 70px;
    height: 70px;
  }
}
.zest .zest-body {
  font-family: "Lato", "Lucida Grande", sans-serif;
}
.zest .zest-body .header {
  font-weight: bold;
  font-size: 1.7rem;
  color: #160a52;
  margin-bottom: 3px;
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  .zest .zest-body .header {
    font-size: 1.4rem;
  }
}
.zest .zest-body .suggester, .zest .zest-body .info {
  font-size: 1.4rem;
  color: #7d769e;
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  .zest .zest-body .suggester, .zest .zest-body .info {
    font-size: 1.2rem;
  }
}
.zest .zest-body .info {
  margin-top: 3px;
  font-size: 1.3rem;
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  .zest .zest-body .info {
    font-size: 1.2rem;
  }
}
.zest, .zest:focus, .zest:hover, .zest.focus, .zest.hover {
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
}
.zest:active, .zest.active {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.04);
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.04);
}

@keyframes zestIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.user-card {
  margin: 94px 0 40px;
  padding: 90px 20px 0;
  max-width: 322px;
  border-radius: 6px 6px 0 6px;
  position: relative;
  z-index: 1;
  font-family: "Lato", "Lucida Grande", sans-serif;
  position: relative;
  display: inline-flex;
  display: -webkit-inline-flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.user-card .user-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 50px 0px rgba(22, 10, 82, 0.5);
  -webkit-box-shadow: 0 5px 50px 0px rgba(22, 10, 82, 0.5);
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  .user-card .user-img {
    width: 100px;
    height: 100px;
  }
}
@media screen and (max-width: 669px) {
  .user-card .user-img {
    box-shadow: 0 5px 20px 0px rgba(22, 10, 82, 0.5);
    -webkit-box-shadow: 0 5px 20px 0px rgba(22, 10, 82, 0.5);
  }
}
.user-card .user-body {
  margin-bottom: 25px;
  text-align: left;
}
.user-card .user-body .caption {
  font-weight: bold;
  font-size: 1.7rem;
  color: #160a52;
  margin-bottom: 8px;
}
.user-card .user-body .description {
  font-size: 1.4rem;
  line-height: 1.6em;
  color: #7d769e;
  max-height: 156px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-card .user-footer {
  padding-bottom: 20px;
  text-align: left;
}
.user-card .user-footer .btn-ghost {
  font-weight: 400;
  padding-left: 0;
  font-size: 1.4rem;
  display: inline-block;
  color: #6431c4;
}
.user-card .user-footer .btn-ghost .icon {
  -webkit-transform: none;
  transform: none;
}
.user-card .user-footer .btn-ghost .label {
  color: #6431c4;
}
.user-card, .user-card:focus, .user-card.focus {
  background-image: linear-gradient(to bottom, #f4f4f4 6%, #ffffff 100%);
  box-shadow: 0 10px 15px 0 rgba(183, 186, 194, 0.1);
  -webkit-box-shadow: 0 10px 15px 0 rgba(183, 186, 194, 0.1);
}
.user-card:hover, .user-card.hover {
  background-image: linear-gradient(to bottom, #f4f4f4 6%, #fafafa 100%);
  box-shadow: 0 10px 15px 0 rgba(183, 186, 194, 0.1);
  -webkit-box-shadow: 0 10px 15px 0 rgba(183, 186, 194, 0.1);
}
.user-card:active, .user-card.active {
  background-image: linear-gradient(to bottom, #f4f4f4 6%, #f7f7f7 100%);
  box-shadow: 0 10px 15px 0 rgba(183, 186, 194, 0.1);
  -webkit-box-shadow: 0 10px 15px 0 rgba(183, 186, 194, 0.1);
}
.user-card::after {
  background-image: inherit;
  box-shadow: inherit;
  transform: skewy(4deg);
  transform-origin: bottom left;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 6px;
}

@media screen and (min-width: 981px) and (max-width: 1160px) {
  body, html {
    font-size: 9px;
  }
}
/* Common CSS Classes */
.container {
  margin: 0 auto;
  max-width: 1080px;
  min-width: 327px;
  width: 95%;
}
@media screen and (min-width: 200px) and (max-width: 910px) {
  .container {
    height: auto;
    max-height: 500vh;
    min-height: 0;
  }
}

.h3-title, #signup h3, #repository > div:first-child main h3 {
  font-family: "Circe-Light", "Lucida Grande", serif;
  color: #160a52;
  font-size: 4.5rem;
  line-height: 1.3em;
  margin-bottom: 2rem;
}
.h3-title > span, #signup h3 > span, #repository > div:first-child main h3 > span {
  font-family: "Circe-Regular", "Lucida Grande", serif;
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  .h3-title, #signup h3, #repository > div:first-child main h3 {
    font-size: 4rem;
    margin-bottom: 1.8rem;
  }
}
@media screen and (max-width: 669px) {
  .h3-title, #signup h3, #repository > div:first-child main h3 {
    font-size: 3rem;
    margin-bottom: 1.3rem;
  }
}

.section-paragraph, #signup p, #repository > div:first-child main p {
  color: #535a68;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.7rem;
  line-height: 1.8em;
  font-weight: 400;
  margin-bottom: 5rem;
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  .section-paragraph, #signup p, #repository > div:first-child main p {
    font-size: 1.6rem;
    margin-bottom: 4rem;
  }
}
@media screen and (max-width: 669px) {
  .section-paragraph, #signup p, #repository > div:first-child main p {
    margin-bottom: 3rem;
  }
  .section-paragraph br, #signup p br, #repository > div:first-child main p br {
    display: none;
  }
}

.h5-hint, #repository > div:first-child main h5 {
  color: #5e079a;
  text-transform: uppercase;
  font-size: 1.7rem;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-weight: 400;
  margin-bottom: 15px;
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  .h5-hint, #repository > div:first-child main h5 {
    font-size: 1.6rem;
  }
}

.feature, #wherever, #search, #proactive, #information-fronts {
  float: none;
  background-color: #fff;
  padding-top: 130px;
  padding-bottom: 120px;
  position: relative;
  text-align: left;
}
.feature.right > .container, .right#wherever > .container, .right#search > .container, .right#proactive > .container, .right#information-fronts > .container {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media screen and (max-width: 780px) {
  .feature.right > .container, .right#wherever > .container, .right#search > .container, .right#proactive > .container, .right#information-fronts > .container {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
.feature.right > .container aside > figure, .right#wherever > .container aside > figure, .right#search > .container aside > figure, .right#proactive > .container aside > figure, .right#information-fronts > .container aside > figure {
  -webkit-transform: translate(38%, -45%);
  transform: translate(38%, -45%);
}
@media screen and (max-width: 780px) {
  .feature.right > .container aside > figure, .right#wherever > .container aside > figure, .right#search > .container aside > figure, .right#proactive > .container aside > figure, .right#information-fronts > .container aside > figure {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    margin-top: 0;
  }
}
.feature.active > .container main ul li, .active#wherever > .container main ul li, .active#search > .container main ul li, .active#proactive > .container main ul li, .active#information-fronts > .container main ul li {
  -webkit-animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
  animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
}
.feature.active > .container main ul li:nth-of-type(1), .active#wherever > .container main ul li:nth-of-type(1), .active#search > .container main ul li:nth-of-type(1), .active#proactive > .container main ul li:nth-of-type(1), .active#information-fronts > .container main ul li:nth-of-type(1) {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
.feature.active > .container main ul li:nth-of-type(2), .active#wherever > .container main ul li:nth-of-type(2), .active#search > .container main ul li:nth-of-type(2), .active#proactive > .container main ul li:nth-of-type(2), .active#information-fronts > .container main ul li:nth-of-type(2) {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
.feature.active > .container main ul li:nth-of-type(3), .active#wherever > .container main ul li:nth-of-type(3), .active#search > .container main ul li:nth-of-type(3), .active#proactive > .container main ul li:nth-of-type(3), .active#information-fronts > .container main ul li:nth-of-type(3) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.feature.active > .container main ul li:nth-of-type(4), .active#wherever > .container main ul li:nth-of-type(4), .active#search > .container main ul li:nth-of-type(4), .active#proactive > .container main ul li:nth-of-type(4), .active#information-fronts > .container main ul li:nth-of-type(4) {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
.feature.active > .container main ul li:nth-of-type(5), .active#wherever > .container main ul li:nth-of-type(5), .active#search > .container main ul li:nth-of-type(5), .active#proactive > .container main ul li:nth-of-type(5), .active#information-fronts > .container main ul li:nth-of-type(5) {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
.feature.active > .container main ul li .icon, .active#wherever > .container main ul li .icon, .active#search > .container main ul li .icon, .active#proactive > .container main ul li .icon, .active#information-fronts > .container main ul li .icon {
  -webkit-animation: scaleIn 0.25s cubic-bezier(0.36, 0.29, 0.28, 2) 1 forwards;
  animation: scaleIn 0.25s cubic-bezier(0.36, 0.29, 0.28, 2) 1 forwards;
}
.feature.active > .container main ul li:first-child .icon, .active#wherever > .container main ul li:first-child .icon, .active#search > .container main ul li:first-child .icon, .active#proactive > .container main ul li:first-child .icon, .active#information-fronts > .container main ul li:first-child .icon {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
.feature.active > .container main ul li:nth-child(2) .icon, .active#wherever > .container main ul li:nth-child(2) .icon, .active#search > .container main ul li:nth-child(2) .icon, .active#proactive > .container main ul li:nth-child(2) .icon, .active#information-fronts > .container main ul li:nth-child(2) .icon {
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}
@media screen and (max-width: 780px) {
  .feature, #wherever, #search, #proactive, #information-fronts {
    padding-top: 80px;
  }
}
.feature > .container, #wherever > .container, #search > .container, #proactive > .container, #information-fronts > .container {
  display: grid;
  grid-template-columns: 1fr 500px;
  grid-column-gap: 30px;
  position: relative;
  color: #e9dbf4;
}
@media screen and (max-width: 780px) {
  .feature > .container, #wherever > .container, #search > .container, #proactive > .container, #information-fronts > .container {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 90vw;
  }
}
.feature > .container main, #wherever > .container main, #search > .container main, #proactive > .container main, #information-fronts > .container main {
  position: relative;
  z-index: 0;
}
.feature > .container main h5, #wherever > .container main h5, #search > .container main h5, #proactive > .container main h5, #information-fronts > .container main h5 {
  color: #4c0a8e;
  text-transform: uppercase;
  font-size: 1.7rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.feature > .container main h3, #wherever > .container main h3, #search > .container main h3, #proactive > .container main h3, #information-fronts > .container main h3 {
  font-family: "Circe-Light", "Lucida Grande", serif;
  font-size: 4.5rem;
  line-height: 1.3em;
  margin-bottom: 2rem;
  color: #160a52;
}
.feature > .container main h3 > span, #wherever > .container main h3 > span, #search > .container main h3 > span, #proactive > .container main h3 > span, #information-fronts > .container main h3 > span {
  font-family: "Circe-Regular", "Lucida Grande", serif;
}
.feature > .container main p, #wherever > .container main p, #search > .container main p, #proactive > .container main p, #information-fronts > .container main p {
  font-family: "Lato", "Lucida Grande", sans-serif;
  color: #535a68;
  font-size: 1.7rem;
  line-height: 1.8em;
  font-weight: 400;
  margin-bottom: 5rem;
}
.feature > .container main ul, #wherever > .container main ul, #search > .container main ul, #proactive > .container main ul, #information-fronts > .container main ul {
  padding-top: 3rem;
}
.feature > .container main ul li, #wherever > .container main ul li, #search > .container main ul li, #proactive > .container main ul li, #information-fronts > .container main ul li {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 1.5rem;
  opacity: 0;
}
.feature > .container main ul li .icon, #wherever > .container main ul li .icon, #search > .container main ul li .icon, #proactive > .container main ul li .icon, #information-fronts > .container main ul li .icon {
  background-color: rgba(0, 201, 153, 0.7);
  height: 4.5rem;
  width: 4.5rem;
  border-radius: 50%;
  opacity: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  font-style: normal;
  font-size: 2.5rem;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-weight: 600;
  color: #EFEFEF;
  margin-right: 1.5rem;
}
.feature > .container main ul li span, #wherever > .container main ul li span, #search > .container main ul li span, #proactive > .container main ul li span, #information-fronts > .container main ul li span {
  font-family: "Lato", "Lucida Grande", sans-serif;
  color: #dfdfdf;
  font-size: 1.7rem;
  letter-spacing: 0.4px;
  font-weight: 300;
}
.feature > .container aside, #wherever > .container aside, #search > .container aside, #proactive > .container aside, #information-fronts > .container aside {
  position: relative;
}
@media screen and (max-width: 780px) {
  .feature > .container aside, #wherever > .container aside, #search > .container aside, #proactive > .container aside, #information-fronts > .container aside {
    width: 100%;
    max-width: 100%;
  }
}
.feature > .container aside > figure, #wherever > .container aside > figure, #search > .container aside > figure, #proactive > .container aside > figure, #information-fronts > .container aside > figure {
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
}
@media screen and (max-width: 780px) {
  .feature > .container aside > figure, #wherever > .container aside > figure, #search > .container aside > figure, #proactive > .container aside > figure, #information-fronts > .container aside > figure {
    position: static;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 90vw;
    height: fit-content;
    margin-top: 5rem;
  }
}

#information-fronts main {
  max-width: 55%;
}
@media screen and (max-width: 780px) {
  #information-fronts main {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 901px) and (max-width: 1170px) {
  #information-fronts {
    padding-top: 100px;
  }
  #information-fronts main {
    position: relative;
    z-index: 1;
  }
  #information-fronts aside figure {
    z-index: 0;
    -webkit-transform: translate(5%, -65%) !important;
    transform: translate(5%, -65%) !important;
  }
}
@media screen and (max-width: 780px) {
  #information-fronts {
    padding-bottom: 0;
  }
}

.submenu-style, #top-menu > div > section .header-actions #user-avatar[data-img] ul, #top-menu > div > section ul.top-menu-navigation > li ul {
  position: absolute;
  left: 0;
  bottom: -10px;
  right: 0;
  display: none;
  z-index: 10;
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
  width: 200px;
  padding: 10px 20px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f5ff), to(#f1efff));
  background-image: -webkit-linear-gradient(to bottom, #f6f5ff, #f1efff);
  background-image: linear-gradient(to bottom, #f6f5ff, #f1efff);
  border-radius: 4px;
  box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 3px 3px 15px 0 rgba(0, 0, 0, 0.2);
  -webkit-animation: menuEnter 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s both;
  animation: menuEnter 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s both;
}
.submenu-style::before, #top-menu > div > section .header-actions #user-avatar[data-img] ul::before, #top-menu > div > section ul.top-menu-navigation > li ul::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  height: 70px;
}
.submenu-style li, #top-menu > div > section .header-actions #user-avatar[data-img] ul li, #top-menu > div > section ul.top-menu-navigation > li ul li {
  margin: 5px 0 20px;
}
.submenu-style li a, #top-menu > div > section .header-actions #user-avatar[data-img] ul li a, #top-menu > div > section ul.top-menu-navigation > li ul li a {
  color: #160a52;
}
.submenu-style li a .icon, #top-menu > div > section .header-actions #user-avatar[data-img] ul li a .icon, #top-menu > div > section ul.top-menu-navigation > li ul li a .icon {
  display: inline-block;
  vertical-align: middle;
  font-size: 1.3em;
  margin-left: -5px;
  margin-right: 5px;
}
.submenu-style li a > span, #top-menu > div > section .header-actions #user-avatar[data-img] ul li a > span, #top-menu > div > section ul.top-menu-navigation > li ul li a > span {
  display: inline-block;
  vertical-align: middle;
}
.submenu-style li:last-child, #top-menu > div > section .header-actions #user-avatar[data-img] ul li:last-child, #top-menu > div > section ul.top-menu-navigation > li ul li:last-child {
  margin-bottom: 10px;
}
.submenu-style:hover, #top-menu > div > section .header-actions #user-avatar[data-img] ul:hover, #top-menu > div > section ul.top-menu-navigation > li ul:hover {
  display: block;
}

.dark, .slack #top-menu, .gmail #top-menu {
  background-color: #fff;
  padding: 1.5rem 0;
  border-bottom: 1px solid #535a6810;
}
.dark > div > section ul.top-menu-navigation > li a, .slack #top-menu > div > section ul.top-menu-navigation > li a, .gmail #top-menu > div > section ul.top-menu-navigation > li a {
  color: #160a52;
}
.dark .header-actions #auth-buttons a, .slack #top-menu .header-actions #auth-buttons a, .gmail #top-menu .header-actions #auth-buttons a {
  border: 1px solid #535a6810;
}
.dark .header-actions #auth-buttons a .label, .slack #top-menu .header-actions #auth-buttons a .label, .gmail #top-menu .header-actions #auth-buttons a .label {
  color: #160a52;
}

#top-menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  padding: 20px 0 0;
  z-index: 4;
}
#top-menu.lean {
  background-color: #fff;
  position: relative;
  z-index: 5;
  height: 60px;
  padding: 14px 45px;
  border-bottom: 1px solid rgba(125, 118, 158, 0.1);
}
#top-menu.lean img {
  width: 80px;
  display: inline-block;
  vertical-align: middle;
}
#top-menu.sticky {
  position: fixed;
  background-color: #fcfcfc;
  background-image: none;
  border-bottom: 1px solid #535a6810;
  padding: 10px 0;
  z-index: 9999;
  -webkit-animation: slide-down 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) both;
  animation: slide-down 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
#top-menu.sticky > div > section ul.top-menu-navigation > li a {
  color: #160a52;
}
#top-menu.sticky > div > section .header-actions .req-access {
  display: none;
  box-shadow: 0 0px 5px 0 rgba(47, 5, 88, 0.1);
}
#top-menu.sticky > div > section .header-actions .orchard-block .btn-ghost .label {
  color: #160a52;
}
#top-menu.sticky > div > section .header-actions #auth-buttons .btn-ghost .label {
  color: #160a52;
}
#top-menu.sticky > div > section .header-actions #auth-buttons .btn-light-invert {
  border: 2px solid #160a52;
}
#top-menu.sticky > div > section .header-actions #auth-buttons .btn-light-invert .label {
  color: #160a52;
}
#top-menu.sticky > div > section .header-actions #auth-buttons .btn-light-invert:hover {
  border-color: transparent;
}
#top-menu.sticky > div > section .header-actions #auth-buttons .btn-light-invert:hover .label {
  color: #fff;
}
#top-menu.sticky > div > section .header-actions .search .primary-input, #top-menu.sticky > div > section .header-actions .search .icon-search {
  color: #160a52;
}
#top-menu.sticky > div > section .header-actions .search .primary-input {
  background-color: #f0f0f0;
  background-image: none;
}
#top-menu.sticky > div > section .header-actions .search .primary-input::placeholder {
  color: rgba(22, 10, 82, 0.5);
}
#top-menu.sticky > div > section .mobile-menu button i {
  color: #5804a0;
}
#top-menu > div {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  max-width: 100vw;
}
@media screen and (max-width: 669px) {
  #top-menu > div {
    -webkit-align-items: center;
    align-items: center;
  }
}
#top-menu > div > section {
  flex-shrink: 0;
}
#top-menu > div > section > a figure {
  width: 100px;
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px) {
  #top-menu > div > section > a figure {
    width: 100px;
  }
}
@media screen and (max-width: 669px) {
  #top-menu > div > section > a figure {
    width: 75px;
  }
}
#top-menu > div > section:last-child {
  flex-grow: 1;
  flex-shrink: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
@media screen and (max-width: 669px) {
  #top-menu > div > section:last-child {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
  }
}
#top-menu > div > section ul.top-menu-navigation {
  padding: 0 25px 0 75px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  flex-grow: 1;
}
@media screen and (max-width: 669px) {
  #top-menu > div > section ul.top-menu-navigation {
    display: none;
  }
}
#top-menu > div > section ul.top-menu-navigation > li {
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.4rem;
  color: #fff;
  white-space: nowrap;
  margin-right: 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
#top-menu > div > section ul.top-menu-navigation > li:last-child {
  margin-right: 0;
}
#top-menu > div > section ul.top-menu-navigation > li a {
  color: #fff;
  text-decoration: none;
}
#top-menu > div > section ul.top-menu-navigation > li a.expt {
  cursor: default;
}
#top-menu > div > section ul.top-menu-navigation > li a small {
  background-color: #ffcf2e;
  color: #5e079a;
  margin-left: 2px;
  padding: 2px 5px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
}
#top-menu > div > section ul.top-menu-navigation > li a > span, #top-menu > div > section ul.top-menu-navigation > li a > i {
  display: inline-block;
  vertical-align: middle;
}
#top-menu > div > section ul.top-menu-navigation > li a .icon {
  font-size: 1.2em;
  margin-top: 2px;
  margin-left: 3px;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
#top-menu > div > section ul.top-menu-navigation > li:hover ul {
  display: block;
}
#top-menu > div > section ul.top-menu-navigation > li:hover > a {
  text-decoration: underline;
}
#top-menu > div > section ul.top-menu-navigation > li:hover > a small {
  text-decoration: none;
}
#top-menu > div > section ul.top-menu-navigation > li:hover > a.expt {
  text-decoration: none;
}
#top-menu > div > section ul.top-menu-navigation > li:hover > a.expt .icon {
  opacity: 0;
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
}
@media screen and (min-width: 981px) and (max-width: 1160px) {
  #top-menu > div > section ul.top-menu-navigation {
    padding-left: 20px;
  }
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px) {
  #top-menu > div > section ul.top-menu-navigation {
    padding-left: 20px;
  }
}
#top-menu > div > section .header-actions {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  flex-shrink: 0;
}
@media screen and (max-width: 669px) {
  #top-menu > div > section .header-actions {
    display: none;
  }
}
#top-menu > div > section .header-actions .req-access {
  display: none;
}
#top-menu > div > section .header-actions .orchard-block, #top-menu > div > section .header-actions .marketing-block {
  display: none;
}
#top-menu > div > section .header-actions .orchard-block .btn-primary, #top-menu > div > section .header-actions .marketing-block .btn-primary {
  box-shadow: 0 0px 5px 0 rgba(47, 5, 88, 0.1);
}
#top-menu > div > section .header-actions .btn-light-invert .label {
  text-transform: uppercase;
}
#top-menu > div > section .header-actions .btn-ghost {
  margin: 0 1rem;
  color: #e2dbf4;
  background-color: transparent;
  font-weight: normal;
}
#top-menu > div > section .header-actions .search:focus span.icon, #top-menu > div > section .header-actions .search:focus-within span.icon {
  opacity: 1;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#top-menu > div > section .header-actions .search span.icon {
  cursor: pointer;
  pointer-events: all;
  opacity: 0;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: translate(5px, -50%);
  transform: translate(5px, -50%);
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #top-menu > div > section .header-actions .search {
    display: none;
  }
}
#top-menu > div > section .header-actions #user-avatar ul {
  display: none;
}
#top-menu > div > section .header-actions #user-avatar[data-img] {
  margin-left: 15px;
  width: 36px;
  height: 36px;
  background-position: center;
  background-size: cover;
  border-radius: 100%;
  border: 2px solid #fff;
  cursor: pointer;
  position: relative;
}
#top-menu > div > section .header-actions #user-avatar[data-img] ul {
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.4rem;
  right: -12px;
  left: unset;
  cursor: default;
}
#top-menu > div > section .header-actions #user-avatar[data-img] ul p[data-action] {
  display: inline-block;
  cursor: pointer;
}
#top-menu > div > section .header-actions #user-avatar[data-img] ul li a span {
  pointer-events: none;
}
#top-menu > div > section .header-actions #user-avatar[data-img]:hover ul {
  display: block;
}
#top-menu > div > section .mobile-menu {
  display: none;
}
@media screen and (max-width: 669px) {
  #top-menu > div > section .mobile-menu {
    display: block;
  }
  #top-menu > div > section .mobile-menu button {
    background: none;
    border: none;
  }
  #top-menu > div > section .mobile-menu button .icon {
    font-size: 3.1rem;
    color: #fff;
  }
}
@media screen and (max-width: 669px) {
  #top-menu {
    width: 100vw;
    padding: 15px 0;
    overflow: hidden;
  }
}
.mobile-menu-body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  padding: 30px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#650a95), to(#5804a0));
  background-image: -webkit-linear-gradient(to bottom, #650a95, #5804a0);
  background-image: linear-gradient(to bottom, #650a95, #5804a0);
  display: none;
}
.mobile-menu-body.active {
  -webkit-animation: mobileMenuEnter 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s both;
  animation: mobileMenuEnter 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s both;
  display: block;
}
.mobile-menu-body > header {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: 3rem;
}
.mobile-menu-body > header img {
  width: 100px;
}
.mobile-menu-body > header #close-menu {
  font-size: 3.1rem;
  color: #fff;
}
.mobile-menu-body .top-menu-navigation li {
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.7rem;
  color: #fff;
  padding: 1.5rem 0;
  text-align: left;
}
.mobile-menu-body .top-menu-navigation li:last-child {
  padding-bottom: 0;
}
.mobile-menu-body .top-menu-navigation li a {
  color: #fff;
}
.mobile-menu-body .top-menu-navigation li a .icon {
  color: #fff;
  margin-right: 5px;
  width: 20px;
  display: inline-block;
  vertical-align: middle;
}
.mobile-menu-body .top-menu-navigation li a .label {
  display: inline-block;
  vertical-align: middle;
}
.mobile-menu-body .top-menu-navigation li small {
  background-color: #ffcf2e;
  color: #5e079a;
  margin-left: 2px;
  padding: 2px 5px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
}
.mobile-menu-body .top-menu-navigation li > ul {
  padding-top: 1rem;
  padding-left: 30px;
  display: none;
}
.mobile-menu-body .top-menu-navigation li:focus-within > ul, .mobile-menu-body .top-menu-navigation li:focus > ul {
  display: block;
}
.mobile-menu-body .header-actions {
  padding-top: 3rem;
  margin-top: 3rem;
  border-top: 1px solid #f6f5ff30;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.mobile-menu-body .header-actions .search {
  width: 100%;
  margin-bottom: 2rem;
}
.mobile-menu-body .header-actions #auth-buttons, .mobile-menu-body .header-actions #user-avatar {
  display: none;
}
.mobile-menu-body .header-actions .btn-ghost {
  margin-bottom: 1rem;
}
.mobile-menu-body .header-actions .req-access {
  display: none;
}
.mobile-menu-body .header-actions .orchard-block {
  display: none;
}

@keyframes menuEnter {
  from {
    opacity: 0.01;
    -webkit-transform: translate(-10px, 110%);
    transform: translate(-10px, 110%);
  }
  to {
    opacity: 0.99;
    -webkit-transform: translate(-10px, 100%);
    transform: translate(-10px, 100%);
  }
}
@keyframes mobileMenuEnter {
  from {
    opacity: 0.1;
    -webkit-transform: scale(0.9) translate(0, 15px);
    transform: scale(0.9) translate(0, 15px);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
  }
}
#hero {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#160A52), to(#4c0a8e));
  background-image: -webkit-linear-gradient(to bottom, #160A52, #4c0a8e);
  background-image: linear-gradient(to bottom, #160A52, #4c0a8e);
  padding-top: 120px;
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #hero {
    height: fit-content;
    max-height: 6000px;
    padding-top: 30px;
  }
}
@media screen and (max-width: 669px) {
  #hero {
    padding-top: 70px;
    overflow: hidden;
  }
}
#hero #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0.2;
  pointer-events: none;
}
#hero > div:first-child main {
  padding-top: 0;
  margin-bottom: 0;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}
#hero > div:first-child main > a {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -210%);
  transform: translate(-50%, -210%);
  color: white;
  background-color: rgba(0, 201, 153, 0.5);
  font-size: 1.5rem;
  font-family: "Lato", "Lucida Grande", sans-serif;
  padding: 1px 6px 1px 6px;
  border-radius: 4px;
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #hero > div:first-child main > a {
    -webkit-transform: translate(-50%, -150%);
    transform: translate(-50%, -150%);
    font-size: 1.3rem;
  }
}
#hero > div:first-child #hero-animation {
  position: relative;
  padding-bottom: 240px;
  margin: 5rem 0 7rem;
  z-index: 1;
}
@media screen and (max-width: 669px) {
  #hero > div:first-child #hero-animation {
    padding-bottom: 200px;
  }
}
#hero > div:first-child #hero-animation.active .base-small-icons > figure, #hero > div:first-child #hero-animation.active .right-hero > figure, #hero > div:first-child #hero-animation.active .left-hero > figure {
  -webkit-animation: hitemEnter 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  animation: hitemEnter 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
#hero > div:first-child #hero-animation #ha-zest {
  max-width: 230px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  opacity: 1;
}
#hero > div:first-child #hero-animation #ha-zest img {
  width: 100%;
  object-fit: contain;
  -webkit-animation: breath 3.3s cubic-bezier(0.74, -0.01, 0.01, 1.27) infinite;
  animation: breath 3.3s cubic-bezier(0.74, -0.01, 0.01, 1.27) infinite;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 669px) {
  #hero > div:first-child #hero-animation #ha-zest img {
    margin-top: 8%;
  }
}
#hero > div:first-child #hero-animation #ha-zest .added {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-filter: blur(15px);
  filter: blur(15px);
  background-color: #00C999;
  border-radius: 50%;
  opacity: 1;
  z-index: 2;
  -webkit-animation: addedIn 3.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  animation: addedIn 3.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
#hero > div:first-child #hero-animation #ha-zest .added.confluence {
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0052CC), to(#2684FF));
  background-image: -webkit-linear-gradient(to bottom, #0052CC, #2684FF);
  background-image: linear-gradient(to bottom, #0052CC, #2684FF);
}
#hero > div:first-child #hero-animation #ha-zest .added.github {
  background-color: #161614;
}
#hero > div:first-child #hero-animation #ha-zest .added.drive {
  background-color: transparent;
  background-image: linear-gradient(to bottom, #FFCF63 0%, #11A861 33%, #3777E3 100%);
}
#hero > div:first-child #hero-animation #ha-zest .added.figma {
  background-color: #AF4BFF;
}
#hero > div:first-child #hero-animation #ha-zest .added.zendesk {
  background-color: #03363D;
}
#hero > div:first-child #hero-animation #ha-zest .added.adobe {
  background-color: #FF0048;
}
#hero > div:first-child #hero-animation #ha-zest .added.office {
  background-color: #FF1F00;
}
#hero > div:first-child #hero-animation #ha-zest .added.dropbox {
  background-color: #0061FF;
}
#hero > div:first-child #hero-animation #ha-zest .added.salesforce {
  background-color: #1798c1;
}
#hero > div:first-child #hero-animation #ha-zest .added.onedrive {
  background-color: transparent;
  background-image: linear-gradient(to bottom, #0364B8 0%, #0078D4 25%, #1490DF 50%, #28A8EA 100%);
}
#hero > div:first-child #hero-animation #ha-zest svg {
  position: absolute;
  left: 5%;
  width: 90%;
  top: 0;
  bottom: 0;
  right: auto;
  opacity: 0.3;
  z-index: 3;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation: rotateAnim 12s linear infinite;
  animation: rotateAnim 12s linear infinite;
}
#hero > div:first-child #hero-animation #ha-zest svg:last-of-type {
  width: 80%;
  left: 10%;
  opacity: 0.1;
  -webkit-animation: rotateAnim 18s linear infinite;
  animation: rotateAnim 18s linear infinite;
  animation-direction: reverse;
}
#hero > div:first-child #hero-animation .base-small-icons, #hero > div:first-child #hero-animation .right-hero, #hero > div:first-child #hero-animation .left-hero {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 40%;
  max-width: 465px;
  height: 230px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
#hero > div:first-child #hero-animation .base-small-icons > figure, #hero > div:first-child #hero-animation .right-hero > figure, #hero > div:first-child #hero-animation .left-hero > figure {
  max-width: 105px;
  width: 20%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  opacity: 0;
}
#hero > div:first-child #hero-animation .base-small-icons > figure img, #hero > div:first-child #hero-animation .right-hero > figure img, #hero > div:first-child #hero-animation .left-hero > figure img {
  width: 100%;
  object-fit: contain;
  opacity: 1;
  -webkit-transition: all 0.8s cubic-bezier(0.65, -0.37, 0.93, 0.77);
  transition: all 0.8s cubic-bezier(0.65, -0.37, 0.93, 0.77);
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
  -webkit-transform: translate(0, 0) scale(1) rotate(0deg);
  transform: translate(0, 0) scale(1) rotate(0deg);
  -webkit-transform-origin: center;
  transform-origin: center;
}
#hero > div:first-child #hero-animation .base-small-icons > figure.active, #hero > div:first-child #hero-animation .right-hero > figure.active, #hero > div:first-child #hero-animation .left-hero > figure.active {
  opacity: 1;
  -webkit-animation: iconActive 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) both 2;
  animation: iconActive 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) both 2;
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out, #hero > div:first-child #hero-animation .right-hero > figure.out, #hero > div:first-child #hero-animation .left-hero > figure.out {
  opacity: 1;
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#drive img, #hero > div:first-child #hero-animation .right-hero > figure.out#drive img, #hero > div:first-child #hero-animation .left-hero > figure.out#drive img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(-230px, 0);
  transform: scale(0.9) translate(-230px, 0);
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#adobe img, #hero > div:first-child #hero-animation .right-hero > figure.out#adobe img, #hero > div:first-child #hero-animation .left-hero > figure.out#adobe img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(509px, 0);
  transform: scale(0.9) translate(509px, 0);
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#confluence img, #hero > div:first-child #hero-animation .right-hero > figure.out#confluence img, #hero > div:first-child #hero-animation .left-hero > figure.out#confluence img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(326px, 0);
  transform: scale(0.9) translate(326px, 0);
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#dropbox img, #hero > div:first-child #hero-animation .right-hero > figure.out#dropbox img, #hero > div:first-child #hero-animation .left-hero > figure.out#dropbox img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(418px, 0);
  transform: scale(0.9) translate(418px, 0);
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#figma img, #hero > div:first-child #hero-animation .right-hero > figure.out#figma img, #hero > div:first-child #hero-animation .left-hero > figure.out#figma img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(211px, 0);
  transform: scale(0.9) translate(211px, 0);
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#github img, #hero > div:first-child #hero-animation .right-hero > figure.out#github img, #hero > div:first-child #hero-animation .left-hero > figure.out#github img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(-126px, 0);
  transform: scale(0.9) translate(-126px, 0);
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#office img, #hero > div:first-child #hero-animation .right-hero > figure.out#office img, #hero > div:first-child #hero-animation .left-hero > figure.out#office img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(-293px, 0);
  transform: scale(0.9) translate(-293px, 0);
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#onedrive img, #hero > div:first-child #hero-animation .right-hero > figure.out#onedrive img, #hero > div:first-child #hero-animation .left-hero > figure.out#onedrive img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(-378px, 0);
  transform: scale(0.9) translate(-378px, 0);
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#salesforce img, #hero > div:first-child #hero-animation .right-hero > figure.out#salesforce img, #hero > div:first-child #hero-animation .left-hero > figure.out#salesforce img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(126px, 0);
  transform: scale(0.9) translate(126px, 0);
}
#hero > div:first-child #hero-animation .base-small-icons > figure.out#zendesk img, #hero > div:first-child #hero-animation .right-hero > figure.out#zendesk img, #hero > div:first-child #hero-animation .left-hero > figure.out#zendesk img {
  opacity: 0;
  -webkit-transform: scale(0.9) translate(-460px, 0);
  transform: scale(0.9) translate(-460px, 0);
}
#hero > div:first-child #hero-animation .left-hero {
  transform: translate(-120%, 0);
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(1) {
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(2) {
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(3) {
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(4) {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(5) {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(6) {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(7) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(8) {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(9) {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
#hero > div:first-child #hero-animation .left-hero > figure:nth-of-type(10) {
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
}
#hero > div:first-child #hero-animation .right-hero {
  transform: translate(20%, 0);
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(1) {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(2) {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(3) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(4) {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(5) {
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(6) {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(7) {
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(8) {
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(9) {
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
#hero > div:first-child #hero-animation .right-hero > figure:nth-of-type(10) {
  -webkit-animation-delay: 1000ms;
  animation-delay: 1000ms;
}
#hero > div:first-child h1 {
  font-size: 5rem;
  line-height: 1.2em;
  color: #fff;
  font-family: "Circe-Light", "Lucida Grande", serif;
  margin-bottom: 12px;
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px) {
  #hero > div:first-child h1 {
    font-size: 5rem;
  }
}
@media screen and (max-width: 669px) {
  #hero > div:first-child h1 {
    font-size: 3.5rem;
    margin-bottom: 8px;
  }
  #hero > div:first-child h1 br {
    display: none;
  }
}
#hero > div:first-child h2 {
  font-family: "Lato", "Lucida Grande", sans-serif;
  color: #e9dbf4;
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 40px;
}
#hero > div:first-child h2 i {
  font-style: normal;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  padding: 0 6px 0 3px;
  border-radius: 4px;
  position: relative;
  font-size: 0.85em;
}
#hero > div:first-child h2 i::before {
  content: "Windows: CTRL + SHIFT + E";
  position: absolute;
  width: fit-content;
  left: 0;
  top: 0;
  white-space: nowrap;
  background-color: rgba(255, 255, 255, 0.3);
  font-size: 0.6em;
  font-weight: 400;
  padding: 2px 6px 1px 3px;
  border-radius: 4px;
  opacity: 0;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
}
#hero > div:first-child h2 i:hover::before {
  opacity: 1;
  -webkit-transform: translate(0, -120%);
  transform: translate(0, -120%);
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #hero > div:first-child h2 {
    font-size: 2rem;
  }
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #hero > div:first-child h2 br {
    display: none;
  }
}
@media screen and (max-width: 669px) {
  #hero > div:first-child h2 {
    margin-bottom: 30px;
  }
}
#hero > div:first-child .primary-input {
  padding: 15px 45px 15px 25px;
}
#hero > div:first-child .error-message {
  margin-top: 15px;
  margin-left: 5px;
  font-size: 1.4rem;
  color: white;
  display: none;
}
#hero > div:first-child .error-message.active {
  display: block;
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #hero > div:first-child {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
  }
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #hero > div:first-child > main {
    width: 90%;
    margin: 7rem 5% 7rem;
  }
}
@media screen and (max-width: 669px) {
  #hero > div:first-child > main a {
    display: block;
    width: 100%;
    text-align: center;
  }
  #hero > div:first-child > main a .icon {
    display: none;
  }
  #hero > div:first-child > main .hero-input > .input-wrapper {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  #hero > div:first-child > main .hero-input .btn-primary {
    margin-left: 0;
    width: 100%;
  }
}
@media screen and (max-width: 669px) {
  #hero > div:first-child aside {
    width: 95%;
  }
}
#hero div.companies {
  border: inset 1px rgba(112, 112, 112, 0.1);
  box-shadow: 0 -20px 40px 0 #4c0a8e;
  -webkit-box-shadow: 0 -20px 40px 0 #4c0a8e;
  padding: 1.5rem 0;
  text-align: center;
}
#hero div.companies img, #hero div.companies picture {
  width: 100%;
}
@media screen and (min-width: 981px) and (max-width: 1160px), screen and (min-width: 900px) and (max-width: 980px) {
  #hero div.companies {
    padding: 1.5rem 2rem;
  }
}
#hero .bg-image-base, #hero #hero-bg-image-1, #hero #hero-bg-image-2 {
  position: absolute;
  background-image: url("/assets/images/home/zst-arrow-bg-left.png");
  background-image: -webkit-image-set(url("/assets/images/home/zst-arrow-bg-left.png") 1x, url("/assets/images/home/zst-arrow-bg-left@2x.png") 2x);
  background-image: image-set(url("/assets/images/home/zst-arrow-bg-left.png") 1x, url("/assets/images/home/zst-arrow-bg-left@2x.png") 2x);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}
#hero #hero-bg-image-1 {
  left: 0;
  top: 190px;
  width: 310px;
  height: 220px;
  opacity: 0.7;
}
@media screen and (max-width: 669px) {
  #hero #hero-bg-image-1 {
    top: 320px;
  }
}
#hero #hero-bg-image-2 {
  background-image: url("/assets/images/home/zst-arrow-bg-right.png");
  background-image: -webkit-image-set(url("/assets/images/home/zst-arrow-bg-right.png") 1x, url("/assets/images/home/zst-arrow-bg-right@2x.png") 2x);
  background-image: image-set(url("/assets/images/home/zst-arrow-bg-right.png") 1x, url("/assets/images/home/zst-arrow-bg-right@2x.png") 2x);
  width: 835px;
  height: 577px;
  right: 0;
  bottom: 60px;
}
@media screen and (max-width: 669px) {
  #hero #hero-bg-image-2 {
    display: none;
  }
}

.success-popop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  display: none;
}
.success-popop.active {
  display: -webkit-flex;
  display: flex;
}
.success-popop > section {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(214, 185, 240, 0.1)), to(rgba(242, 229, 255, 0.05)));
  background-image: -webkit-linear-gradient(to bottom, rgba(214, 185, 240, 0.1), rgba(242, 229, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(214, 185, 240, 0.1), rgba(242, 229, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  position: relative;
  padding: 3px;
}
.success-popop > section > div {
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#f0f0f0));
  background-image: -webkit-linear-gradient(to bottom, white, #f0f0f0);
  background-image: linear-gradient(to bottom, white, #f0f0f0);
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  padding: 35px 25px;
  font-size: 1.7rem;
  font-family: "Circe-Light", "Lucida Grande", serif;
}
.success-popop > section > div > p {
  margin-bottom: 1.5rem;
}
.success-popop > section > div > footer {
  display: block;
  padding-top: 3rem;
  text-align: left;
}
.success-popop > section > div > footer button {
  box-shadow: none;
}

@keyframes hitemEnter {
  from {
    opacity: 0;
    -webkit-transform: scale(0.9) translate(0, 5%);
    transform: scale(0.9) translate(0, 5%);
  }
  to {
    opacity: 0.7;
    -webkit-transform: scale(1) translate(0, 0);
    transform: scale(1) translate(0, 0);
  }
}
@keyframes rotateAnim {
  from {
    -webkit-transform: translate(0, -35%) rotate(0deg);
    transform: translate(0, -35%) rotate(0deg);
  }
  to {
    -webkit-transform: translate(0, -35%) rotate(360deg);
    transform: translate(0, -35%) rotate(360deg);
  }
}
@keyframes addedIn {
  from {
    opacity: 1;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
}
#product-animation {
  width: 500px;
  height: 450px;
  position: relative;
  z-index: 3;
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #product-animation {
    -webkit-transform: translate(0, 30px);
    transform: translate(0, 30px);
  }
}
@media screen and (max-width: 669px) {
  #product-animation {
    width: 340px;
    height: 490px;
    margin-bottom: 6rem;
  }
}
#product-animation .anim-container {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(214, 185, 240, 0.1)), to(rgba(242, 229, 255, 0.05)));
  background-image: -webkit-linear-gradient(to bottom, rgba(214, 185, 240, 0.1), rgba(242, 229, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(214, 185, 240, 0.1), rgba(242, 229, 255, 0.05));
  box-shadow: 30px 30px 80px 0 rgba(35, 8, 62, 0.6);
  -webkit-box-shadow: 30px 30px 80px 0 rgba(35, 8, 62, 0.6);
}
#product-animation .anim-container.gmail .screen#gmail-section {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1) translate(0, 0);
  transform: scale(1) translate(0, 0);
}
#product-animation .anim-container.trello .screen#trello-section {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1) translate(0, 0);
  transform: scale(1) translate(0, 0);
}
#product-animation .anim-container .screen {
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#f0f0f0));
  background-image: -webkit-linear-gradient(to bottom, white, #f0f0f0);
  background-image: linear-gradient(to bottom, white, #f0f0f0);
  border: 2px solid #FFFFFF;
  border-radius: 14px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  visibility: hidden;
  position: absolute;
  top: 15px;
  left: 15px;
}
#product-animation .anim-container .screen#gmail-section {
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.5s cubic-bezier(0.82, 0.1, 0, 1.01);
  -webkit-transform: scale(0.9) translate(0, 20px);
  transform: scale(0.9) translate(0, 20px);
}
#product-animation .anim-container .screen > header {
  border-bottom: 1px solid rgba(112, 112, 112, 0.15);
  padding: 23px 40px 20px;
  position: relative;
}
#product-animation .anim-container .screen > header .zest-icon {
  position: absolute;
  width: 30px;
  top: 23px;
  right: 10px;
  -webkit-transform: translate(0, -30%);
  transform: translate(0, -30%);
}
#product-animation .anim-container .screen > main {
  padding: 15px 40px;
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .screen > main {
    padding: 15px;
  }
}
#product-animation .anim-container .screen > main .typed-cursor {
  display: none !important;
}
#product-animation .anim-container .screen > main p {
  font-size: 1.5rem;
  line-height: 1.7em;
  color: #7D769E;
  margin-bottom: 0.5em;
}
#product-animation .anim-container .screen > main p.gmail-signature {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  -webkit-transform: translate(0, -65px);
  transform: translate(0, -65px);
  -webkit-transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
}
#product-animation .anim-container .screen > main p.gmail-signature.active {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .screen > main p.gmail-signature {
    -webkit-transform: translate(0, -42px);
    transform: translate(0, -42px);
  }
}
#product-animation .anim-container .screen > main p em {
  font-style: normal;
  background-color: transparent;
  position: relative;
  display: inline-block;
  -webkit-transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
}
#product-animation .anim-container .screen > main p em::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background-color: #ffcf2e;
  -webkit-transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}
#product-animation .anim-container .screen > main p em.active {
  background-color: rgba(255, 207, 46, 0.25);
}
#product-animation .anim-container .screen > main p em.active::before {
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}
#product-animation .anim-container .screen .placeholder {
  background-color: #F0F2F9;
  height: 1.2rem;
  width: 17rem;
  display: block;
}
#product-animation .anim-container .screen#trello-section > header .placeholder {
  display: inline-block;
  width: 10rem;
  margin-right: 2rem;
}
#product-animation .anim-container .screen#trello-section > header .placeholder:nth-child(2) {
  width: 13rem;
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .screen#trello-section > header .placeholder:nth-child(2) {
    display: none;
  }
}
#product-animation .anim-container .screen#trello-section > main.trello-main {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  padding: 20px 20px;
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#F8F8F8));
  background-image: -webkit-linear-gradient(to bottom, #FCFCFC, #F8F8F8);
  background-image: linear-gradient(to bottom, #FCFCFC, #F8F8F8);
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
  width: 48%;
  border-radius: 8px;
  padding: 15px 12px 30px;
  opacity: 0;
  -webkit-transform: translate(0, 15px);
  transform: translate(0, 15px);
  -webkit-transition: all 0.5s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.5s cubic-bezier(0.82, 0.1, 0, 1.01);
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div:nth-of-type(1) {
  -webkit-transition-delay: 150ms;
  transition-delay: 150ms;
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div:nth-of-type(2) {
  -webkit-transition-delay: 300ms;
  transition-delay: 300ms;
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .screen#trello-section > main.trello-main > div {
    width: 100%;
  }
  #product-animation .anim-container .screen#trello-section > main.trello-main > div:first-child {
    display: none;
  }
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div.active {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div .tr-title {
  color: #160A52;
  font-size: 1.4rem;
  margin-bottom: 2rem;
  display: block;
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div li {
  padding: 10px 14px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 1.3rem;
  position: relative;
  font-size: 1.3rem;
  color: #7D769E;
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div li footer {
  display: block;
  margin-top: 1rem;
  text-align: right;
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div li > i {
  position: absolute;
  top: 0;
  right: 0;
  text-transform: none;
  background-color: #ffcf2e;
  width: 2rem;
  height: 2rem;
  font-style: normal;
  font-size: 1.2rem;
  border-radius: 50%;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transform: scale(0) translate(30%, -30%);
  transform: scale(0) translate(30%, -30%);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: all 0.5s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.5s cubic-bezier(0.82, 0.1, 0, 1.01);
  color: #160a52;
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div li > i:nth-of-type(1) {
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div li > i:nth-of-type(2) {
  -webkit-transition-delay: 200ms;
  transition-delay: 200ms;
}
#product-animation .anim-container .screen#trello-section > main.trello-main > div li > i.active {
  opacity: 1;
  -webkit-transform: scale(1) translate(30%, -30%);
  transform: scale(1) translate(30%, -30%);
}
#product-animation .anim-container .screen#trello-section > main .trello-task {
  position: absolute;
  top: 75px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  z-index: 3;
  border-radius: 4px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.05);
  opacity: 0;
  -webkit-transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  -webkit-transform: translate(0, 15px);
  transform: translate(0, 15px);
}
#product-animation .anim-container .screen#trello-section > main .trello-task.active {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
#product-animation .anim-container .selected-zest {
  margin-bottom: 0.5em;
  display: block;
  visibility: hidden;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  opacity: 0;
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .selected-zest {
    width: 100%;
  }
  #product-animation .anim-container .selected-zest img {
    width: 100%;
  }
}
#product-animation .anim-container .selected-zest.active {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
#product-animation .anim-container .suggested-zest {
  position: absolute;
  top: 45px;
  left: 55px;
  opacity: 0;
  pointer-events: none;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .suggested-zest {
    top: 95px;
    left: -50px;
  }
}
#product-animation .anim-container .suggested-zest.active {
  -webkit-animation: suggestedZestEnter 0.3s 1 cubic-bezier(0.82, 0.1, 0, 1.01) forwards;
  animation: suggestedZestEnter 0.3s 1 cubic-bezier(0.82, 0.1, 0, 1.01) forwards;
}
#product-animation .anim-container .suggested-zest.trello-suggested {
  position: static;
  margin-top: 1rem;
}
#product-animation .anim-container .suggested-zest.trello-suggested.active {
  -webkit-animation: trelloSuggestedZestEnter 0.8s cubic-bezier(0.82, 0.1, 0, 1.01) forwards;
  animation: trelloSuggestedZestEnter 0.8s cubic-bezier(0.82, 0.1, 0, 1.01) forwards;
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .suggested-zest.trello-suggested {
    width: 100%;
  }
  #product-animation .anim-container .suggested-zest.trello-suggested img {
    width: 100%;
  }
}
#product-animation .anim-container .integration-icons {
  position: absolute;
  top: 0;
  width: calc(100% - 30px);
  left: 15px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transform: translate(0, -140%);
  transform: translate(0, -140%);
}
#product-animation .anim-container .integration-icons > span {
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(white));
  background-image: -webkit-linear-gradient(to bottom, white, white);
  background-image: linear-gradient(to bottom, white, white);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: inline-flex;
  margin-right: 10px;
  cursor: pointer;
  opacity: 0.8;
  position: relative;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  box-shadow: 5px 5px 40px 0 rgba(38, 6, 70, 0.3);
  -webkit-box-shadow: 5px 5px 40px 0 rgba(38, 6, 70, 0.3);
}
#product-animation .anim-container .integration-icons > span svg {
  width: 25px;
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .integration-icons > span {
    min-width: 50px !important;
  }
  #product-animation .anim-container .integration-icons > span svg {
    min-width: 25px !important;
  }
}
#product-animation .anim-container .integration-icons > span.soon {
  cursor: default;
}
#product-animation .anim-container .integration-icons > span.soon::before {
  content: attr(data-title);
  position: absolute;
  background-color: #160a52;
  color: #fff;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  -webkit-transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  opacity: 0;
  white-space: nowrap;
  padding: 4px 5px;
  font-size: 1.2em;
  border-radius: 4px;
}
#product-animation .anim-container .integration-icons > span.soon:hover::before {
  -webkit-transform: translate(-50%, -130%);
  transform: translate(-50%, -130%);
  -webkit-transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.2s cubic-bezier(0.82, 0.1, 0, 1.01);
  opacity: 1;
}
#product-animation .anim-container .integration-icons > span:not(.soon):hover {
  opacity: 1;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transform: scale(1);
  transform: scale(1);
}
#product-animation .anim-container .integration-icons > span.gmail.active {
  opacity: 1;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transform: translate(-33px, 55px) scale(1.15);
  transform: translate(-33px, 55px) scale(1.15);
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .integration-icons > span.gmail.active {
    -webkit-transform: translate(0, 0) scale(1.15);
    transform: translate(0, 0) scale(1.15);
  }
}
#product-animation .anim-container .integration-icons > span.trello.active {
  opacity: 1;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transform: translate(-93px, 55px) scale(1.15);
  transform: translate(-93px, 55px) scale(1.15);
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .integration-icons > span.trello.active {
    -webkit-transform: translate(0, 0) scale(1.15);
    transform: translate(0, 0) scale(1.15);
  }
}
#product-animation .anim-container .cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: all 0.5s cubic-bezier(0.82, 0.1, 0, 1.01);
  transition: all 0.5s cubic-bezier(0.82, 0.1, 0, 1.01);
}
#product-animation .anim-container .cursor.active {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
#product-animation .anim-container .cursor.gstep1 {
  -webkit-transform: translate(-50px, -30px);
  transform: translate(-50px, -30px);
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .cursor.gstep1 {
    -webkit-transform: translate(-75px, 0);
    transform: translate(-75px, 0);
  }
}
#product-animation .anim-container .cursor.gstep2 {
  -webkit-transform: translate(242px, -90px);
  transform: translate(242px, -90px);
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .cursor.gstep2 {
    -webkit-transform: translate(125px, -60px);
    transform: translate(125px, -60px);
  }
}
#product-animation .anim-container .cursor.tstep1 {
  -webkit-transform: translate(180px, -45px);
  transform: translate(180px, -45px);
}
@media screen and (max-width: 669px) {
  #product-animation .anim-container .cursor.tstep1 {
    -webkit-transform: translate(100px, -45px);
    transform: translate(100px, -45px);
  }
}

@keyframes suggestedZestEnter {
  from {
    opacity: 0;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes trelloSuggestedZestEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#wherever .container, #search .container, #proactive .container {
  grid-template-columns: 1fr;
}
#wherever .container h3, #wherever .container h5, #search .container h3, #search .container h5, #proactive .container h3, #proactive .container h5 {
  text-align: center;
}
#wherever .container main > p, #search .container main > p, #proactive .container main > p {
  max-width: 80%;
  text-align: center;
  margin: 0 auto 5rem;
}
@media screen and (max-width: 669px) {
  #wherever .container main > p, #search .container main > p, #proactive .container main > p {
    max-width: 100%;
  }
}
#wherever h3 span, #search h3 span, #proactive h3 span {
  display: block;
}

#wherever {
  content-visibility: auto;
}
#wherever #wherever-animation {
  margin: 0 auto;
}

#search {
  padding-top: 0;
  content-visibility: auto;
}
#search #anywhere-animation {
  margin: 3rem auto 0;
}
#search .container {
  grid-template-columns: 1fr;
  text-align: center;
}
#search .container > p {
  max-width: 80%;
  margin: 0 auto 5rem;
}
@media screen and (max-width: 669px) {
  #search .container > p {
    max-width: 100%;
  }
}

#proactive {
  padding-top: 0;
  content-visibility: auto;
}
#proactive #product-animation {
  margin: 7rem auto 0;
  width: 600px;
  text-align: left;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 10, 82, 0.6)), to(rgba(75, 71, 77, 0.7)));
  background-image: -webkit-linear-gradient(to bottom, rgba(22, 10, 82, 0.6), rgba(75, 71, 77, 0.7));
  background-image: linear-gradient(to bottom, rgba(22, 10, 82, 0.6), rgba(75, 71, 77, 0.7));
  border-radius: 14px;
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #proactive #product-animation {
    -webkit-transform: translate(0, 30px);
    transform: translate(0, 30px);
  }
}
@media screen and (max-width: 669px) {
  #proactive #product-animation {
    width: 340px;
    height: 490px;
    margin-bottom: 6rem;
  }
}
#proactive #product-animation p {
  max-width: 100%;
  margin: 0 0 0.5rem;
  text-align: left;
}
@media screen and (max-width: 669px) {
  #proactive #product-animation p {
    max-width: 100%;
  }
}
#proactive #product-animation .anim-container {
  box-shadow: 0px 0px 50px 0 rgba(35, 8, 62, 0.5);
  -webkit-box-shadow: 0px 0px 50px 0 rgba(35, 8, 62, 0.5);
}
#proactive #product-animation .anim-container .cursor.gstep1 {
  -webkit-transform: translate(-150px, -50px);
  transform: translate(-150px, -50px);
}
@media screen and (max-width: 669px) {
  #proactive #product-animation .anim-container .cursor.gstep1 {
    -webkit-transform: translate(-80px, -5px);
    transform: translate(-80px, -5px);
  }
}
#proactive #product-animation .anim-container .cursor.gstep2 {
  -webkit-transform: translate(190px, -90px);
  transform: translate(190px, -90px);
}
@media screen and (max-width: 669px) {
  #proactive #product-animation .anim-container .cursor.gstep2 {
    -webkit-transform: translate(165px, -65px);
    transform: translate(165px, -65px);
  }
}
#proactive #product-animation .anim-container .cursor.tstep1 {
  -webkit-transform: translate(230px, -65px);
  transform: translate(230px, -65px);
}
@media screen and (max-width: 669px) {
  #proactive #product-animation .anim-container .cursor.tstep1 {
    -webkit-transform: translate(100px, -78px);
    transform: translate(100px, -78px);
  }
}
#proactive #product-animation .anim-container .trello-main {
  height: calc(100% - 60px);
}
#proactive #product-animation .anim-container .trello-main .tr-title {
  margin-bottom: 0 !important;
}
#proactive #product-animation .anim-container .trello-main ul li {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
#proactive #product-animation .anim-container .trello-main ul li footer {
  margin-top: 0;
}
#proactive #product-animation .anim-container .trello-main .trello-task {
  width: 370px;
  top: 1.5rem !important;
  left: 50% !important;
  -webkit-transform: translate(-50%, 5%) !important;
  transform: translate(-50%, 5%) !important;
}
@media screen and (max-width: 669px) {
  #proactive #product-animation .anim-container .trello-main .trello-task {
    width: 95%;
  }
}
#proactive #product-animation .anim-container .trello-main .trello-task.active {
  left: 50% !important;
  -webkit-transform: translate(-50%, 0) !important;
  transform: translate(-50%, 0) !important;
}
@media screen and (max-width: 669px) {
  #proactive #product-animation .anim-container #gmail-section .suggested-zest {
    top: 95px;
    left: -50px;
    width: 150%;
  }
}
#proactive #product-animation .selected-zest.active {
  max-width: 350px;
}
@media screen and (max-width: 669px) {
  #proactive #product-animation .selected-zest.active {
    max-width: 100vw;
  }
}

#wherever-animation {
  position: relative;
  height: 450px;
  width: 100%;
  max-width: 600px;
  border-radius: 14px;
  border: 1px solid #535a6810;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 10, 82, 0.6)), to(rgba(75, 71, 77, 0.7)));
  background-image: -webkit-linear-gradient(to bottom, rgba(22, 10, 82, 0.6), rgba(75, 71, 77, 0.7));
  background-image: linear-gradient(to bottom, rgba(22, 10, 82, 0.6), rgba(75, 71, 77, 0.7));
  box-shadow: 0px 0px 50px 0 rgba(35, 8, 62, 0.5);
  -webkit-box-shadow: 0px 0px 50px 0 rgba(35, 8, 62, 0.5);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
#wherever-animation .cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#wherever-animation.active > div.screen .list ul li {
  -webkit-animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both;
  animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both;
}
#wherever-animation.active > div.screen .list ul li:nth-of-type(1) {
  -webkit-animation-delay: 50ms;
  animation-delay: 50ms;
}
#wherever-animation.active > div.screen .list ul li:nth-of-type(2) {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
#wherever-animation.active > div.screen .list ul li:nth-of-type(3) {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}
#wherever-animation.active > div.screen .list ul li:nth-of-type(4) {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
#wherever-animation.active > div.screen .list ul li:nth-of-type(5) {
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
}
#wherever-animation.active > div.screen .list ul li:nth-of-type(6) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
#wherever-animation.active > div.screen .list ul li:nth-of-type(7) {
  -webkit-animation-delay: 350ms;
  animation-delay: 350ms;
}
#wherever-animation.active > div.screen .list ul li:nth-of-type(8) {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
#wherever-animation.active .cursor {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
#wherever-animation .active-step, #wherever-animation.step_3 #google-drive, #wherever-animation.step_2 #github, #wherever-animation.step_1 #box {
  transition-delay: 500ms;
  background-color: rgba(255, 207, 46, 0.1);
}
#wherever-animation .active-step > div, #wherever-animation.step_3 #google-drive > div, #wherever-animation.step_2 #github > div, #wherever-animation.step_1 #box > div {
  -webkit-animation: selectSource 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 2;
  animation: selectSource 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 2;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
#wherever-animation .activated-step, #wherever-animation.step_4 #google-drive, #wherever-animation.step_4 #github, #wherever-animation.step_4 #box, #wherever-animation.step_3 #github, #wherever-animation.step_3 #box, #wherever-animation.step_2 #box {
  background-color: rgba(255, 207, 46, 0.1);
}
#wherever-animation .active-image, #wherever-animation.step_3 #drive-img, #wherever-animation.step_2 #github-img, #wherever-animation.step_1 #box-img {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0.8;
  transition-delay: 500ms;
}
#wherever-animation .activated-image, #wherever-animation.step_4 #drive-img, #wherever-animation.step_4 #github-img, #wherever-animation.step_4 #box-img, #wherever-animation.step_3 #github-img, #wherever-animation.step_3 #box-img, #wherever-animation.step_2 #box-img {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 0.8;
}
#wherever-animation.step_1 .cursor {
  -webkit-transform: translate(-150px, -100px);
  transform: translate(-150px, -100px);
}
@media screen and (max-width: 669px) {
  #wherever-animation.step_1 .cursor {
    -webkit-transform: translate(-80px, -100px);
    transform: translate(-80px, -100px);
  }
}
#wherever-animation.step_2 .cursor {
  -webkit-transform: translate(150px, 0px);
  transform: translate(150px, 0px);
}
@media screen and (max-width: 669px) {
  #wherever-animation.step_2 .cursor {
    -webkit-transform: translate(-30px, 115px);
    transform: translate(-30px, 115px);
  }
}
#wherever-animation.step_3 .cursor {
  -webkit-transform: translate(-70px, 70px);
  transform: translate(-70px, 70px);
}
@media screen and (max-width: 669px) {
  #wherever-animation.step_3 .cursor {
    -webkit-transform: translate(-30px, 185px);
    transform: translate(-30px, 185px);
  }
}
#wherever-animation.step_4 .cursor {
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
#wherever-animation.step_4 .list {
  transition-delay: 800ms;
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
}
#wherever-animation > div.screen {
  background-color: #fff;
  border: 1px solid #efefef;
  border-radius: 14px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  overflow: hidden;
}
#wherever-animation > div.screen > header {
  padding: 23px 15px 20px 25px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.15);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
#wherever-animation > div.screen > header #search-box {
  color: #7D769E;
  pointer-events: none;
  display: inline-flex;
  display: -webkit-inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  font-size: 1.4rem;
}
#wherever-animation > div.screen > header #search-box .icon {
  margin-right: 1rem;
  font-size: 1.2em;
}
#wherever-animation > div.screen > header #search-box > span {
  color: #7D769E;
}
#wherever-animation > div.screen > header #search-box > span:not(.typed-cursor) {
  max-width: 80px;
  white-space: nowrap;
}
#wherever-animation > div.screen > header > aside {
  display: inline-flex;
  display: -webkit-inline-flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
}
#wherever-animation > div.screen > header > aside img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  margin-left: 10px;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}
#wherever-animation > div.screen .results {
  position: relative;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  padding-top: 20px;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#wherever-animation > div.screen .results ul {
  padding: 0 10px;
}
#wherever-animation > div.screen .results ul li {
  cursor: pointer;
  opacity: 0;
  border: 1px solid #535a6810;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  margin-bottom: 15px;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  padding: 13px 15px 9px 10px;
}
#wherever-animation > div.screen .results ul li figure {
  width: 30px;
  transform: none;
}
#wherever-animation > div.screen .results ul li figure img {
  width: 100%;
  object-fit: contain;
}
#wherever-animation > div.screen .results ul li span {
  font-size: 1.7rem;
  color: #7D769E;
  font-family: "Circe-Regular", "Lucida Grande", serif;
}
#wherever-animation > div.screen .results ul li span strong {
  display: block;
}
#wherever-animation > div.screen .results ul li p {
  font-size: 1.2rem;
  line-height: 1.3em;
  color: #7D769E;
}
#wherever-animation > div.screen .results.active {
  opacity: 1;
}
#wherever-animation > div.screen .results.active ul li {
  -webkit-animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both;
  animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both;
}
#wherever-animation > div.screen .results.active ul li:nth-of-type(1) {
  -webkit-animation-delay: 50ms;
  animation-delay: 50ms;
}
#wherever-animation > div.screen .results.active ul li:nth-of-type(2) {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
#wherever-animation > div.screen .results.active ul li:nth-of-type(3) {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}
#wherever-animation > div.screen .results.active ul li:nth-of-type(4) {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
#wherever-animation > div.screen .results.active ul li:nth-of-type(5) {
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
}
#wherever-animation > div.screen .results.active ul li:nth-of-type(6) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
#wherever-animation > div.screen .results.active ul li:nth-of-type(7) {
  -webkit-animation-delay: 350ms;
  animation-delay: 350ms;
}
#wherever-animation > div.screen .results.active ul li:nth-of-type(8) {
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
#wherever-animation > div.screen .list {
  padding-top: 2.5rem;
  position: absolute;
  z-index: 1;
  top: 64px;
  left: 0;
  right: 0;
  bottom: auto;
  pointer-events: none;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#wherever-animation > div.screen .list ul {
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 10px;
}
@media screen and (max-width: 669px) {
  #wherever-animation > div.screen .list ul {
    grid-template-columns: 1fr;
  }
}
#wherever-animation > div.screen .list ul li {
  cursor: pointer;
  opacity: 0;
  border: 1px solid #535a6810;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  padding: 10px;
  margin-bottom: 15px;
}
#wherever-animation > div.screen .list ul li > div {
  display: grid;
  grid-template-columns: 3rem 1fr;
  grid-column-gap: 10px;
  align-items: center;
}
#wherever-animation > div.screen .list ul li > div figure {
  width: 3rem;
}
#wherever-animation > div.screen .list ul li > div figure img {
  width: 100%;
  object-fit: contain;
}
#wherever-animation > div.screen .list ul li > div span {
  font-size: 1.7rem;
  color: #7D769E;
  font-family: "Circe-Regular", "Lucida Grande", serif;
}
#wherever-animation > div.screen .list ul li > div span strong {
  display: block;
}
#wherever-animation > div.screen .list ul li > div span p {
  font-size: 1.2rem;
  line-height: 1.3em;
}

@keyframes selectSource {
  0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
}
header#anywhere-header {
  border: 1px solid blue;
  position: static;
}
header#anywhere-header a {
  color: #7D769E;
  font-size: 1.7rem;
  font-family: "Circe-Light", "Lucida Grande", serif;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #4b474d;
  margin: 0 1rem;
  padding: 1rem 2rem;
}

#anywhere-animation {
  position: relative;
  height: 450px;
  width: 100%;
  max-width: 600px;
  border-radius: 14px;
  border: 1px solid #535a6810;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(22, 10, 82, 0.6)), to(rgba(75, 71, 77, 0.7)));
  background-image: -webkit-linear-gradient(to bottom, rgba(22, 10, 82, 0.6), rgba(75, 71, 77, 0.7));
  background-image: linear-gradient(to bottom, rgba(22, 10, 82, 0.6), rgba(75, 71, 77, 0.7));
  box-shadow: 0px 0px 50px 0 rgba(35, 8, 62, 0.5);
  -webkit-box-shadow: 0px 0px 50px 0 rgba(35, 8, 62, 0.5);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
#anywhere-animation .cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  opacity: 0;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#anywhere-animation > div.screen {
  background-color: #fff;
  border: 1px solid #efefef;
  border-radius: 14px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  position: absolute;
  top: 15px;
  left: 15px;
  overflow: hidden;
}
#anywhere-animation > div.screen #google-chrome.active > figure {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
#anywhere-animation > div.screen #google-chrome.active #keyboard {
  -webkit-animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both;
  animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both;
}
#anywhere-animation > div.screen #google-chrome.active #keyboard kbd:first-child {
  -webkit-animation: selectKey 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
  animation: selectKey 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}
#anywhere-animation > div.screen #google-chrome.active #keyboard kbd:nth-child(2) {
  -webkit-animation: selectKey 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
  animation: selectKey 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
  -webkit-animation-delay: 1600ms;
  animation-delay: 1600ms;
}
#anywhere-animation > div.screen #google-chrome.active #keyboard kbd:nth-child(3) {
  -webkit-animation: selectKey 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
  animation: selectKey 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
  -webkit-animation-delay: 2400ms;
  animation-delay: 2400ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 > figure {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  opacity: 0.7;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li {
  -webkit-animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both;
  animation: zestIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(1) {
  -webkit-animation-delay: 75ms;
  animation-delay: 75ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(2) {
  -webkit-animation-delay: 150ms;
  animation-delay: 150ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(3) {
  -webkit-animation-delay: 225ms;
  animation-delay: 225ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(4) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(5) {
  -webkit-animation-delay: 375ms;
  animation-delay: 375ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(6) {
  -webkit-animation-delay: 450ms;
  animation-delay: 450ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(7) {
  -webkit-animation-delay: 525ms;
  animation-delay: 525ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(8) {
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(9) {
  -webkit-animation-delay: 675ms;
  animation-delay: 675ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar .list li:nth-of-type(10) {
  -webkit-animation-delay: 750ms;
  animation-delay: 750ms;
}
#anywhere-animation > div.screen #google-chrome.step_1 .sidebar > header figure {
  -webkit-animation: scaleIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
  animation: scaleIn 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 1 forwards;
  -webkit-animation-delay: 250ms;
  animation-delay: 250ms;
}
#anywhere-animation > div.screen #google-chrome > figure {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  position: relative;
}
#anywhere-animation > div.screen #google-chrome > figure::after {
  content: " ";
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  height: 30%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.2)), to(#fff));
  background-image: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0.2), #fff);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), #fff);
}
#anywhere-animation > div.screen #google-chrome > figure > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#anywhere-animation > div.screen #google-chrome .sidebar {
  min-width: 170px;
  border-right: 1px solid #535a6810;
  background-color: #fff;
  width: 30%;
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
#anywhere-animation > div.screen #google-chrome .sidebar > header {
  border-bottom: 1px solid #535a6810;
  padding: 10px;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  display: -webkit-flex;
  display: flex;
}
#anywhere-animation > div.screen #google-chrome .sidebar > header figure {
  width: 60px;
  opacity: 0;
}
#anywhere-animation > div.screen #google-chrome .sidebar > header figure img {
  width: 100%;
  object-fit: contain;
}
#anywhere-animation > div.screen #google-chrome .sidebar > header i {
  display: block;
  background-color: #535a6810;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
#anywhere-animation > div.screen #google-chrome .sidebar .small-search {
  margin: 10px;
  background-color: #535a6810;
  height: 20px;
  border-radius: 4px;
  padding: 5px 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#anywhere-animation > div.screen #google-chrome .sidebar .small-search .icon {
  color: #4b474d;
}
#anywhere-animation > div.screen #google-chrome .sidebar .small-search span {
  color: #959595;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-weight: 400;
}
#anywhere-animation > div.screen #google-chrome .list {
  padding: 0 10px 10px;
  z-index: 1;
  pointer-events: none;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#anywhere-animation > div.screen #google-chrome .list li {
  cursor: pointer;
  text-align: left;
  border: 1px solid #535a6810;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  margin-bottom: 10px;
  opacity: 0;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: center;
  grid-column-gap: 8px;
  padding: 5px 5px 6px 6px;
}
#anywhere-animation > div.screen #google-chrome .list li figure {
  width: 1.5rem;
  transform: none;
}
#anywhere-animation > div.screen #google-chrome .list li figure img {
  width: 100%;
  object-fit: contain;
}
#anywhere-animation > div.screen #google-chrome .list li span {
  font-size: 0.8rem;
  color: #7D769E;
  font-family: "Circe-Regular", "Lucida Grande", serif;
  display: block;
}
#anywhere-animation > div.screen #google-chrome .list li span strong {
  display: block;
}
#anywhere-animation > div.screen #google-chrome .list li p {
  font-size: 0.7rem;
  line-height: 1.1em;
  color: #7D769E;
}
#anywhere-animation > div.screen #google-chrome #keyboard {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  opacity: 0;
  font-size: 2.7rem;
  color: #878787;
  font-family: "Lato", "Lucida Grande", sans-serif;
}
#anywhere-animation > div.screen #google-chrome #keyboard i {
  font-style: normal;
}
#anywhere-animation > div.screen #google-chrome #keyboard kbd {
  height: 4rem;
  width: 4rem;
  display: inline-flex;
  display: -webkit-inline-flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
  display: inline-block;
  border: 1px solid #535a6810;
  background-color: #efefef;
  padding: 2px 0 0;
  border-radius: 4px;
}

@keyframes selectKey {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  100% {
    background-color: #878787;
    color: #efefef;
  }
}
#companies-proof {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 100px 0;
}
@media screen and (max-width: 669px) {
  #companies-proof {
    padding: 70px 0;
  }
}
#companies-proof > div {
  width: 90%;
  margin: 0 auto;
}
#companies-proof > div h4 {
  font-family: "Circe-Light", "Lucida Grande", serif;
  font-weight: 700;
  color: #160a52;
  font-size: 2.4rem;
  margin-bottom: 5rem;
}
@media screen and (max-width: 669px) {
  #companies-proof > div h4 {
    font-size: 2rem;
    margin-bottom: 3rem;
  }
}
#companies-proof > div picture, #companies-proof > div source, #companies-proof > div img {
  width: 100%;
}

#companies-proof {
  padding-top: 0;
}

#repository {
  position: relative;
  margin-top: 140px;
  padding-top: 150px;
  background-color: #160a52;
}
@media screen and (max-width: 669px) {
  #repository {
    margin-top: 70px;
    padding-top: 70px;
  }
}
#repository::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 120px;
  background-color: #160a52;
  z-index: -1;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: translate(0, 0) skewY(-4deg);
  transform: translate(0, 0) skewY(-4deg);
}
@media screen and (min-width: 670px) and (max-width: 979px) {
  #repository {
    margin-top: 100px;
    padding-top: 100px;
    margin-bottom: 0;
  }
}
#repository > div:first-child {
  display: grid;
  grid-template-columns: 1fr 500px;
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #repository > div:first-child {
    display: block;
    padding-bottom: 5rem;
  }
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #repository > div:first-child main {
    width: 90%;
    margin: 0 auto;
  }
}
#repository > div:first-child main h5 {
  color: #ffcf2e;
  text-transform: none;
}
#repository > div:first-child main h3 {
  color: #fff;
}
#repository > div:first-child main p {
  color: #e9dbf4;
}
#repository > div:first-child main .repo-buttons-wrapper {
  padding-top: 20px;
}
#repository > div:first-child main .repo-buttons-wrapper .btn-primary {
  margin-right: 1.5rem;
}
#repository > div:first-child main .repo-buttons-wrapper a:not(.btn-primary) {
  display: inline-block;
  background-color: transparent;
  box-shadow: none;
  padding-left: 0;
}
#repository > div:first-child main .repo-buttons-wrapper a:not(.btn-primary) .label {
  color: #e9dbf4;
}
@media screen and (max-width: 669px) {
  #repository > div:first-child main .repo-buttons-wrapper button {
    margin-bottom: 1.5rem;
  }
  #repository > div:first-child main .repo-buttons-wrapper a, #repository > div:first-child main .repo-buttons-wrapper button {
    display: block;
    width: 100%;
    text-align: center;
    margin-right: 0;
  }
}
#repository > div:first-child aside {
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  -webkit-transform: translate(0, -15%);
  transform: translate(0, -15%);
  background-color: rgba(238, 237, 249, 0.05);
  margin: 0 auto;
  width: 90%;
  position: relative;
  border-radius: 50%;
}
#repository > div:first-child aside::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
#repository > div:first-child aside > figure {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#repository > div:first-child aside > img {
  position: absolute;
  width: 15%;
  right: 0;
  bottom: 5%;
  z-index: -1;
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  #repository > div:first-child aside {
    padding: 20px 20px 15px;
  }
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #repository > div:first-child aside {
    margin-top: 5rem;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    width: 70%;
  }
}
#repository .mobile-app {
  padding: 40px 50px;
  border-radius: 7px;
  margin-top: 20px;
  position: relative;
  z-index: 2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f5f5f5));
  background-image: -webkit-linear-gradient(to bottom, #fcfcfc, #f5f5f5);
  background-image: linear-gradient(to bottom, #fcfcfc, #f5f5f5);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transform: translate(0, 80%);
  transform: translate(0, 80%);
  width: fit-content;
}
@media screen and (max-width: 669px) {
  #repository .mobile-app {
    display: none;
  }
}
@media screen and (min-width: 670px) and (max-width: 979px) {
  #repository .mobile-app {
    margin-top: 0;
    -webkit-transform: translate(0, 55%);
    transform: translate(0, 55%);
  }
}
#repository .mobile-app > main {
  margin-right: 4vw;
  position: relative;
  z-index: 3;
}
#repository .mobile-app > main h4 {
  color: #5e079a;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  margin-bottom: 1rem;
}
#repository .mobile-app > main p {
  font-family: "Lato", "Lucida Grande", sans-serif;
  color: #535a68;
  font-size: 1.7rem;
}
#repository .mobile-app > aside a {
  display: inline-flex;
  white-space: nowrap;
}
#repository .mobile-app > aside a:first-child {
  margin-right: 2rem;
}
#repository .mobile-app > figure {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  -webkit-transform: translate(30%, -25.5%);
  transform: translate(30%, -25.5%);
}
#repository .mobile-app > #mobile-yellow {
  position: absolute;
  left: -5%;
  width: 9%;
  bottom: 0;
  z-index: -1;
  -webkit-transform: translateY(76%);
  transform: translateY(76%);
}
@media screen and (min-width: 900px) and (max-width: 980px) {
  #repository .mobile-app {
    margin-top: 0;
  }
}

.ios a.android {
  display: none !important;
}

.android a.ios {
  display: none !important;
}

#signup {
  text-align: center;
  padding: 100px 40px 70px;
  width: 100%;
  z-index: 10;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 670px) and (max-width: 979px) {
  #signup {
    border-radius: 0;
  }
}
@media screen and (max-width: 669px) {
  #signup {
    -webkit-transform: none;
    transform: none;
    width: 90%;
    margin: 70px auto 0;
    padding: 30px 15px;
  }
}
@media screen and (max-width: 669px) {
  #signup > .container {
    width: 100%;
    margin: 0;
    overflow: hidden;
    min-width: 0;
  }
}
#signup h3 {
  font-size: 4.2rem;
  margin-bottom: 0.5rem;
  color: #160a52;
}
#signup h3 > span {
  color: #00C999;
  font-family: "Circe-Regular", "Lucida Grande", serif;
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px) {
  #signup h3 {
    font-size: 3.5rem;
  }
}
@media screen and (max-width: 669px) {
  #signup h3 {
    font-size: 3rem;
    margin-bottom: 0.8rem;
  }
}
#signup p {
  font-size: 3rem;
  line-height: 1.3em;
  font-family: "Circe-Light", "Lucida Grande", serif;
  color: #160a52;
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px) {
  #signup p {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 669px) {
  #signup p {
    font-size: 1.7rem;
  }
}
#signup .primary-input {
  background-color: #f0f0f0;
  background-image: none;
  color: #160a52;
}
#signup .primary-input::placeholder {
  color: #4b474d;
}
#signup .primary-input:-ms-input-placeholder {
  color: #4b474d;
}
#signup .primary-input::-ms-input-placeholder {
  color: #4b474d;
}
#signup .primary-input::-webkit-input-placeholder {
  color: #4b474d;
}
#signup .signup-form {
  margin: 40px 0 10px;
}
@media screen and (max-width: 669px) {
  #signup .signup-form {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-bottom: 20px;
  }
}
#signup .signup-form .input-wrapper, #signup .signup-form .primary-input + .icon {
  color: #252525;
}
#signup .signup-form .input-wrapper:not(:last-of-type) {
  margin-right: 30px;
}
@media screen and (max-width: 669px) {
  #signup .signup-form .input-wrapper:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 1rem;
  }
}
#signup .signup-form .btn-primary {
  margin-left: 30px;
  padding: 13px 30px;
  box-shadow: 0 0px 5px 0 rgba(47, 5, 88, 0.1);
  position: relative;
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px) {
  #signup .signup-form .btn-primary {
    white-space: nowrap;
  }
}
@media screen and (max-width: 669px) {
  #signup .signup-form .btn-primary {
    margin-left: 0;
    margin-top: 1rem;
  }
}
#signup .signup-form .btn-primary .icon {
  position: absolute;
  left: 45%;
  top: 11px;
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  display: block;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
  pointer-events: none;
}
#signup .signup-form .btn-primary.loading .icon {
  opacity: 1;
}
#signup .signup-form .btn-primary.loading span {
  opacity: 0;
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px) {
  #signup .signup-form {
    display: -webkit-flex;
    display: flex;
  }
}
#signup span.error {
  display: block;
  font-size: 1.4rem;
  color: #252525;
  text-align: center;
}
#signup .terms {
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-size: 1.4rem;
  margin-top: 40px;
  color: #4b474d;
}
@media screen and (max-width: 669px) {
  #signup .terms {
    font-size: 1.2rem;
    line-height: 1.3em;
  }
}
#signup .terms > a {
  font-weight: bold;
  color: #252525;
}
#signup > picture {
  position: absolute;
  object-fit: contain;
  width: 120px;
  height: 75px;
  top: 4%;
  left: 24%;
  opacity: 0.4;
}
#signup > picture img {
  width: 100%;
}
#signup > picture:nth-child(2) {
  width: 15%;
  bottom: 5%;
  left: 3%;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0.4;
  top: auto;
}
#signup > picture:last-child {
  width: 12%;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  opacity: 0.6;
  right: -3%;
  left: auto;
  top: 25%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
@media screen and (min-width: 900px) and (max-width: 980px), screen and (min-width: 670px) and (max-width: 979px) {
  #signup {
    margin-top: 0;
  }
}
@media screen and (min-width: 981px) and (max-width: 1160px) {
  #signup {
    margin-top: 70px;
  }
}

/* Content Boost Vars */
/* mobile vars */
/* mobile */
/* 2019 Website - Media Queries */
/* 2019 Website - Vars */
/* 2019 Website - Animation Vars */
/* 2019 Updated Colors */
#footer {
  padding-top: 100px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f5ff), to(#f1efff));
  background-image: -webkit-linear-gradient(to bottom, #f6f5ff, #f1efff);
  background-image: linear-gradient(to bottom, #f6f5ff, #f1efff);
}
@media screen and (min-width: 670px) and (max-width: 979px) {
  #footer {
    padding-top: 5rem;
  }
}
@media screen and (max-width: 669px) {
  #footer {
    padding-top: 105px;
    margin-top: -35px;
  }
}
#footer .footer-strong, #footer > .container main .lower > div strong, #footer > .container main .upper ul li strong {
  display: block;
  font-size: 1.4rem;
  color: #160a52;
  text-transform: uppercase;
  margin-bottom: 2rem;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-weight: bold;
}
#footer .footer-strong a, #footer > .container main .lower > div strong a, #footer > .container main .upper ul li strong a {
  color: inherit;
}
#footer > .container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  padding-bottom: 50px;
  margin: 0 auto;
  max-width: 1080px;
  min-width: 327px;
  width: 95%;
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #footer > .container {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
@media screen and (max-width: 669px) {
  #footer > .container {
    max-width: 90%;
    min-width: 90%;
    margin: 0 auto;
    padding-bottom: 30px;
  }
}
#footer > .container aside {
  width: 120px;
  margin-right: 15%;
}
#footer > .container aside img {
  width: 100%;
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px), screen and (max-width: 669px) {
  #footer > .container aside {
    margin-bottom: 50px;
  }
}
#footer > .container main {
  width: 100%;
}
#footer > .container main .upper {
  margin-bottom: 60px;
}
@media screen and (max-width: 669px) {
  #footer > .container main .upper {
    margin-bottom: 3rem;
  }
}
#footer > .container main .upper ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
@media screen and (max-width: 669px) {
  #footer > .container main .upper ul {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 669px) {
  #footer > .container main .upper ul li {
    min-width: 50%;
    margin-bottom: 3rem;
  }
}
#footer > .container main .upper ul li nav {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#footer > .container main .upper ul li nav a {
  display: block;
  color: #160a52;
  font-family: "Lato", "Lucida Grande", sans-serif;
  font-weight: normal;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  text-transform: none;
}
#footer > .container main .lower {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
}
@media screen and (min-width: 670px) and (max-width: 979px), screen and (max-width: 669px) {
  #footer > .container main .lower {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
#footer > .container main .lower > div {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
}
@media screen and (max-width: 669px) {
  #footer > .container main .lower > div {
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-bottom: 3rem;
    width: 100%;
    min-width: 100%;
  }
}
#footer > .container main .lower > div strong {
  margin-bottom: 0;
  margin-right: 2rem;
}
@media screen and (max-width: 669px) {
  #footer > .container main .lower > div strong {
    text-indent: 0.5rem;
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 669px) {
  #footer > .container main .lower > div > div {
    min-width: 100%;
  }
}
@media screen and (max-width: 669px) {
  #footer > .container main .lower > div.stores a {
    display: inline-flex;
    margin-bottom: 1rem;
  }
}
@media screen and (max-width: 669px) {
  #footer > .container main .lower > div.social {
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
  }
  #footer > .container main .lower > div.social strong {
    margin-bottom: 0;
  }
  #footer > .container main .lower > div.social a {
    margin-right: 3rem;
  }
}
#footer > .container main .lower > div a {
  margin-right: 10px;
}
#footer > .container main .lower > div:last-child a {
  color: #160a52;
  font-size: 2.4rem;
}
#footer .bottom-footer {
  background-color: rgba(76, 10, 142, 0.02);
  padding: 10px 0;
}
#footer .bottom-footer > .container {
  margin: 0 auto;
  max-width: 1080px;
  min-width: 327px;
  width: 95%;
}
#footer .bottom-footer span {
  color: #7d769e;
  font-size: 1.2rem;
}

#sales-modal {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  overflow: auto;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  display: none;
}
#sales-modal.active {
  display: -webkit-flex;
  display: flex;
}
#sales-modal.orchard-modal .card > header {
  display: none;
}
#sales-modal.orchard-modal .card > header.orchard-header {
  display: block;
}
#sales-modal .card {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#F0F0F0));
  background-image: -webkit-linear-gradient(to bottom, #FFFFFF, #F0F0F0);
  background-image: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
  box-shadow: 5px 5px 40px 0 rgba(38, 6, 70, 0.3);
  -webkit-box-shadow: 5px 5px 40px 0 rgba(38, 6, 70, 0.3);
  border-radius: 7px;
  padding: 3.5rem 5rem 5rem;
  position: relative;
  min-width: 460px;
  max-height: 80vh;
  overflow-y: auto;
}
#sales-modal .card.completed > header p {
  display: none;
}
#sales-modal .card.completed > main .input-wrapper, #sales-modal .card.completed > main .buttons-wrapper {
  display: none;
}
#sales-modal .card.completed > main .survey-wrapper {
  display: block;
}
@media screen and (max-width: 669px) {
  #sales-modal .card {
    min-width: unset;
    height: 90vh;
    width: 95vw;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
#sales-modal .card .x-button {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  background: none;
  height: 50px;
  font-size: 3rem;
  color: #160a52;
}
#sales-modal .card > header {
  text-align: center;
}
#sales-modal .card > header.orchard-header {
  display: none;
}
#sales-modal .card > header h5 {
  font-size: 3rem;
  font-family: "Circe-Light", "Lucida Grande", serif;
  color: #160a52;
  font-weight: bold;
  position: relative;
}
#sales-modal .card > header h5 sup {
  font-size: 50%;
  margin-left: 0.5rem;
}
#sales-modal .card > header p {
  font-size: 1.4rem;
  line-height: 1.8em;
  color: #535a68;
  max-width: 300px;
  margin: 0 auto;
}
#sales-modal .card > main {
  padding-top: 15px;
  padding-bottom: 25px;
  text-align: center;
  height: unset;
  position: relative;
  border-bottom: none;
}
#sales-modal .card > main .input-wrapper {
  max-width: 300px;
  display: block;
  margin: 20px auto 0;
}
#sales-modal .card > main .disclaimer {
  margin: 30px auto 0;
  text-align: center;
  font-size: 1.1rem;
  color: #535a68;
  max-width: 300px;
}
#sales-modal .card > main .disclaimer a {
  color: #535a68;
  text-decoration: underline;
}
#sales-modal .card > main .buttons-wrapper {
  display: block;
  max-width: 300px;
  margin: 15px auto 0;
}
#sales-modal .card > main .buttons-wrapper button {
  width: 100%;
  box-shadow: 0 0px 20px 0 rgba(47, 5, 88, 0.2);
  position: relative;
  border: none;
}
#sales-modal .card > main .buttons-wrapper button .icon {
  position: absolute;
  left: 45%;
  top: 11px;
  margin: 0;
  padding: 0;
  font-size: 2rem;
  display: block;
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
  pointer-events: none;
}
#sales-modal .card > main .buttons-wrapper button span {
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 1;
}
#sales-modal .card > main .buttons-wrapper button.loading .icon {
  opacity: 1;
}
#sales-modal .card > main .buttons-wrapper button.loading span {
  opacity: 0;
}
#sales-modal .card > main .survey-wrapper {
  display: none;
}
#sales-modal .card > main .survey-wrapper p {
  font-size: 1.4rem;
  line-height: 1.8em;
  color: #535a68;
  max-width: 300px;
}
#sales-modal .card > main .survey-wrapper a {
  margin-top: 2rem;
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}
#sales-modal .card > main .success {
  font-size: 1.2rem;
  font-family: "Lato", "Lucida Grande", sans-serif;
  visibility: hidden;
  position: absolute;
  bottom: -0.5rem;
  text-align: center;
  left: 0;
  right: 0;
}
#sales-modal .card > main .success > span {
  display: inline-block;
  vertical-align: middle;
  margin-left: -12px;
}
#sales-modal .card > main .success.active {
  visibility: visible;
}
#sales-modal .card > footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(127, 127, 127, 0.1);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
#sales-modal .card > footer .pbutton {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: #fff;
  border-radius: 8px;
  padding-left: 15px;
  border: 1px solid #efefef50;
  width: 100%;
  margin-top: 20px;
}
#sales-modal .card > footer .pbutton span {
  display: block;
  text-align: left;
  color: #160a52;
  margin-left: -15px;
  font-size: 1.4rem;
  line-height: 1.3em;
  letter-spacing: 0.17px;
}
#sales-modal .card .error-message {
  font-size: 1.2rem;
  font-family: "Lato", "Lucida Grande", sans-serif;
  visibility: hidden;
  position: absolute;
  bottom: -0.5rem;
  text-align: center;
  left: 0;
  right: 0;
}
#sales-modal .card .error-message > span {
  display: inline-block;
  vertical-align: middle;
  margin-left: -12px;
}
#sales-modal .card .error-message > span::before {
  content: "❗️";
  width: 12px;
  display: inline-block;
  vertical-align: middle;
}
#sales-modal .card .error-message.active {
  visibility: visible;
}
#sales-modal .signin-block {
  max-width: 300px;
  font-size: 1.4rem;
  line-height: 1.8em;
  color: #535a68;
  padding-top: 10px;
}
#sales-modal .signin-block span a {
  color: #160a52;
}
#sales-modal .signin-block p {
  margin-top: 1rem;
  font-size: 1.1rem;
  line-height: 1.3em;
}
#sales-modal .signin-block p a {
  color: inherit;
  text-decoration: underline;
}

#top-menu .header-actions .req-access {
  display: inline-flex !important;
}

.req-access .label {
  pointer-events: none;
}

.walkme {
  background-color: #ffffff10;
  padding: 3rem 5rem;
  border-radius: 8px;
  display: inline-block;
  margin-block-end: 5rem;
}
.walkme > figure {
  width: 120px;
  margin: 0 auto 1.5rem;
}
.walkme > h4 {
  font-size: 2rem;
  color: #fff;
  font-family: "Circe-Light", "Lucida Grande", serif;
}
.walkme > a {
  font-size: 1.6rem;
  color: #fff;
  font-family: "Lato", "Lucida Grande", sans-serif;
  text-transform: uppercase;
  margin-top: 0.5rem;
  display: block;
  font-weight: 700;
}

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