@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,500i,700,700i,900&display=swap&subset=cyrillic,cyrillic-ext,latin-ext);/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
*, *:before, *:after {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device 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;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}

/**
 * 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/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

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

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
button:active,
button:hover,
button:focus,
input:active,
input:hover,
input:focus,
a:active,
a:hover,
a:focus {
  outline: 0;
}

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

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

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

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1, .h1 {
  font-size: 34px;
  font-weight: bold;
  margin: 1rem 0;
}

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

/**
 * 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/10.
 */
img {
  border: 0;
  max-width: 100%;
  height: auto;
}

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

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

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

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * 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 Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
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;
}

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

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

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

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

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

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

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

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

td,
th {
  padding: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition-delay: 9999999s;
}

fieldset {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

select {
  -webkit-appearance: none;
  line-height: 1.1;
}

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
:-moz-placeholder,
::-moz-placeholder {
  color: inherit;
  opacity: 1 !important;
}

body, html {
  min-width: 485px;
}
body.no-scroll, html.no-scroll {
  overflow: hidden;
}

body {
  font-family: "Montserrat", "Roboto", "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  color: #222221;
  -webkit-font-smoothing: antialiased !important;
  -webkit-text-size-adjust: 100% !important;
  overflow: auto;
}

.wrap {
  max-width: 1220px;
  min-width: 485px;
  display: block;
  position: relative;
  margin: auto;
  padding: 0 2rem;
  z-index: 1;
  width: 100%;
}

.small-wrap {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 2rem;
}

#app {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  overflow-x: hidden;
}
#app .site-content {
  flex: 1;
}

.no-flexboxlegacy #app {
  display: block;
}

.personal .site-content {
  margin: 2rem 0;
}

a {
  text-decoration: none;
  color: #00fe9e;
}

b, strong {
  font-weight: 600;
}

.main-title,
.title-small,
.title-medium,
.title-big {
  font-weight: 700;
}

.main-title {
  font-size: 34px;
  text-transform: uppercase;
}

.title-small {
  font-size: 29.75px;
}

.title-medium {
  font-size: 34px;
}

.title-big {
  font-size: 42.5px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-width: 485px;
  padding: 2rem 2rem;
  font-weight: 600;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header a {
  color: #fff;
}
.site-header a:hover {
  color: #00fe9e;
}
.site-header .logo {
  font-size: 38px;
  line-height: 1;
}
.site-header .logo img {
  width: 30vw;
  margin: -1.5rem -3rem;
  max-width: 270px;
  min-width: 150px;
}
.site-header .logo img.scrolled-logo {
  display: none;
}
.site-header .menu-opener {
  display: none;
  width: 45px;
  height: 41px;
  text-align: center;
  z-index: 98;
  cursor: pointer;
  position: relative;
  background-color: #fff;
}
.site-header .menu-opener__icon, .site-header .menu-opener__icon:before, .site-header .menu-opener__icon:after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #222221;
  transition: all linear 200ms;
}
.site-header .menu-opener__icon {
  position: absolute;
  top: 50%;
  margin-top: -1px;
  right: 12px;
}
.site-header .menu-opener__icon:before, .site-header .menu-opener__icon:after {
  position: absolute;
  content: "";
}
.site-header .menu-opener__icon:before {
  top: -7px;
}
.site-header .menu-opener__icon:after {
  bottom: -7px;
}
.site-header .menu-opener.active .menu-opener__icon {
  transform: rotate(45deg);
}
.site-header .menu-opener.active .menu-opener__icon:before {
  top: 0;
  background-color: #222221;
}
.site-header .menu-opener.active .menu-opener__icon:after {
  bottom: 0;
  transform: rotate(90deg);
  background-color: #222221;
}
.site-header .menu {
  white-space: nowrap;
}
.site-header .menu a {
  text-transform: uppercase;
  padding: 0 0.6vw;
}
.site-header .menu a.active {
  color: #f95d9f;
}
.site-header .langs a + a {
  margin-left: 0.5rem;
}
.site-header .langs a.active {
  color: #00fe9e;
}
.site-header .personal {
  order: 3;
  color: #fff;
  background: #912e82;
  background: linear-gradient(95deg, #e55993 0%, #912e82 100%);
  padding: 5px 10px;
  border-radius: 10px;
  white-space: nowrap;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
}
.site-header .personal img {
  width: 25px;
  height: 25px;
  -o-object-position: center;
     object-position: center;
}
.site-header .personal .text {
  display: inline-block;
  vertical-align: super;
  font-size: 17px;
  color: #fff;
  font-weight: bold;
}
.site-header.scrolled {
  background-color: #fff;
  padding: 1rem 2rem;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.site-header.scrolled a {
  color: #222221;
}
.site-header.scrolled a:hover {
  color: #00fe9e;
}
.site-header.scrolled .logo .main-logo {
  display: none;
}
.site-header.scrolled .logo .scrolled-logo {
  display: block;
  min-width: 80px;
  max-width: 80px;
  margin: -0.5rem -1rem -0.5rem 1rem;
}
@media (max-width: 992.1px) {
  .site-header {
    flex-wrap: wrap;
    padding: 1rem 2rem;
  }
  .site-header .logo {
    order: 1;
  }
  .site-header .langs {
    order: 2;
  }
  .site-header .menu-opener {
    display: inline-block;
    order: 3;
  }
  .site-header .menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    margin-top: -1px;
  }
  .site-header .menu a {
    display: block;
    text-align: center;
    color: #222221;
    padding: 1rem 1rem;
  }
  .site-header .menu-opener.active + .menu {
    display: block;
    box-shadow: 0 10px 10px -8px rgba(0, 0, 0, 0.2);
  }
}

.loaded .site-header {
  transition: all linear 200ms;
}
.loaded .site-header a {
  transition: all linear 200ms;
}

.personal {
  /*.site-content {
    padding-left: $gutterWidth;
    padding-right: $gutterWidth;
  }*/
}
.personal .site-header {
  position: relative;
  padding: 1rem 2rem;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.personal .site-header a {
  color: #222221;
}
.personal .site-header a:hover {
  color: #00fe9e;
}
.personal .site-header .logo .main-logo {
  display: none;
}
.personal .site-header .logo .scrolled-logo {
  display: block;
  min-width: 80px;
  max-width: 80px;
  margin: -0.5rem -1rem -0.5rem 1rem;
}

.main-banner {
  width: 100%;
  min-height: 100vh;
  background-image: url("../img/main-banner.png");
  background-position: center;
  background-size: cover;
  padding-top: 170px;
  padding-bottom: 5vh;
  color: #fff;
  font-size: 23px;
  text-align: center;
}
.main-banner .flex-responsive__item {
  width: 33%;
}
.main-banner .socials {
  margin-top: 1em;
  display: flex;
  justify-content: center;
}
.main-banner .socials a {
  width: 35px;
  height: 35px;
  background-repeat: no-repeat;
  margin: 0 10px;
}
.main-banner .socials a.vk {
  background-image: url("/svg/socials/vk.svg");
}
.main-banner .socials a.inst {
  background-image: url("/svg/socials/inst.svg");
}
.main-banner .socials a.fb {
  background-image: url("/svg/socials/fb.svg");
}
@media (max-width: 992.1px) {
  .main-banner {
    background-attachment: fixed;
  }
  .main-banner .flex-responsive__item {
    width: 100%;
    margin-bottom: 2rem;
  }
}
.main-banner img {
  height: 45vh;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom center;
     object-position: bottom center;
}

.intro {
  text-align: center;
}
.intro .planet {
  position: relative;
  margin: 4rem auto;
}
.intro .bg {
  display: block;
  min-height: 800px;
  -o-object-fit: cover;
     object-fit: cover;
  margin: auto;
}
@media (max-width: 992.1px) {
  .intro .bg {
    margin: 0 -2rem;
    max-width: 125%;
  }
}
.intro .info {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.intro .info .block {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}
@media (max-width: 992.1px) {
  .intro .info .block {
    align-items: flex-start;
  }
}
.intro .info .block .avatar {
  width: 250px;
  height: 250px;
}
@media (max-width: 992.1px) {
  .intro .info .block .avatar {
    max-width: 150px;
  }
}
.intro .info .block .bubble {
  background-color: #fff;
  width: 380px;
  border-radius: 1.5rem;
  padding: 1rem 1rem;
  font-style: italic;
  position: relative;
  text-align: left;
}
.intro .info .block .bubble:before {
  display: block;
  content: url("/img/baloon-arrow.png");
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.intro .info .block.lisa {
  margin-top: 100px;
}
.intro .info .block.lisa .avatar {
  order: 1;
  margin-right: 2rem;
  margin-left: -300px;
}
@media (max-width: 992.1px) {
  .intro .info .block.lisa .avatar {
    margin-left: -60px;
  }
}
.intro .info .block.lisa .bubble {
  order: 2;
}
.intro .info .block.lisa .bubble:before {
  right: 99.5%;
}
.intro .info .block.maks {
  margin-top: -150px;
}
.intro .info .block.maks .avatar {
  order: 2;
  margin-right: -300px;
  margin-left: 2rem;
}
@media (max-width: 992.1px) {
  .intro .info .block.maks .avatar {
    margin-right: -60px;
  }
}
.intro .info .block.maks .bubble {
  order: 1;
}
.intro .info .block.maks .bubble:before {
  left: 99.5%;
  transform: translateY(-50%) scaleX(-1);
}
.intro .info .text {
  width: 100%;
  margin-top: -150px;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
}
@media (max-width: 992.1px) {
  .intro .info .text {
    margin-top: -200px;
  }
}

.profession .age {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 2rem auto;
}
.profession .age__item {
  display: block;
  cursor: pointer;
  padding: 1rem 2rem;
  border-radius: 1.5rem;
  border: 5px solid transparent;
  font-size: 70px;
  font-weight: 800;
}
.profession .age__item img {
  width: 290px;
  height: 380px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  display: block;
  margin: 0 auto 2rem;
}
.profession .age__item:hover, .profession .age__item.active {
  border-color: #00fe9e;
}
@media (max-width: 992.1px) {
  .profession .age {
    flex-wrap: wrap;
  }
  .profession .age .age__item {
    margin-bottom: 1rem;
    width: 100%;
  }
  .profession .age .age__item img {
    height: auto;
    width: auto;
  }
}
.profession .question {
  text-align: center;
}
.profession .question__title {
  color: #36a9e1;
  margin-bottom: 1rem;
}
.profession .question__answers--item {
  margin-bottom: 1rem;
  border: 5px solid transparent;
  border-radius: 1.5rem;
  display: block;
  padding: 1rem 2rem;
  cursor: pointer;
}
.profession .question__answers--item:hover, .profession .question__answers--item.active {
  border-color: #00fe9e;
}
.profession .professions {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  margin: 4rem 0 2rem;
}
.profession .professions__item .image {
  position: relative;
  display: inline-block;
  margin: 0 auto 1rem;
}
.profession .professions__item .image img {
  width: 225px;
  height: 225px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.profession .professions__item .image .percent {
  position: absolute;
  top: -20px;
  right: -20px;
  background-color: #222221;
  font-weight: 600;
  width: 90px;
  height: 90px;
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  border-radius: 50%;
}
.profession .professions__item .image .percent:after {
  content: "%";
}
.profession .professions__item .name {
  color: #36a9e1;
  font-size: 25px;
  font-weight: 600;
  line-height: 1;
  text-decoration: underline;
}
.profession .step-nav {
  text-align: center;
}
.profession .step-nav__item {
  background: #00fe9e;
  border-radius: 1.5rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  display: inline-block;
  text-transform: uppercase;
  cursor: pointer;
}
.profession .step-nav__item .counter {
  color: #fff;
  display: inline-block;
  margin-right: 1rem;
}
.profession .step-nav__item.disabled {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  cursor: default;
}

.profession__missions {
  padding: 0 5%;
}
.profession__missions--item {
  border: 1px solid #fff;
  border-radius: 1.5rem;
  padding: 1rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 992.1px) {
  .profession__missions--item {
    flex-wrap: wrap;
  }
  .profession__missions--item .info, .profession__missions--item .action {
    width: 100%;
  }
  .profession__missions--item .action {
    margin-top: 1rem;
  }
}
@media (min-width: 991.9px) {
  .profession__missions--item {
    text-align: left;
  }
  .profession__missions--item .info {
    width: 50%;
  }
  .profession__missions--item:nth-child(odd) .info {
    order: 2;
  }
}

.quize {
  text-align: center;
}
.quize__nav, .quize__caption {
  margin: 2rem auto;
}
.quize__question--title {
  font-size: 120%;
  font-weight: bold;
  color: #36a9e1;
  margin: 2rem auto;
}
.quize__variants {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  margin: 2rem auto;
}
@media (max-width: 992.1px) {
  .quize__variants {
    flex-wrap: wrap;
  }
}
.quize__variants--item {
  display: block;
  cursor: pointer;
  padding: 1rem 1rem;
  border-radius: 1.5rem;
  border: 5px solid transparent;
  font-size: 32px;
  font-weight: 800;
  max-width: 50%;
}
.quize__variants--item img {
  width: 290px;
  height: 380px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  display: block;
  margin: 0 auto 2rem;
}
.quize__variants--item:hover, .quize__variants--item.active {
  border-color: #00fe9e;
}
@media (max-width: 992.1px) {
  .quize__variants--item {
    margin-bottom: 1rem;
    width: 100%;
  }
  .quize__variants--item img {
    height: auto;
    width: auto;
  }
}
.quize__nav--item {
  background: #00fe9e;
  border-radius: 1.5rem;
  padding: 0.5rem 1rem;
  font-size: 30px;
  font-weight: 600;
  display: inline-block;
  text-transform: uppercase;
  cursor: pointer;
  min-width: 270px;
  text-align: center;
}
.quize__nav--item .counter {
  color: #fff;
  display: inline-block;
  margin-right: 1rem;
}
.quize__nav--item.disabled {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  cursor: default;
  pointer-events: none;
}
.quize__result--type .name {
  color: #36a9e1;
  font-weight: bold;
  font-size: 32px;
  line-height: 1;
}
.quize__result--professions {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-wrap: wrap;
}
.quize__result--profession {
  margin: 2rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.quize__result--profession .image {
  margin-bottom: 1rem;
}
.quize__result--profession .image img {
  border-radius: 50%;
  overflow: hidden;
  width: 225px;
  height: 225px;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}
.quize__result--profession .name {
  width: 270px;
  word-break: break-word;
  display: flex;
  flex: 1;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #36a9e1;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}
.quize__result--profession .percent {
  position: absolute;
  top: -20px;
  right: -20px;
  background-color: #222221;
  font-weight: 600;
  width: 90px;
  height: 90px;
  color: #fff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  border-radius: 50%;
}
.quize__result--profession .percent:after {
  content: "%";
}
.quize__result--profession[data-role=inline-popup] .name {
  text-decoration: underline;
}
.quize__copy {
  display: block;
  background: none;
  border: none;
  color: #36a9e1;
  text-decoration: underline;
  margin: 1rem auto 2rem;
  text-align: center;
}
.quize__row.selected .in-row {
  opacity: 0.5;
}
.quize__row.selected .in-row:hover, .quize__row.selected .in-row.active {
  opacity: 1;
}

.comics {
  position: relative;
  color: #fff;
  font-weight: 500;
  background-image: url("/img/comics.png?v=2");
  background-position: top center;
  background-size: cover;
}
.comics .bg {
  opacity: 0;
}
.comics__banner {
  position: absolute;
  left: 0;
  width: 595px;
  max-width: 90vw;
  top: 120px;
  -webkit-animation-name: comicsBanner;
          animation-name: comicsBanner;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.comics__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  top: 400px;
  margin-bottom: 400px;
  width: 1200px;
  max-width: 100%;
}
.comics__list--item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 70px;
  width: 100%;
}
.comics__list--item .icon {
  position: relative;
  margin-right: 2rem;
  max-width: 25vw;
}
.comics__list--item .icon .main {
  z-index: 10;
  position: relative;
}
.comics__list--item .icon .shadow {
  z-index: 1;
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.75);
  -webkit-animation-name: shadowPulse;
          animation-name: shadowPulse;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  transform-origin: center;
}
.comics__list--item .text {
  width: 50%;
}
.comics__list--item .text .title {
  font-size: 40px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.comics__list--item:nth-child(even) .icon {
  order: 2;
  margin-left: 2rem;
  margin-right: 0;
}
.comics__list--item [data-role=inline-popup] {
  text-decoration: underline;
}
.comics .planets video,
.comics .planets img {
  min-height: 600px;
  width: 100%;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}
.comics .planets .wrap {
  position: relative;
}
.comics .planets .info {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
@media (max-width: 992.1px) {
  .comics {
    background-image: url("/img/pattern3.jpg");
    background-position: center;
    background-size: contain;
    padding-top: 280px;
    padding-bottom: 30px;
  }
  .comics .bg {
    display: none;
  }
  .comics__banner {
    top: 100px;
  }
  .comics__list {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    padding: 0 2rem;
    text-align: center;
    margin-bottom: 0;
  }
  .comics__list--item {
    display: block;
    margin-bottom: 6rem;
  }
  .comics__list--item .icon {
    display: block;
    max-width: 50vw;
    margin: 0 auto 2rem !important;
  }
  .comics__list--item .text {
    width: 100%;
  }
}

@-webkit-keyframes comicsBanner {
  00% {
    left: 0;
    transform: translateX(-100%);
  }
  50% {
    left: 50%;
    transform: translateX(-50%);
  }
  100% {
    left: 100%;
    transform: translateX(0);
  }
}

@keyframes comicsBanner {
  00% {
    left: 0;
    transform: translateX(-100%);
  }
  50% {
    left: 50%;
    transform: translateX(-50%);
  }
  100% {
    left: 100%;
    transform: translateX(0);
  }
}
@-webkit-keyframes shadowPulse {
  from {
    transform: scale3d(1, 1, 1) translate(-50%, -50%) scale(1.75);
  }
  50% {
    transform: scale3d(1.15, 1.15, 1.15) translate(-50%, -50%) scale(1.75);
  }
  to {
    transform: scale3d(1, 1, 1) translate(-50%, -50%) scale(1.75);
  }
}
@keyframes shadowPulse {
  from {
    transform: scale3d(1, 1, 1) translate(-50%, -50%) scale(1.75);
  }
  50% {
    transform: scale3d(1.15, 1.15, 1.15) translate(-50%, -50%) scale(1.75);
  }
  to {
    transform: scale3d(1, 1, 1) translate(-50%, -50%) scale(1.75);
  }
}
.home-comics {
  margin-top: -1px;
  color: #fff;
  position: relative;
  background: url("/img/home-comics.png") no-repeat center;
  background-size: cover;
  min-height: 440px;
  margin-bottom: -2.75rem;
  z-index: 10;
}
.home-comics p {
  font-size: 26px;
  font-weight: bold;
  color: #00fe9e;
}

.about {
  color: #03124f;
  font-size: 16px;
}
.about .num {
  font-size: 100px;
  line-height: 1;
  font-weight: 700;
}
.about__why {
  margin: 3rem auto 2rem;
  color: #03124f;
}
@media (min-width: 991.9px) {
  .about__why {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
.about__why .why__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 2rem;
}
@media (min-width: 991.9px) {
  .about__why .why__item {
    max-width: 48%;
  }
}
@media (max-width: 992.1px) {
  .about__why .why__item {
    margin-bottom: 1rem;
  }
}
.about__why .why__item .number {
  background-image: url("/svg/number.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 60px;
  font-weight: 600;
  text-align: center;
  line-height: 100px;
  min-width: 100px;
  width: 100px;
  height: 100px;
  margin-right: 1rem;
}
.about__why .why__item .info {
  font-size: 21px;
  text-align: left;
}
.about__donation {
  font-size: 21px;
  margin-bottom: -2rem;
  position: relative;
  padding-bottom: 450px;
  min-height: 600px;
}
.about__donation img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: -1;
  display: block;
}
.about__donation .text {
  padding-top: 1rem;
  color: #fff;
  text-align: center;
}
.about__donation .text .title {
  font-size: 40px;
  margin-bottom: 1rem;
}

.experts__item {
  width: 30%;
}
.experts__item .image {
  font-size: 0;
  line-height: 0;
}
.experts__item .image img {
  width: 200px;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width: 992.1px) {
  .experts__item .image {
    text-align: center;
  }
}
.experts__item .name {
  font-size: 16px;
  font-weight: 700;
  margin: 1rem 0;
  color: #44c6e6;
}
.experts__item .desc {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  overflow: hidden;
}
.experts__item .read-more {
  font-size: 13px;
  color: #36a9e1;
  font-style: italic;
  cursor: pointer;
}
.experts__item a {
  color: #f95d9f;
}

@media (max-width: 485.1px) {
  .home-characters .intro img {
    min-height: 330px;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: -35px 0px;
       object-position: -35px 0px;
  }
}
.home-characters__list {
  display: flex;
  flex-wrap: wrap;
  color: #03124f;
  font-size: 21px;
}
.home-characters__item {
  width: 100%;
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768.1px) {
  .home-characters__item {
    flex-wrap: wrap;
  }
}
.home-characters__item .image {
  order: 1;
  margin-right: 3rem;
  width: 280px;
  min-width: 280px;
  max-width: 30vw;
}
.home-characters__item .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.home-characters__item .info {
  order: 2;
}
.home-characters__item:nth-child(odd) .image {
  order: 2;
  margin-left: 3rem;
  margin-right: 0;
}
.home-characters__item:nth-child(odd) .info {
  order: 1;
}
@media (max-width: 768.1px) {
  .home-characters__item .image {
    width: 100%;
    height: 200px;
    max-width: 100%;
    order: 1 !important;
    margin: 0 0 1rem !important;
    text-align: center;
  }
  .home-characters__item .info {
    order: 2 !important;
  }
}
.home-characters__item .skills {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 2rem;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
}
.home-characters__item .skills svg {
  fill: #03124f;
  width: 35px;
  min-width: 35px;
  margin-right: 1rem;
}
.home-characters__item .actions {
  margin-top: 2rem;
}

.home-partners__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 90vw;
  margin: auto;
  font-size: 0;
  line-height: 0;
}
.home-partners__list--item {
  display: inline-block;
  max-width: 300px;
  max-height: 200px;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  margin: 2rem 1rem;
}

.personal__return {
  text-decoration: none;
}
.personal__return img {
  display: inline-block;
  vertical-align: middle;
  width: 25px;
}
.personal__return span {
  margin-left: 0.5rem;
  display: inline-block;
  vertical-align: middle;
  color: #878787;
  text-decoration: underline;
}
.personal__quize-link {
  display: block;
  border-radius: 1.5rem;
  text-align: center;
  color: #fff;
  padding: 1rem;
  background: #44c6e6;
  position: relative;
  z-index: 10;
  transition: all linear 200ms;
}
.personal__quize-link .title {
  display: block;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 22px;
}
.personal__quize-link .text {
  display: block;
  font-size: 17px;
}
.personal__quize-link:hover {
  background: #43b1ca;
}
.personal__industries--item {
  margin-bottom: 2rem;
  min-height: 150px;
  color: #fff;
}
.personal__industries--item .head {
  display: block;
  position: relative;
  padding-left: 120px;
  cursor: pointer;
}
.personal__industries--item .head .icon {
  position: absolute;
  left: 0;
  top: 50%;
  width: 150px;
  height: 150px;
  background-color: #352b6d;
  border-radius: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.personal__industries--item .head .icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 120px;
  max-height: 120px;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}
.personal__industries--item .head .title {
  padding: 1rem 40px;
  font-size: 20px;
  font-weight: bold;
  background-color: #352b6d;
  border-radius: 0 1.5rem 1.5rem 0;
}
@media (min-width: 991.9px) {
  .personal__industries--item .head .title {
    font-size: 27px;
  }
}
.personal__industries--item .head:after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}
.personal__industries--item .head.active:after {
  border-bottom: 10px solid #fff;
  border-top: 0;
}
.personal__industries--item .body {
  margin-top: 50px;
  display: none;
}
.personal__industries--item .head.active + .body {
  display: block;
}
.personal__professions {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
}
.personal__professions--item {
  margin: 1rem 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;
}
.personal__professions--item .labels {
  position: absolute;
  top: 0;
  right: 0;
}
.personal__professions--item .labels img {
  width: 60px;
  height: 60px;
}
.personal__professions--item .labels img + img {
  margin-left: -1rem;
}
.personal__professions--item .image {
  margin-bottom: 1rem;
}
.personal__professions--item .image img {
  display: block;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  width: 225px;
  height: 225px;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  background: #878787;
  font-size: 0;
  line-height: 0;
}
.personal__professions--item .name {
  width: 270px;
  word-break: break-word;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  color: #36a9e1;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-decoration: underline;
}
.personal__professions--item:hover .name {
  text-decoration: none;
}
.personal__selected {
  background: #fff;
  color: #00112f;
  border-radius: 1.5rem;
  padding: 1rem;
}
.personal__selected .personal__professions {
  justify-content: flex-start;
}
.personal__selected .personal__professions--item {
  width: 20%;
  margin: 0 0 1rem;
  padding: 0 0.5rem;
}
@media (max-width: 768.1px) {
  .personal__selected .personal__professions--item {
    width: 50%;
  }
}
.personal__selected .personal__professions--item .name {
  width: 100%;
  font-size: 14px;
}
.personal__selected .personal__professions--item .image {
  margin-bottom: 0.5rem;
}
.personal__selected .personal__professions--item .image img {
  width: 75px;
  height: 75px;
  margin: auto;
}
.personal__selected .personal__professions--item .labels {
  left: 56%;
  right: auto;
}
.personal__selected .personal__professions--item .labels img {
  width: 33px;
  height: 33px;
}
.personal__selected .personal__professions--item .labels img + img {
  margin-left: -0.7rem;
}
.personal-home {
  background-image: url("/img/personal-home-bg-mobile.jpg");
  background-size: cover;
  background-position: 50%;
  background-attachment: fixed;
  color: #fff;
  margin: -2rem 0;
  padding: 2rem 0;
}
@media (min-width: 767.9px) {
  .personal-home {
    background-image: url("/img/personal-home-bg-desktop.jpg");
  }
}
.personal-home .user-meta__name,
.personal-home .user-meta__profile span,
.personal-home .personal__return span {
  color: #fff;
}
.personal-home .personal__return img,
.personal-home .user-meta__profile img {
  -webkit-filter: brightness(2);
          filter: brightness(2);
}
.personal-home .mabe {
  position: relative;
  display: flex;
}
.personal-home .mabe .mobile {
  margin: -8rem 0;
  margin-left: auto;
  margin-right: 0;
}
.personal-home .mabe .desktop {
  margin: -17vmin 0;
  display: none;
}
@media (min-width: 767.9px) {
  .personal-home .mabe .desktop {
    display: block;
  }
  .personal-home .mabe .mobile {
    display: none;
  }
}
.personal-home .links {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 768.1px) {
  .personal-home .links {
    flex-wrap: wrap;
  }
}
.personal-home .links a {
  width: 49%;
  display: inline-block;
  margin-top: 2rem;
  border-radius: 1.5rem;
  position: relative;
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  line-height: 120px;
  padding: 0 2rem;
  text-transform: uppercase;
  z-index: 10;
  transition: all linear 200ms;
}
@media (max-width: 768.1px) {
  .personal-home .links a {
    width: 100%;
  }
}
.personal-home .links a img {
  position: absolute;
  bottom: 0;
  height: 200px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  pointer-events: none;
}
.personal-home .links a.comics {
  background: #f95d9f;
}
.personal-home .links a.comics img {
  width: 65%;
  right: 5px;
  -o-object-position: right bottom;
     object-position: right bottom;
}
.personal-home .links a.comics:hover {
  background: #df5790;
}
.personal-home .links a.professions {
  background: #fdb405;
  text-align: right;
}
.personal-home .links a.professions img {
  width: 50%;
  left: -2rem;
  -o-object-position: left bottom;
     object-position: left bottom;
}
.personal-home .links a.professions:hover {
  background: #eca829;
}
.personal-home .links a.mind-trainers {
  width: 100%;
  background: #17a564;
  text-align: center;
}
@media (max-width: 768.1px) {
  .personal-home .links a.mind-trainers {
    text-align: right;
  }
}
.personal-home .links a.mind-trainers img {
  width: 50%;
  left: 23%;
  -o-object-position: left bottom;
     object-position: left bottom;
}
@media (max-width: 992.1px) {
  .personal-home .links a.mind-trainers img {
    left: 16%;
  }
}
@media (max-width: 768.1px) {
  .personal-home .links a.mind-trainers img {
    left: 0;
  }
}
.personal-home .links a.mind-trainers:hover {
  background: #15985c;
}
.personal-mind-trainers {
  background-image: url("/img/personal-home-mind-trainers-bg.jpg");
  background-size: cover;
  background-position: 50%;
  background-attachment: fixed;
  color: #fff;
  margin: -2rem 0;
  padding: 2rem 0;
  min-height: 90vh;
}
.personal-mind-trainers .professions-trigger {
  text-align: center;
  font-size: 18px;
  font-style: italic;
  text-decoration: underline;
  margin: 2rem auto;
  padding: 0 1rem;
}
.personal-mind-trainers #attempt-text {
  display: block;
  font-size: 18px;
  text-transform: none;
  color: #f95d9f;
  margin-top: 1rem;
}

.user-meta {
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  position: relative;
}
.user-meta__avatar {
  width: 130px;
  min-width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  padding: 10px;
  background: linear-gradient(220deg, #9be4fe 0%, #3aa6fc 52%, #be98fc 100%);
}
.user-meta__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 2;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.user-meta .info {
  text-align: center;
  width: 100%;
}
.user-meta__name {
  font-size: 32px;
  font-weight: bold;
  color: #36a9e1;
  margin-bottom: 0.5rem;
}
.user-meta__profile {
  text-decoration: none;
}
.user-meta__profile img {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
}
.user-meta__profile span {
  display: inline-block;
  vertical-align: middle;
  font-style: italic;
  color: #878787;
  text-decoration: underline;
}

.profession__slider {
  font-size: 0;
  line-height: 0;
}
.profession__slider .image {
  position: relative;
  cursor: pointer;
}
.profession__slider .image:before, .profession__slider .image:after {
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: all linear 200ms;
}
.profession__slider .image:before {
  background-color: rgba(0, 0, 0, 0.25);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
}
.profession__slider .image:after {
  background-image: url("/svg/foto_1.svg");
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  z-index: 10;
}
.profession__slider .image img {
  height: 215px;
  width: 215px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  z-index: 1;
}
.profession__slider .image:hover:after, .profession__slider .image:hover:before {
  opacity: 1;
}
.profession__missions {
  background-image: url("/img/fon2-01.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: repeat-y;
  border-radius: 1.5rem;
  text-align: center;
  color: #fff;
}
.profession__missions .title {
  font-size: 40px;
}
.profession__missions .meta {
  display: inline-block;
  margin-top: 1rem;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 1.5rem;
  padding: 0.5rem 1rem;
  font-size: 80%;
}
.profession__missions .meta svg {
  width: 20px;
  fill: #00fe9e;
  display: inline-block;
  vertical-align: sub;
}
.profession__comics {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.profession__comics > * {
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 484.9px) {
  .profession__comics {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: -0.5%;
    margin-right: -0.5%;
  }
  .profession__comics > * {
    box-sizing: border-box;
    width: 49%;
    margin-left: 0.5%;
    margin-right: 0.5%;
  }
}
@media (min-width: 991.9px) {
  .profession__comics {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: -0.8333333333%;
    margin-right: -0.8333333333%;
  }
  .profession__comics > * {
    box-sizing: border-box;
    width: 31.6666666667%;
    margin-left: 0.8333333333%;
    margin-right: 0.8333333333%;
  }
}
.profession__comics img {
  min-height: 100px;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 1.5rem;
}
.profession__comics .main {
  width: 100%;
  position: relative;
}
.profession__comics .text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}
.profession__comics .text .title {
  font-size: 40px;
}
.profession__comics--item {
  position: relative;
  margin-top: 1rem;
  border-radius: 1.5rem;
  background: #000;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  height: 200px;
  transition: all linear 200ms;
}
.profession__comics--item img {
  height: 100%;
  width: 100%;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.75;
}
.profession__comics--item .text {
  font-weight: bold;
  padding: 1rem;
  font-size: 25.5px;
  line-height: 1.4;
}
.profession__comics--item:hover {
  transform: scale(1.025);
}

.available-missions__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  background: #fff;
  color: #00112f;
  border-radius: 1.5rem;
  padding: 1rem;
}
@media (max-width: 768.1px) {
  .available-missions__item {
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
  }
  .available-missions__item .info {
    margin-bottom: 1rem;
  }
}
.available-missions__item .profession,
.available-missions__item .character {
  width: 250px;
  margin-right: 2rem;
  position: relative;
  background: transparent;
  border-radius: 50%;
  line-height: 0;
}
.available-missions__item .profession img,
.available-missions__item .character img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 50%;
  overflow: hidden;
}
.available-missions__item .profession {
  margin-right: -2rem;
}
.available-missions__item .info {
  width: 100%;
}
.available-missions__item .info .title {
  font-size: 28px;
  line-height: 1.2;
}
.available-missions__item .info .professions a {
  color: #352b6d;
  text-decoration: underline;
}

.mind-trainer-list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  z-index: 10;
}
.mind-trainer-list__item {
  width: 320px;
  min-height: 100px;
  background: #fff;
  border-radius: 1.5rem;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
}
.mind-trainer-list__item .icon {
  width: 40px;
  height: 40px;
  margin-left: 1rem;
}
.mind-trainer-list__item .icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.mind-trainer-list__item .text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 1rem;
}
.mind-trainer-list__item .title {
  color: #000;
  font-weight: 600;
}
.mind-trainer-list__item .info {
  display: block;
  color: #d7508f;
  font-size: 12px;
  margin-top: 0.5rem;
}

.mind-trainer {
  text-align: center;
}
.mind-trainer__nav {
  display: block;
  margin: 2rem auto;
  text-align: center;
}
.mind-trainer__nav--item {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  vertical-align: middle;
  font-weight: bold;
  margin: 1rem 0.5rem;
  background: #fff;
  color: #000;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  cursor: default;
}
.mind-trainer__nav--item.current {
  background-color: #949494;
  text-decoration: underline;
}
.mind-trainer__nav--item.correct {
  background-color: #00fe9e;
}
.mind-trainer__nav--item.incorrect {
  background-color: #e30613;
  color: #fff;
}
.mind-trainer__content .question {
  font-size: 30px;
  font-weight: 700;
  margin: 2rem 0;
}
.mind-trainer__content .image {
  font-size: 0;
  line-height: 0;
  padding: 1rem;
  text-align: center;
  margin: 2rem 0;
}
.mind-trainer__content .image img {
  display: inline-block;
  max-width: 100%;
  max-height: 500px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  -o-object-position: center;
     object-position: center;
}
.mind-trainer__content .desc {
  margin: 2rem 0;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
}
.mind-trainer__content .options {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media (max-width: 992.1px) {
  .mind-trainer__content .options {
    display: block;
  }
}
.mind-trainer__content .options .option {
  display: block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.24);
  font-size: 25px;
  text-align: left;
  width: 49.5%;
  margin-top: 1rem;
  transition: all linear 200ms;
}
@media (max-width: 992.1px) {
  .mind-trainer__content .options .option {
    width: 100%;
  }
}
.mind-trainer__content .options .option:hover, .mind-trainer__content .options .option.selected {
  background: #fff;
  color: #000;
}
.mind-trainer__content .actions {
  margin: 2rem 0;
}

.site-footer {
  text-align: center;
  padding: 2rem 1rem;
  color: #fff;
  font-size: 14px;
  background-color: #271a52;
}
.site-footer a {
  color: #f95d9f;
}
.site-footer a:hover {
  text-decoration: underline;
}
.site-footer .socials {
  display: flex;
  justify-content: center;
}
.site-footer .socials a {
  width: 35px;
  height: 35px;
  background-repeat: no-repeat;
  margin: 0 10px;
}
.site-footer .socials a.vk {
  background-image: url("/svg/socials/vk.svg");
}
.site-footer .socials a.inst {
  background-image: url("/svg/socials/inst.svg");
}
.site-footer .socials a.fb {
  background-image: url("/svg/socials/fb.svg");
}

.page-banner {
  margin-top: -2rem;
  margin-bottom: 2rem;
}
.page-banner img {
  min-height: 450px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
}

.flex-responsive {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (max-width: 992.1px) {
  .flex-responsive {
    flex-wrap: wrap;
  }
  .flex-responsive__item {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
  }
}

.full-width-wrap {
  position: relative;
}
.full-width-wrap .full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: calc(100vw - 4px);
}

a.anchor {
  position: relative;
  top: -100px;
}

.video-wrapper {
  position: relative;
  margin: 4rem auto;
  cursor: pointer;
}
.video-wrapper .video {
  max-width: 100%;
  height: auto;
  margin: auto;
}
.video-wrapper .playpause {
  width: 100px;
  height: 100px;
  background-image: url(https://www.c-mind.com/img/play.png);
  background-size: cover;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: all linear 300ms;
  border-radius: 50%;
  border: 1px solid #bebebe;
  z-index: 100;
}
.video-wrapper:hover .playpause {
  transform: translate(-50%, -50%) scale(1.15);
}

.loading {
  position: relative;
  pointer-events: none;
  cursor: default;
}
.loading:before {
  position: absolute;
  content: "";
  display: block;
  background-color: rgba(0, 0, 0, 0.25);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.loading:after {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  margin: -23px;
  border-radius: 50%;
  border: 5px solid #fff;
  border-color: #fff transparent #fff transparent;
  -webkit-animation: lds-dual-ring 1.2s linear infinite;
  animation: lds-dual-ring 1.2s linear infinite;
  z-index: 1001;
}

@-webkit-keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.message {
  margin: 1rem 0;
  padding: 1rem 1rem;
  background: #fff;
  color: #00112f;
  border-radius: 1.5rem;
  position: relative;
  z-index: 1;
}

.disabled-element {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  pointer-events: none;
  cursor: not-allowed;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.images-with-svg-text-container {
  pointer-events: none !important;
}
.images-with-svg-text-container .desktop {
  display: none;
}
@media (min-width: 767.9px) {
  .images-with-svg-text-container .desktop {
    display: block;
  }
  .images-with-svg-text-container .mobile {
    display: none;
  }
}

.image-with-svg-text-container {
  position: relative;
  pointer-events: none !important;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.image-with-svg-text-container .text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.alert {
  padding: 15px;
  border: 1px solid transparent;
  text-align: center;
}
.alert .close {
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
.alert .close:focus, .alert .close:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.alert button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

.alert h4 {
  margin-top: 0;
  color: inherit;
}

.alert .alert-link {
  font-weight: 700;
}

.alert > p, .alert > ul {
  margin-bottom: 0;
}

.alert > p + p {
  margin-top: 5px;
}

.alert-dismissable, .alert-dismissible {
  padding-right: 35px;
}

.alert-dismissable .close, .alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

.alert-success {
  background-color: rgba(0, 254, 158, 0.5);
  border-color: #d6e9c6;
  color: #3c763d;
}

.alert-success hr {
  border-top-color: #c9e2b3;
}

.alert-success .alert-link {
  color: #2b542c;
}

.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

.alert-info hr {
  border-top-color: #a6e1ec;
}

.alert-info .alert-link {
  color: #245269;
}

.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.alert-warning hr {
  border-top-color: #f7e1b5;
}

.alert-warning .alert-link {
  color: #66512c;
}

.alert-danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

.alert-danger hr {
  border-top-color: #e4b9c0;
}

.alert-danger .alert-link {
  color: #843534;
}

.form-auth {
  max-width: 560px;
  margin: auto;
}
.form-auth .form-group {
  margin-bottom: 2rem;
}
.form-auth label {
  display: block;
  color: #878787;
  margin-bottom: 0.5rem;
}
.form-auth textarea,
.form-auth input:not([type=checkbox]) {
  width: 100%;
  font-size: 21px;
  line-height: 1;
  font-weight: bold;
  padding: 15px 1rem;
  color: #878787;
  border: 2px solid #dadada;
  border-radius: 1.5rem;
}
.form-auth textarea::-moz-placeholder, .form-auth input:not([type=checkbox])::-moz-placeholder {
  color: #878787;
}
.form-auth textarea:-ms-input-placeholder, .form-auth input:not([type=checkbox]):-ms-input-placeholder {
  color: #878787;
}
.form-auth textarea::-ms-input-placeholder, .form-auth input:not([type=checkbox])::-ms-input-placeholder {
  color: #878787;
}
.form-auth textarea::placeholder,
.form-auth input:not([type=checkbox])::placeholder {
  color: #878787;
}
.form-auth textarea:-moz-read-only, .form-auth input:-moz-read-only {
  border-color: #878787;
  cursor: not-allowed;
}
.form-auth textarea:read-only,
.form-auth input:read-only {
  border-color: #878787;
  cursor: not-allowed;
}
.form-auth a {
  color: #0f1f3b;
  font-style: italic;
  text-decoration: underline;
  font-weight: inherit;
}
.form .radio-label {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  font-weight: bold;
  text-align: center;
  padding: 15px 2rem;
  color: #878787;
  border: 2px solid #dadada;
  background: #fff;
  border-radius: 1.5rem;
  margin-bottom: 0;
}
.form .radio-label.small {
  padding: 0.5rem;
  font-size: 1rem;
  margin: 0.25rem;
}
.form .radio-label:hover,
.form input:checked + .radio-label {
  border-color: #352b6d;
  background-color: #352b6d;
  color: #fff;
}
.form .is-invalid {
  border-color: #e30613 !important;
}
.form .invalid-feedback {
  display: block;
  margin-top: 0.3333333333rem;
  color: #e30613 !important;
  font-style: italic;
  font-size: 80%;
}
.form .errors {
  padding: 10px;
  background-color: #e30613;
  color: #fff;
}
.form .success {
  padding: 10px;
  background-color: #00fe9e;
  color: #fff;
}

.subscribe-form {
  text-align: center;
}
.subscribe-form img {
  min-width: 200px;
  width: 200px;
  height: 300px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
}
@media (max-width: 992.1px) {
  .subscribe-form img {
    display: none;
  }
}
.subscribe-form input {
  padding: 0.5rem 3rem;
  border: 2px solid #dadada;
  border-radius: 1.5rem;
  text-align: center;
  font-weight: 600;
  -webkit-user-select: all;
     -moz-user-select: all;
      -ms-user-select: all;
          user-select: all;
  pointer-events: all;
  color: #000;
}
.subscribe-form input:focus {
  border-color: #b2b2b2;
}
.subscribe-form button {
  border-width: 0;
  border-radius: 1.5rem;
  font-weight: 600;
  display: inline-block;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  padding: 10px;
}

/** Arrows **/
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 60px;
  width: 30px;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  border: none;
  outline: none;
  z-index: 100;
  opacity: 0.75;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  opacity: 1;
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: 0;
  pointer-events: none;
}

.slick-prev {
  left: 0;
  background-image: url("/img/icons/slick-arrow-left.png");
}

.slick-next {
  right: 0;
  background-image: url("/img/icons/slick-arrow-right.png");
}

/** Dots **/
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 10px;
  width: 10px;
  outline: none;
  line-height: 0;
  font-size: 0;
  color: transparent;
  padding: 5px;
  cursor: pointer;
  background: #222221;
  border-radius: 50%;
  transition: all linear 200ms;
}
.slick-dots li button:hover {
  background: #222221;
}
.slick-dots li.slick-active button {
  background: #222221;
}

.btn {
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-size: 20px;
  padding: 0.5rem 1rem;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 1.5rem;
  font-weight: bold;
  line-height: 1;
  transition: all linear 200ms;
}
.btn-style1 {
  color: #222221;
  background-color: transparent;
  border-color: #222221;
}
.btn-style1.active, .btn-style1:hover {
  background-color: #222221;
  color: #fff;
}
.btn-style2 {
  background-color: #222221;
  border-color: #222221;
  color: #fff;
}
.btn-style2.active, .btn-style2:hover {
  background-color: #fff;
  color: #222221;
}
.btn-style3, .quize__nav--item {
  color: #fff;
  background: #912e82;
  background: linear-gradient(95deg, #e55993 0%, #912e82 100%);
  border-width: 0;
  text-transform: uppercase;
  padding: 1rem 2rem;
}
.btn-style3.active, .active.quize__nav--item, .btn-style3:hover, .quize__nav--item:hover {
  background: linear-gradient(275deg, #e55993 0%, #912e82 100%);
}
.btn-style4 {
  color: #222221;
  background: #00fe9e;
  border-width: 0;
  text-transform: uppercase;
  padding: 1rem 2rem;
}
.btn-style4.active, .btn-style4:hover {
  background: #00cb7e;
}

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1000;
  cursor: pointer;
}
.popup > .close {
  cursor: pointer;
  position: fixed;
  top: 1vh;
  right: 1vw;
  color: #fff;
  z-index: 1001;
  opacity: 1;
}
.popup > .close:before {
  content: "";
  width: 32px;
  height: 32px;
  display: block;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTEuOTY4IDUxMS45NjgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMS45NjggNTExLjk2ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxnPgoJCTxwb2x5Z29uIHBvaW50cz0iNTExLjk2OCwyNC4wNzIgNTAwLjk3NiwxMi40ODggMjU1Ljk4NCwyNDQuOTY4IDEwLjk5MiwxMi40ODggMCwyNC4wNzIgMjQ0LjM2OCwyNTUuOTc2IDAsNDg3Ljg4IDEwLjk5Miw0OTkuNDggICAgIDI1NS45ODQsMjY3IDUwMC45NzYsNDk5LjQ4IDUxMS45NjgsNDg3Ljg4IDI2Ny42LDI1NS45NzYgICAiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}
.popup .popup-content {
  position: fixed;
  top: 100%;
  left: 50%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 420px;
  max-height: 90vh;
  max-width: 1000px;
  transform: translate(-50%, -50%);
  transition: all 300ms linear;
  padding: 2vh 2vw;
  overflow: auto;
  color: #000;
  cursor: default;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.popup .popup-content.active {
  top: 50%;
}
.popup .popup-content > .title {
  font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: #20242E;
  color: #fff;
  margin: -2vh -2vw 2vh;
  padding: 2vh 2vw;
}

[data-role=inline-popup],
[data-role=youtube-popup],
[data-role=popup] {
  cursor: pointer;
  outline: none !important;
}

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */
@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}
.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from, 11.1%, to {
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}
.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    transform: perspective(400px);
  }
  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(-5deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    transform: skewX(-5deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    transform-origin: left bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    transform-origin: right bottom;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    transform-origin: center;
    opacity: 1;
  }
  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    transform-origin: center;
    opacity: 1;
  }
  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes float {
  0% {
    transform: translatey(10px);
  }
  50% {
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(10px);
  }
}

@keyframes float {
  0% {
    transform: translatey(10px);
  }
  50% {
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(10px);
  }
}
.float {
  -webkit-animation-name: float;
  animation-name: float;
  transform: translatey(10px);
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}
.text-color-black {
  color: #222221;
}

.text-color-black-light {
  color: #494947;
}

.text-color-black-dark {
  color: black;
}

.bg-color-black {
  background-color: #222221;
}

.bg-color-black-light {
  background-color: #494947;
}

.bg-color-black-dark {
  background-color: black;
}

.text-color-gray {
  color: #878787;
}

.text-color-gray-light {
  color: #adadad;
}

.text-color-gray-dark {
  color: #616161;
}

.bg-color-gray {
  background-color: #878787;
}

.bg-color-gray-light {
  background-color: #adadad;
}

.bg-color-gray-dark {
  background-color: #616161;
}

.text-color-blue {
  color: #36a9e1;
}

.text-color-blue-light {
  color: #79c5eb;
}

.text-color-blue-dark {
  color: #1a7fb0;
}

.bg-color-blue {
  background-color: #36a9e1;
}

.bg-color-blue-light {
  background-color: #79c5eb;
}

.bg-color-blue-dark {
  background-color: #1a7fb0;
}

.text-color-green {
  color: #00fe9e;
}

.text-color-green-light {
  color: #4cffbb;
}

.text-color-green-dark {
  color: #00b26e;
}

.bg-color-green {
  background-color: #00fe9e;
}

.bg-color-green-light {
  background-color: #4cffbb;
}

.bg-color-green-dark {
  background-color: #00b26e;
}

.text-color-purple {
  color: #352b6d;
}

.text-color-purple-light {
  color: #5041a4;
}

.text-color-purple-dark {
  color: #1a1536;
}

.bg-color-purple {
  background-color: #352b6d;
}

.bg-color-purple-light {
  background-color: #5041a4;
}

.bg-color-purple-dark {
  background-color: #1a1536;
}

.text-color-red {
  color: #e30613;
}

.text-color-red-light {
  color: #fa3c47;
}

.text-color-red-dark {
  color: #98040d;
}

.bg-color-red {
  background-color: #e30613;
}

.bg-color-red-light {
  background-color: #fa3c47;
}

.bg-color-red-dark {
  background-color: #98040d;
}

.text-color-orange {
  color: #fdb405 !important;
}
.text-color-white {
  color: #fff !important;
}

.bg-color-white {
  background-color: #fff;
}

.m-auto {
  margin: auto;
}

.mr-auto {
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

.mt-auto {
  margin-top: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.m-0 {
  margin: 0rem 0rem;
}

.mr-0 {
  margin-right: 0rem;
}

.ml-0 {
  margin-left: 0rem;
}

.mx-0 {
  margin-right: 0rem;
  margin-left: 0rem;
}

.mb-0 {
  margin-bottom: 0rem !important;
}

.mt-0 {
  margin-top: 0rem;
}

.my-0 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

.p-0 {
  padding: 0rem 0rem !important;
}

.pr-0 {
  padding-right: 0rem;
}

.pl-0 {
  padding-left: 0rem;
}

.px-0 {
  padding-right: 0rem;
  padding-left: 0rem;
}

.pb-0 {
  padding-bottom: 0rem;
}

.pt-0 {
  padding-top: 0rem;
}

.py-0 {
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.m-1 {
  margin: 1rem 1rem;
}

.mr-1 {
  margin-right: 1rem;
}

.ml-1 {
  margin-left: 1rem;
}

.mx-1 {
  margin-right: 1rem;
  margin-left: 1rem;
}

.mb-1 {
  margin-bottom: 1rem !important;
}

.mt-1 {
  margin-top: 1rem;
}

.my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.p-1 {
  padding: 1rem 1rem !important;
}

.pr-1 {
  padding-right: 1rem;
}

.pl-1 {
  padding-left: 1rem;
}

.px-1 {
  padding-right: 1rem;
  padding-left: 1rem;
}

.pb-1 {
  padding-bottom: 1rem;
}

.pt-1 {
  padding-top: 1rem;
}

.py-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.m-n1 {
  margin: -1rem -1rem;
}

.mr-n1 {
  margin-right: -1rem;
}

.ml-n1 {
  margin-left: -1rem;
}

.mx-n1 {
  margin-right: -1rem;
  margin-left: -1rem;
}

.mb-n1 {
  margin-bottom: -1rem;
}

.mt-n1 {
  margin-top: -1rem;
}

.my-n1 {
  margin-top: -1rem;
  margin-bottom: -1rem;
}

.p-n1 {
  padding: -1rem -1rem;
}

.pr-n1 {
  padding-right: -1rem;
}

.pl-n1 {
  padding-left: -1rem;
}

.px-n1 {
  padding-right: -1rem;
  padding-left: -1rem;
}

.pb-n1 {
  padding-bottom: -1rem;
}

.pt-n1 {
  padding-top: -1rem;
}

.py-n1 {
  padding-top: -1rem;
  padding-bottom: -1rem;
}

.m-2 {
  margin: 2rem 2rem;
}

.mr-2 {
  margin-right: 2rem;
}

.ml-2 {
  margin-left: 2rem;
}

.mx-2 {
  margin-right: 2rem;
  margin-left: 2rem;
}

.mb-2 {
  margin-bottom: 2rem !important;
}

.mt-2 {
  margin-top: 2rem;
}

.my-2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.p-2 {
  padding: 2rem 2rem !important;
}

.pr-2 {
  padding-right: 2rem;
}

.pl-2 {
  padding-left: 2rem;
}

.px-2 {
  padding-right: 2rem;
  padding-left: 2rem;
}

.pb-2 {
  padding-bottom: 2rem;
}

.pt-2 {
  padding-top: 2rem;
}

.py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.m-n2 {
  margin: -2rem -2rem;
}

.mr-n2 {
  margin-right: -2rem;
}

.ml-n2 {
  margin-left: -2rem;
}

.mx-n2 {
  margin-right: -2rem;
  margin-left: -2rem;
}

.mb-n2 {
  margin-bottom: -2rem;
}

.mt-n2 {
  margin-top: -2rem;
}

.my-n2 {
  margin-top: -2rem;
  margin-bottom: -2rem;
}

.p-n2 {
  padding: -2rem -2rem;
}

.pr-n2 {
  padding-right: -2rem;
}

.pl-n2 {
  padding-left: -2rem;
}

.px-n2 {
  padding-right: -2rem;
  padding-left: -2rem;
}

.pb-n2 {
  padding-bottom: -2rem;
}

.pt-n2 {
  padding-top: -2rem;
}

.py-n2 {
  padding-top: -2rem;
  padding-bottom: -2rem;
}

.m-3 {
  margin: 3rem 3rem;
}

.mr-3 {
  margin-right: 3rem;
}

.ml-3 {
  margin-left: 3rem;
}

.mx-3 {
  margin-right: 3rem;
  margin-left: 3rem;
}

.mb-3 {
  margin-bottom: 3rem !important;
}

.mt-3 {
  margin-top: 3rem;
}

.my-3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.p-3 {
  padding: 3rem 3rem !important;
}

.pr-3 {
  padding-right: 3rem;
}

.pl-3 {
  padding-left: 3rem;
}

.px-3 {
  padding-right: 3rem;
  padding-left: 3rem;
}

.pb-3 {
  padding-bottom: 3rem;
}

.pt-3 {
  padding-top: 3rem;
}

.py-3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.m-n3 {
  margin: -3rem -3rem;
}

.mr-n3 {
  margin-right: -3rem;
}

.ml-n3 {
  margin-left: -3rem;
}

.mx-n3 {
  margin-right: -3rem;
  margin-left: -3rem;
}

.mb-n3 {
  margin-bottom: -3rem;
}

.mt-n3 {
  margin-top: -3rem;
}

.my-n3 {
  margin-top: -3rem;
  margin-bottom: -3rem;
}

.p-n3 {
  padding: -3rem -3rem;
}

.pr-n3 {
  padding-right: -3rem;
}

.pl-n3 {
  padding-left: -3rem;
}

.px-n3 {
  padding-right: -3rem;
  padding-left: -3rem;
}

.pb-n3 {
  padding-bottom: -3rem;
}

.pt-n3 {
  padding-top: -3rem;
}

.py-n3 {
  padding-top: -3rem;
  padding-bottom: -3rem;
}

.m-4 {
  margin: 4rem 4rem;
}

.mr-4 {
  margin-right: 4rem;
}

.ml-4 {
  margin-left: 4rem;
}

.mx-4 {
  margin-right: 4rem;
  margin-left: 4rem;
}

.mb-4 {
  margin-bottom: 4rem !important;
}

.mt-4 {
  margin-top: 4rem;
}

.my-4 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.p-4 {
  padding: 4rem 4rem !important;
}

.pr-4 {
  padding-right: 4rem;
}

.pl-4 {
  padding-left: 4rem;
}

.px-4 {
  padding-right: 4rem;
  padding-left: 4rem;
}

.pb-4 {
  padding-bottom: 4rem;
}

.pt-4 {
  padding-top: 4rem;
}

.py-4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.m-n4 {
  margin: -4rem -4rem;
}

.mr-n4 {
  margin-right: -4rem;
}

.ml-n4 {
  margin-left: -4rem;
}

.mx-n4 {
  margin-right: -4rem;
  margin-left: -4rem;
}

.mb-n4 {
  margin-bottom: -4rem;
}

.mt-n4 {
  margin-top: -4rem;
}

.my-n4 {
  margin-top: -4rem;
  margin-bottom: -4rem;
}

.p-n4 {
  padding: -4rem -4rem;
}

.pr-n4 {
  padding-right: -4rem;
}

.pl-n4 {
  padding-left: -4rem;
}

.px-n4 {
  padding-right: -4rem;
  padding-left: -4rem;
}

.pb-n4 {
  padding-bottom: -4rem;
}

.pt-n4 {
  padding-top: -4rem;
}

.py-n4 {
  padding-top: -4rem;
  padding-bottom: -4rem;
}

.w-5 {
  width: 5%;
  max-width: 5%;
}

.w-10 {
  width: 10%;
  max-width: 10%;
}

.w-15 {
  width: 15%;
  max-width: 15%;
}

.w-20 {
  width: 20%;
  max-width: 20%;
}

.w-25 {
  width: 25%;
  max-width: 25%;
}

.w-30 {
  width: 30%;
  max-width: 30%;
}

.w-35 {
  width: 35%;
  max-width: 35%;
}

.w-40 {
  width: 40%;
  max-width: 40%;
}

.w-45 {
  width: 45%;
  max-width: 45%;
}

.w-50 {
  width: 50%;
  max-width: 50%;
}

.w-55 {
  width: 55%;
  max-width: 55%;
}

.w-60 {
  width: 60%;
  max-width: 60%;
}

.w-65 {
  width: 65%;
  max-width: 65%;
}

.w-70 {
  width: 70%;
  max-width: 70%;
}

.w-75 {
  width: 75%;
  max-width: 75%;
}

.w-80 {
  width: 80%;
  max-width: 80%;
}

.w-85 {
  width: 85%;
  max-width: 85%;
}

.w-90 {
  width: 90%;
  max-width: 90%;
}

.w-95 {
  width: 95%;
  max-width: 95%;
}

.w-100 {
  width: 100%;
  max-width: 100%;
}

.d-block {
  display: block;
}
.d-none {
  display: none;
}
.d-flex {
  display: flex;
}
.d-flex-inline {
  display: inline-flex;
}

.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}

.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.text-align-left {
  text-align: left;
}
.text-align-center {
  text-align: center;
}
.text-align-right {
  text-align: right;
}
.text-weight-light {
  font-weight: 300;
}
.text-weight-regular {
  font-weight: 400;
}
.text-weight-bold {
  font-weight: 600;
}
.text-transform-upper {
  text-transform: uppercase;
}
.text-transform-lower {
  text-transform: lowercase;
}
.text-transform-initial {
  text-transform: initial;
}

.clear:after {
  content: "";
  display: table;
  clear: both;
}

.image-scale {
  position: relative;
  overflow: hidden;
}
.image-scale > img {
  transition: all ease-in-out 300ms;
}
.image-scale:hover > img {
  transform: scale(1.05);
}

.disabled-block {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  opacity: 0.75;
  cursor: not-allowed;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.no-selection,
.no-selection * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.share-block {
  display: flex;
  justify-content: center;
}

.share-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
}
.share-badge:last-child {
  margin-right: 0;
}

.share-icon {
  width: 40px;
  height: 40px;
}

.badge-email {
  background-color: #000;
}

.icon-email {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cpolygon style='fill:%23ffffff;' points='88.217,156.484 88.217,355.306 185.175,255.493'/%3E%3Cpolygon style='fill:%23ffffff;' points='423.783,156.484 423.783,355.306 327.307,255.895'/%3E%3Cpath style='fill:%23ffffff;' d='M95.558,147.466h320.255L289.948,278.524c-8.958,9.327-21.331,14.599-34.262,14.599 s-25.304-5.272-34.262-14.599L95.558,147.466z'/%3E%3Cpath style='fill:%23ffffff;' d='M297.209,285.496c-10.799,11.244-25.933,17.694-41.523,17.694c-15.589,0-30.724-6.448-41.522-17.693 l-21.349-22.23L95.558,364.534h320.255l-97.256-101.267L297.209,285.496z'/%3E%3C/g%3E%3C/svg%3E");
}

.badge-vkontakte {
  background-color: #4680c2;
}

.icon-vkontakte {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.623 7.66c.12-.372 0-.643-.525-.643h-1.745c-.44 0-.644.237-.763.491 0 0-.898 2.17-2.152 3.576-.406.406-.593.542-.813.542-.119 0-.271-.136-.271-.508V7.644c0-.44-.136-.644-.509-.644H10.1c-.27 0-.44.203-.44.407 0 .423.627.525.694 1.711v2.576c0 .559-.101.66-.322.66-.593 0-2.033-2.185-2.897-4.676-.17-.492-.339-.678-.78-.678H4.593C4.085 7 4 7.237 4 7.491c0 .458.593 2.762 2.762 5.813 1.44 2.084 3.49 3.202 5.338 3.202 1.118 0 1.254-.254 1.254-.678v-1.575c0-.509.101-.594.457-.594.254 0 .712.136 1.746 1.136 1.186 1.186 1.39 1.728 2.05 1.728h1.745c.509 0 .746-.254.61-.745-.152-.492-.728-1.203-1.474-2.05-.407-.475-1.017-1-1.203-1.255-.254-.339-.186-.474 0-.78-.017 0 2.118-3.015 2.338-4.032' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.badge-facebook {
  background-color: #3b5998;
}

.icon-facebook {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.423 20v-7.298h2.464l.369-2.845h-2.832V8.042c0-.824.23-1.385 1.417-1.385h1.515V4.111A20.255 20.255 0 0014.148 4c-2.183 0-3.678 1.326-3.678 3.76v2.097H8v2.845h2.47V20h2.953z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.badge-odnoklassniki {
  background-color: #eb722e;
}

.icon-odnoklassniki {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.674 6.536a1.69 1.69 0 00-1.688 1.688c0 .93.757 1.687 1.688 1.687a1.69 1.69 0 001.688-1.687 1.69 1.69 0 00-1.688-1.688zm0 5.763a4.08 4.08 0 01-4.076-4.075 4.08 4.08 0 014.076-4.077 4.08 4.08 0 014.077 4.077 4.08 4.08 0 01-4.077 4.075zm-1.649 3.325a7.633 7.633 0 01-2.367-.98 1.194 1.194 0 011.272-2.022 5.175 5.175 0 005.489 0 1.194 1.194 0 111.272 2.022 7.647 7.647 0 01-2.367.98l2.279 2.28a1.194 1.194 0 01-1.69 1.688l-2.238-2.24-2.24 2.24a1.193 1.193 0 11-1.689-1.689l2.279-2.279' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.badge-messenger {
  background-color: #03CECE;
}

.icon-messenger {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.643 11.415L7.723 4.636a.703.703 0 00-1.048.62v1.826s3.961 1.542 4.284 1.662a.457.457 0 01.343.54c-.058.144-.18.128-.533.042-.352-.085-5.505-1.368-5.505-1.368a.62.62 0 00-.715.847l1.077 2.563s6.949.29 7.199.305c.247.015.393.134.397.327-.004.194-.15.312-.397.327-.25.014-7.199.305-7.199.305L4.55 15.196a.62.62 0 00.715.846s5.153-1.283 5.505-1.368c.353-.086.475-.102.533.042a.457.457 0 01-.343.54c-.323.12-4.284 1.663-4.284 1.663v1.825a.703.703 0 001.048.62l11.92-6.78a.658.658 0 000-1.169z' fill='%23FFF'/%3E%3C/svg%3E");
}

.badge-telegram {
  background-color: #64a9dc;
}

.icon-telegram {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.92 6.089L4.747 11.555c-.967.388-.962.928-.176 1.168l3.534 1.104 1.353 4.146c.164.454.083.634.56.634.368 0 .53-.168.736-.368.13-.127.903-.88 1.767-1.719l3.677 2.717c.676.373 1.165.18 1.333-.628l2.414-11.374c.247-.99-.378-1.44-1.025-1.146zM8.66 13.573l7.967-5.026c.398-.242.763-.112.463.154l-6.822 6.155-.265 2.833-1.343-4.116z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.badge-twitter {
  background-color: #00aced;
}

.icon-twitter {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 7.539a6.56 6.56 0 01-1.885.517 3.294 3.294 0 001.443-1.816 6.575 6.575 0 01-2.085.796 3.283 3.283 0 00-5.593 2.994A9.32 9.32 0 015.114 6.6a3.28 3.28 0 001.016 4.382 3.274 3.274 0 01-1.487-.41v.041a3.285 3.285 0 002.633 3.218 3.305 3.305 0 01-1.482.056 3.286 3.286 0 003.066 2.28A6.585 6.585 0 014 17.524 9.291 9.291 0 009.032 19c6.038 0 9.34-5 9.34-9.337 0-.143-.004-.285-.01-.425A6.672 6.672 0 0020 7.538z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.badge-viber {
  background-color: #7b519d;
}

.icon-viber {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23FFF' fill-rule='evenodd'%3E%3Cpath d='M18.434 15.574c-.484-.391-1.002-.743-1.511-1.102-1.016-.718-1.945-.773-2.703.38-.426.648-1.021.677-1.644.392-1.718-.782-3.044-1.989-3.821-3.743-.344-.777-.34-1.473.465-2.022.425-.29.854-.634.82-1.268-.045-.828-2.043-3.593-2.832-3.885a1.429 1.429 0 00-.984 0C4.373 4.95 3.606 6.48 4.34 8.292c2.19 5.405 6.043 9.167 11.349 11.463.302.13.638.183.808.23 1.208.012 2.623-1.158 3.032-2.318.393-1.117-.438-1.56-1.096-2.093zM12.485 4.88c3.879.6 5.668 2.454 6.162 6.38.045.363-.09.909.426.919.538.01.408-.528.413-.89.045-3.699-3.163-7.127-6.888-7.253-.281.04-.863-.195-.9.438-.024.427.466.357.787.406z'/%3E%3Cpath d='M13.244 5.957c-.373-.045-.865-.222-.953.299-.09.546.458.49.811.57 2.395.538 3.23 1.414 3.624 3.802.057.349-.057.89.532.8.436-.066.278-.53.315-.802.02-2.293-1.936-4.38-4.329-4.669z'/%3E%3Cpath d='M13.464 7.832c-.249.006-.493.033-.585.3-.137.4.152.496.446.544.983.158 1.5.74 1.598 1.725.027.268.195.484.452.454.356-.043.389-.361.378-.664.017-1.106-1.227-2.385-2.289-2.359z'/%3E%3C/g%3E%3C/svg%3E");
}

.badge-whatsapp {
  background-color: #65bc54;
}

.icon-whatsapp {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 11.794c0 4.304-3.517 7.794-7.855 7.794a7.87 7.87 0 01-3.796-.97L4 20l1.418-4.182a7.714 7.714 0 01-1.127-4.024C4.29 7.489 7.807 4 12.145 4S20 7.49 20 11.794zm-7.855-6.553c-3.641 0-6.603 2.94-6.603 6.553A6.48 6.48 0 006.8 15.636l-.825 2.433 2.537-.806a6.6 6.6 0 003.633 1.084c3.642 0 6.604-2.94 6.604-6.553s-2.962-6.553-6.604-6.553zm3.967 8.348c-.049-.08-.177-.128-.37-.223-.192-.095-1.139-.558-1.315-.621-.177-.064-.305-.096-.434.095a10.92 10.92 0 01-.61.749c-.112.128-.224.143-.416.048-.193-.096-.813-.297-1.549-.948a5.76 5.76 0 01-1.07-1.323c-.113-.191-.013-.295.084-.39.086-.086.192-.223.289-.334.096-.112.128-.191.192-.319s.032-.239-.016-.335c-.048-.095-.433-1.035-.594-1.418-.16-.382-.32-.318-.433-.318-.112 0-.24-.016-.369-.016a.71.71 0 00-.513.239c-.177.19-.674.653-.674 1.593s.69 1.848.786 1.976c.096.127 1.332 2.119 3.289 2.884 1.958.764 1.958.51 2.31.477.353-.031 1.14-.461 1.3-.908.16-.446.16-.829.113-.908z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E");
}