html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
}

ol, ul {
  list-style: none;
}

p {
  font-size: 2rem;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

img, svg {
  max-width: 100%;
  margin: 0;
}

html {
  font: 62.5%/1.6 "Inter Var", sans-serif;
  overflow-x: hidden;
  color: var(--fibery-text-default-color);
}

video {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.section-wrapper {
  padding-right: calc(50% - 660px);
  padding-left: calc(50% - 660px);
}

/* CONTENT  -------------------------------------
------------------------------------------------------------------------*/

.sign-up-wrap .sign-up-btn {
  padding: 0 5rem;
}

.header .mob-btns .login-link {
  font-size: 2rem;
  line-height: 4.8rem;
  text-decoration: none;
  color: var(--fibery-text-default-color);
}

.header .sandwich-btn {
  display: none;
  pointer-events: all;
}


.header .main-menu .menu-item.expand {
  position: relative;
}

.header .main-menu .menu-item.expand .expand-menu {
  position: absolute;
  min-width: calc(100% + 3.5rem);
  z-index: 1;
  background: #fff;
  padding: 5rem 2rem 1.5rem 1.5rem;
  left: -1.5rem;
  top: -1.2rem;
  border-radius: 0.5rem;
  visibility: hidden;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1);
}

.header .main-menu .menu-item.expand > span.menu-link {
  display: inline-block;
  position: relative;
  padding-right: 2rem;
}

.header .main-menu .menu-item.expand:hover > span.menu-link {
  z-index: 2;
}

.header .main-menu .menu-item.expand > span.menu-link:hover {
  color: rgba(36, 41, 56, 0.7);
  border-bottom: none;
}

.header .main-menu .menu-item.expand > span.menu-link::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  right: 0;
  top: 1.2rem;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
}

.header .main-menu .menu-item.expand:hover {
}

.header .main-menu .menu-item.expand:hover .expand-menu {
  visibility: visible;
}

.header .main-menu .menu-item.expand .expand-menu li {
  font-size: 1.6rem;
  white-space: nowrap;
  padding-top: 1rem;
}

/*content */

.main-promo {
  position: relative;
  height: 100vh;
  min-height: 900px;
  max-height: 1080px;
  padding-top: 17rem;
}

.main-remote {
  padding-top: 14.6rem;
}

.refresh-btn {
  position: fixed;
  right: 2.5rem;
  bottom: 11.5rem;
  font-size: 1.3rem;
  max-width: 14.5rem;
  color: var(--fibery-text-default-color);
  cursor: pointer;
  z-index: 3000;
  text-align: right;
  padding-top: 6rem;
}

.refresh-btn a:link {
  text-decoration: inherit;
  color: inherit;
}

.refresh-btn a:visited {
  text-decoration: inherit;
  color: inherit;
}

.refresh-btn span {
  content: '';
  display: block;
  height: 6rem;
  width: 6rem;
  right: -5px;
  top: -5px;
  position: absolute;
  background: white;
  padding: 1rem;
  border-radius: 3rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 3rem;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 4C11.1634 4 4 11.1634 4 20C4 28.8366 11.1634 36 20 36C22.5354 36 24.9304 35.411 27.0582 34.3633L27.9418 36.1575C25.5452 37.3376 22.8485 38 20 38C10.0589 38 2 29.9411 2 20C2 10.0589 10.0589 2 20 2C29.9411 2 38 10.0589 38 20C38 22.3106 37.5642 24.5213 36.7697 26.5529L39.2097 25.8149L39.7887 27.7293L34.0457 29.4663L33.4849 27.6121L32.2109 23.7422L34.1107 23.1168L34.9583 25.6918C35.6312 23.9243 36 22.0061 36 20C36 11.1634 28.8366 4 20 4Z' fill='%23242938'/%3E%3C/svg%3E%0A");
}

.yellow .main-promo,
.yellow-bg {
  background-color: #FFDC4E;
}

.mint .main-promo,
.mint-bg {
  background-color: #A7FEE9;
}

.violet .main-promo,
.blue .main-promo {
  background-color: #BBCAFD;
}

.yellow.canvas-bg .main-promo,
.mint.canvas-bg .main-promo,
.violet.canvas-bg .main-promo,
.blue.canvas-bg .main-promo {
  background-color: transparent;
}

.landing-page .p5Canvas,
.main-promo .my-canvas {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
}

.landing-page .p5Canvas,
.p5Canvas {
  max-height: 1080px;
}

.main-content {
  width: 86.36%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.main-content .main-headline {
  font-size: 8rem;
  line-height: 1.3;
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.main-content .main-headline.sm {
  font-size: 6rem;
}

.main-content .sub-head {
  font-size: 2rem;
  margin-bottom: 2.5rem;
  line-height: 1.4;
}

.landing .main-content .sub-head {
  font-size: 2rem;
  margin-bottom: 3.5rem;
  line-height: 1.4;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.main-content .sign-up-wrap {
  text-align: center;
  margin: 0 auto;
  padding-bottom: 3.6rem;
}

.main-content .promo-video-wrap {
  position: relative;
  margin-bottom: -22rem;
  line-height: 0;
  border: 0.8rem solid #132330;
  background: #132330;
  border-radius: 2rem;
  pointer-events: all;
  cursor: pointer;
  box-shadow: 0 20px 18px 11px rgba(0, 0, 0, 0.1);
}

.main-content .promo-video-wrap.white {
  border: 0.8rem solid #fff;
  background: #ffffff;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.08);
}

.main-content .promo-video-wrap video {
  max-width: 100%;
  border-radius: 1.6rem;
}

.main-content .promo-video-wrap.product video {
  max-width: 100%;
  border-radius: 2.2rem;
}

.main-content .promo-video-wrap .playpause {
  position: absolute;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: #24293859;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  opacity: 1;
}

.main-content .promo-video-wrap .playpause.pause {
  opacity: 0;
}

.main-content .promo-video-wrap .playpause:before {
  content: '';
  display: block;
  position: absolute;
  left: 55%;
  top: 50%;
  width: 0;
  height: 0;
  border: 1rem solid transparent;
  border-right: none;
  border-left: 1.5rem solid #ffffff;
  transform: translate(-50%, -50%);
}

.main-content .promo-video-wrap .playpause.pause:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 2rem;
  border: none;
  border-right: 4px solid #fff;
  border-left: 4px solid #fff;
  transform: translate(-50%, -50%);
}

.main-content .promo-video-wrap:hover .playpause.pause {
  opacity: 1;
}


.main-content .promo-image-wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: -22rem;
  line-height: 0;
  border-radius: 2rem;
  pointer-events: all;
  cursor: pointer;
  box-shadow: 0 20px 18px 11px rgba(0, 0, 0, 0.1);
  border: 0.8rem solid #fff;
  background: #fff;
}

.main-content .promo-image-wrap img {
  max-width: 100%;
}

.inline-btn {
  font-weight: 600;
  text-decoration: none;
  outline: none;
  display: inline-block;
  padding: 10px 2.4rem;
  color: #FAFAFA;
  background: #242938;
  border-radius: 3px;
  border: none;
  font-size: 2rem;
  pointer-events: all;
  cursor: pointer;
  transition: all 0.3s;
}

.inline-btn.transparent {
  display: inline-block;
  padding: 8px 2rem;
  font-size: 2rem;
  border: 2px solid #242938;
  color: var(--fibery-text-default-color);
  line-height: inherit;
  background: transparent;
  transition: all 0.3s;
}

.sign-up-wrap .sign-up-btn:hover,
.inline-btn:hover,
.inline-btn.transparent:hover {
  box-shadow: 0 0 0 2px #242938;
}

.inline-btn.wide {
  display: inline-block;
  padding: 1rem 3.5rem;
  font-size: 2rem;
}

.inline-btn.transparent._red {
  border-color: transparent;
  color: var(--fibery-text-default-color);
}

._white .inline-btn.transparent._red {
  color: #fff;
}

.inline-btn.transparent._no-border {
  border-color: transparent;
}

.buttons-wrap._left-align .inline-btn.transparent._no-border,
.buttons-wrap .inline-btn.transparent._no-border:first-child {
  padding-left: 0;
}

.inline-btn.transparent._no-border:hover {
  box-shadow: none;
}

.inline-btn.with-ico {
  padding: 0.9rem 3.5rem 0.9rem 2.5rem;
}

.inline-btn.with-ico img,
.inline-btn.with-ico.transparent img {
  position: relative;
  top: -2px;
  margin-right: 1rem;
  vertical-align: middle;
  width: 24px;
}

.about-product {
  background: #fff;
  padding-top: 40rem;
  padding-bottom: 8.7rem;
  text-align: center;
}

.about-product .about-product-content {
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  font-size: 2rem;
  max-width: 72rem;
  line-height: 1.6;
  margin: 0 auto 2rem;
}

b {
  font-weight: 600;
}

.about-product .about-product-head {
  font-size: 6rem;
  line-height: 1.2;
  font-family: "Inter Var", sans-serif;
  font-weight: 400;
  max-width: 90rem;
  margin: 0 auto 2rem;
}

.about-animation {
  margin-bottom: 2.8rem;
}

.about-animation video {
  margin: 0 auto;
  outline: none;
  max-width: 100%;
}

.about-feature {
  padding-top: 20rem !important;
  padding-bottom: 10rem;
}

.about-feature .section-name {
  max-width: 110rem;
  margin: 0 auto 8rem;
  font-size: 4rem;
  font-weight: 400;
}

.about-feature .about-feature-content,
.about-feature-content {
  max-width: 110rem;
  margin: 0 auto;
}

.about-feature-columns,
.about-feature .about-feature-columns {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  /*margin-bottom: 4.5rem;*/
}

.about-feature .about-feature-columns .column.text {
  width: 48%;
  margin-bottom: 8rem;
}

.about-feature .about-feature-columns .column:last-child {
  margin-top: -18rem;
  width: 48%;
}

.about-feature .grow-animation {
  position: relative;
}

.about-feature .upper-head,
.about-feature .sub-head {
  display: block;
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.about-feature .upper-head b,
.about-feature .sub-head b {
  font-weight: 600;
}

.about-feature .headline {
  font-size: 6rem;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  min-width: 60rem;
}

.about-feature .highlight {
  white-space: nowrap;
}

.highlight-white {
  box-shadow: inset 0 -40px 0 -12px #FFFFFF;

}

.yellow .about-feature .headline .highlight,
.remote .about-feature .highlight {
  box-shadow: inset 0 -40px 0 -12px #FFDC4E;
}

.mint .about-feature .headline .highlight,
.highlight-mint {
  box-shadow: inset 0 -40px 0 -12px #A7FEE9;
}

.blue .about-feature .headline .highlight {
  box-shadow: inset 0 -40px 0 -12px #BBCAFD;
}

.dnd-case .link-show-hidden,
.santa-case .link-show-hidden {
  box-shadow: inset 0 -30px 0 -12px #A6D8B9;
  cursor: pointer;
  position: relative;
  display: inline-block;
}

.dnd-case .link-show-hidden.more-hidden {
  box-shadow: none;
}

.dnd-case .link-show-hidden {
  box-shadow: inset 0 -17px 0 -12px #A6D8B9;
}

.dnd-case .link-show-hidden .img-hidden,
.santa-case .link-show-hidden .img-hidden {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-30%);
  display: none;
  width: auto;
  max-width: 40rem;
  z-index: 2;
  box-shadow: 10px 10px 39px -17px rgb(0 0 0 / 27%);
}

.dnd-case .link-show-hidden:hover .img-hidden,
.santa-case .link-show-hidden:hover .img-hidden {
  display: block;
  border: 2px solid #A6D8B9;
}

.dnd-case .link-show-hidden.animated,
.santa-case .link-show-hidden.animated {
  animation-name: shakeY;
  animation-duration: 4s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

@keyframes shakeY {
  from,
  to {
    box-shadow: inset 0 -20px 0 -12px #A6D8B9;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    box-shadow: inset 0 -30px 0 -12px #A6D8B9;
  }

  20%,
  40%,
  60%,
  80% {
    box-shadow: inset 0 -20px 0 -12px #A6D8B9;
  }
}
.dnd {
  background: url("https://fibery-public-assets.s3.amazonaws.com/website-static/case-studies/dnd/bg-dnd.png") repeat;
}
.santa {
  background: url("https://fibery-public-assets.s3.amazonaws.com/website-static/case-studies/santa/bg-santa.png") repeat;
}

.dnd-case .link-show-hidden.animated:hover,
.santa-case .link-show-hidden.animated:hover {
  animation-play-state: paused;
}

.dnd-case .hidden-aligato {
  position: fixed;
  right: -253px;
  top: 50%;
  z-index: 10;
  width: 252px;
  height: 252px;
  transition: all 0.3s ease-in-out;
}

.dnd-case .hidden-aligato.show {
  right: 0;
}


.timer-slider-wrap {
}

.timer-slider-wrap .slider-tabs-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4rem;
}

.timer-slider-wrap .slider-tabs-head._left-align {
  justify-content: flex-start;
}

.timer-slider-wrap .item-head-group-tab,
.timer-slider-wrap .slider-head-item {
  width: 30%;
  cursor: pointer;
  padding-right: 2.5rem;
}

.timer-slider-wrap .slider-tabs-head._left-align .item-head-group-tab,
.timer-slider-wrap .slider-tabs-head._left-align .slider-head-item {
  width: 33%;
  padding-right: 4.5rem;
}

.timer-slider-wrap .slider-head-item:last-child {
  padding-right: 0;
}

.timer-slider-wrap .item-head-group-tab .tab-head-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.item-headline {
  font-size: 2.8rem;
  margin-bottom: 0.7rem;
  line-height: 1.2;
  font-weight: 600;
}

.item-headline + .item-timeline {
  margin-top: 1.5rem;
}

.item-headline-emphasize {
  font-weight: 600;
}

.timer-slider-wrap .item-content {
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 2.3rem;
  color: #000;
}

.timer-slider-wrap .item-timeline {
  width: 80%;
  max-width: 240px;
  height: 2px;
  background: transparent;
}

.timer-slider-wrap .item-head-group-tab {
  position: relative;
}

.timer-slider-wrap .item-head-group-tab .slider-head-item {
  padding-right: 0.5rem;
  width: 100%;
}

.timer-slider-wrap .item-head-group-tab .slider-head-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
}

.timer-slider-wrap .item-head-group-tab .slider-head-item:first-child::before {
  width: 100%;
  height: 100%;
}

.timer-slider-wrap .item-head-group-tab .slider-head-item.current + .slider-head-item::before {
  width: 100%;
  height: 100%;
}

.timer-slider-wrap .item-head-group-tab .item-timeline {
  width: 100%;
}

.timer-slider-wrap._no-text-slider .item-timeline,
.timer-slider-wrap .item-head-group-tab.active .item-timeline,
.timer-slider-wrap .slider-head-item.current .item-timeline {
  background: #E9EDF4;
}

.item-timeline-progress {
  width: 0;
  height: 100%;
  background: #242938;
}

.timer-slider-wrap._no-text-slider .slider-tabs-head {
  align-items: center;
  justify-content: center;
}

.timer-slider-wrap._no-text-slider .slider-head-item {
  width: 7%;
  padding: 0;
  margin: 0 0.3rem;
}


.timer-slider-wrap .item-content-pic.hidden,
.hidden {
  display: none;
}

.slider-body .body-content {
  display: none;
  overflow: hidden;
  line-height: 0;
}

.slider-body .body-content.current {
  display: block;
}

.slider-body .body-content img {
  max-width: 100%;
}

.item-content-pic .promo-video-wrap, .body-content .promo-video-wrap {
  max-width: 100%;
}

.slider-body .body-content._hand-styled {
  background: #F8F9FA;
  padding: 5rem;
}

.slider-body .body-content._hand-styled img,
.slider-body .body-content._hand-styled video {
  border-radius: 1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
  border: 1px solid #E8E8E8;
}

.try-product {
  padding-top: 5rem;
}

.try-product .try-wrap {
  max-width: 110rem;
  margin: 0 auto;
}

.try-product .try-headline {
  font-size: 6rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 3.5rem;
}

.try-product .sign-up-wrap {
  max-width: 440px;
  margin-bottom: 14rem;
  text-align: left;
}


.page-wrap > .photos-line {
  padding: 0;
}

.photos-line .head-wrap {
  padding-right: calc(50% - 660px);
  padding-left: calc(50% - 660px);
}

.photos-line .photos-head {
  max-width: 110rem;
  font-size: 2rem;
  line-height: 1.6;
  margin: 0 auto 3rem;
}

.photos-line .photos {
  position: relative;
  height: 23.5rem;
  padding-bottom: 3rem;
  display: flex;
  justify-content: center;
  line-height: 0;
  white-space: nowrap;
  overflow: hidden;
}

.photos-line .photos::-webkit-scrollbar {
  height: 0 !important;
  display: none;
}

.photos-line .photos {
  overflow: -moz-scrollbars-none;
}

.photos-line .photos {
  -ms-overflow-style: none;
}


.photos-line .photos-wrap {
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;

  transition: all 0.3s;
}

.photos-line .photos-wrap .photo-item {
  display: inline-block;
  position: relative;
  padding: 0.5rem 0;
}

.photos-line .photos img {
  height: 15.5rem;
  display: block;
  transition: all 0.3s;
}

.photos-line .photos img[data-name="hidden"] {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: all 0.3s, opacity 0.3s;

}

.photos-line .photos-wrap .photo-item span {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 3rem);
  font-size: 1.4rem;
  line-height: 1.3;
  color: #AEB8C1;
  letter-spacing: normal;
  opacity: 0;
  transition: all 0.3s;
}

.photos-line .photos-wrap .photo-item:first-child span {
  left: 0.5rem;
  transform: translate(0, 3rem);
}

.photos-line .photos-wrap .photo-item:last-child span {
  left: auto;
  right: 0.5rem;
  transform: translate(0, 3rem);
}


.photos-line .photos-wrap .photo-item:hover img[data-name="hidden"] {
  opacity: 1;
  width: auto;
  z-index: 2;
  transform: translate(-50%, -50%) scale(1.1);
  transition: all 0.3s, opacity 0.1s;
}

.photos-line .photos-wrap .photo-item:hover span {
  opacity: 1;
  transition: all 0.3s;
}


.photos-line .photos .r-arrow,
.photos-line .photos .l-arrow {
  position: absolute;
  width: 7.6rem;
  height: 7.6rem;
  background-color: #fff;
  border-radius: 50%;
  top: 4rem;
  z-index: 3;
  cursor: pointer;
}

.photos-line .photos .r-arrow {
  right: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='22' viewBox='0 0 24 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.7072 0.99585L14.4143 1.70296L23.0001 10.2887L23.7072 10.9958L23.7031 10.9999L23.7072 11.004L23.0001 11.7111L14.4143 20.2969L13.7072 21.004L12.293 19.5898L13.0001 18.8826L19.8789 12.0038L1.29297 12.0038H0.292969V10.0038H1.29297L19.8867 10.0038L13.0001 3.11717L12.293 2.41006L13.7072 0.99585Z' fill='%23242938'/%3E%3C/svg%3E%0A");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 1;
}

.photos-line .photos .l-arrow {
  left: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='22' viewBox='0 0 24 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2931 21.0039L9.58595 20.2968L1.00017 11.711L0.293062 11.0039L0.297119 10.9998L0.293062 10.9958L1.00017 10.2887L9.58595 1.7029L10.2931 0.995792L11.7073 2.41001L11.0002 3.11711L4.12134 9.99594L22.7073 9.99594H23.7073V11.9959H22.7073L4.11353 11.9959L11.0002 18.8826L11.7073 19.5897L10.2931 21.0039Z' fill='%23242938'/%3E%3C/svg%3E%0A");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 1;
}

.photos-line .photos.scroll-right-edge .r-arrow {
  opacity: 0;
}

.photos-line .photos.scroll-right-edge .l-arrow {
  opacity: 1;
}

.photos-line .photos.scroll-left-edge .r-arrow {
  opacity: 1;
}

.photos-line .photos.scroll-left-edge .l-arrow {
  opacity: 0;
}

/*links and footer*/
.link {
  display: inline-block;
  color: var(--fibery-text-default-color);
}

.link:hover {
  text-decoration: none;
  color: #AEB8C1;
}


/*cookie banner*/
.page-wrap .cookie-banner {
  font-size: 12px;
  line-height: 16px;
  color: #000;
  font-weight: 400;
  position: fixed;
  z-index: 1000;
  bottom: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  display: none;
}

.cookie-banner__wrap {
  background: #f9f9f9;
  padding: 10px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cookie-banner__wrap p {
  z-index: 1;
  margin: 0 12px 0 0;
  display: inline-block;
  color: #99a3ab;
  vertical-align: middle;
}

.cookie-banner__wrap a {
  color: #000;
  text-decoration: underline;
}

.cookie-banner__wrap .close {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/*keyframes*/
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50%,
  75% {
    transform: scale(2.5);
  }
  78%, 100% {
    opacity: 0;
  }
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.4);
  }
}

@keyframes shift-rightwards {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  40% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  60% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
}


.headline-pic {
  text-align: center;
  margin-bottom: 2rem;
}

.headline-pic svg {
  margin: 0 auto;
}

.def-headline {
  font-weight: 400;
  font-size: 6rem;
  line-height: 1.3;
  text-align: center;
  color: var(--fibery-text-default-color);
  margin-bottom: 2rem;
}

.def-headline-descr {
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.6;
  text-align: center;
  color: var(--fibery-text-default-color);
  max-width: 70rem;
  margin: 0 auto 10rem;
}

.landing-section {
  padding-top: 1rem;
  padding-bottom: 10rem;
}

.landing-section.sm {
  padding-bottom: 7rem;
}

.landing-section.m {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.landing-section.feedback {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.landing-section.pm {
  padding-top: 1rem;
  padding-bottom: 0;
}

.landing-section.m .def-headline-descr {
  margin-bottom: 0;
}

.landing-page .timer-slider-wrap .item-content {
  font-size: 1.6rem;
}


.wide-call-to-action {
  overflow: hidden;
  position: relative;
}

.wide-call-to-action .bg-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.wide-call-to-action > article {
  position: relative;
  z-index: 2;
}

.wide-call-to-action.black {
  background: #242938 url("../img/landing/static-bg.svg") no-repeat 50% 50% / cover;
  margin-bottom: 5rem;
}

.wide-call-to-action.yellow {
  background: #FFDC4E url("../img/landing/static-bg2.svg") no-repeat 50% 50% / cover;
}

.wide-call-to-action .promo-content {
  padding: 7.5rem 2rem;
  color: #fff;
  margin: 0 auto;
  max-width: 47rem;
  text-align: center;
}

.wide-call-to-action.black .promo-content {
  background: #242938;
}

.wide-call-to-action.yellow .promo-content {
  max-width: 100%;
}

.wide-call-to-action .promo-content > div {
  text-align: center;
  margin-bottom: 3rem;
}

.wide-call-to-action.yellow {
  overflow: visible;
}

.wide-call-to-action .yellow-promo-pic {
  margin-top: -10rem;
}

.wide-call-to-action .yellow-promo-pic img {
  max-width: 17.5rem;
}

.wide-call-to-action .promo-content h2 {
  margin-bottom: 1.5rem;
  font-weight: 400;
  font-size: 6rem;
  line-height: 1.5;
  color: #FFFFFF;
}

.wide-call-to-action .promo-content p {
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.5;
  margin-bottom: 3.4rem;
}

.wide-call-to-action .promo-content .inline-btn {
  display: inline-block;
  padding: 1.3rem 6rem;
  font-weight: 400;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2.2rem;
  text-align: center;
  border-right: 3px;
  position: relative;
}

.wide-call-to-action.black .promo-content .inline-btn {
  color: var(--fibery-text-default-color);
  background: rgba(255, 220, 78, 1);
}

.wide-call-to-action.yellow .promo-content .inline-btn {
  background: #242938;
  color: #fff;
}

.wide-call-to-action.black .promo-content .inline-btn:before {
  content: '👈';
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  right: -13rem;
  top: -2rem;
  font-size: 5.2rem;
  line-height: 62px;
  transform: rotate(-15deg);
}

.wide-call-to-action.yellow h2,
.wide-call-to-action.yellow p {
  color: #000;
}

.wide-call-to-action.demo {
  margin-bottom: 10rem;
}

.wide-call-to-action.demo .about-feature-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.wide-call-to-action.demo .illustration {
  width: 30%;
}

.wide-call-to-action.demo .promo-content {
  max-width: 60%;
  text-align: left;
}

.wide-call-to-action.demo .promo-content h2,
.wide-call-to-action.demo .promo-content p {
  color: var(--fibery-text-default-color);
}

.wide-call-to-action.demo {
  background: #A5F5E1 url("../img/landing/demo-bg.svg") no-repeat 50% 50% / cover;
}


.double-columns {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  margin-bottom: 7rem;
}

.double-columns .column {
  width: 50%;
}

.double-columns .column:last-child {
  width: 34%;
  margin-right: 8%;
}

.double-columns .column h2 {
  font-weight: 400;
  font-size: 6rem;
  line-height: 1.3;
  color: var(--fibery-text-default-color);
  margin-bottom: 2rem;
}

.double-columns .column p {
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.5;
  color: var(--fibery-text-default-color);
}

.double-columns .column svg {
  display: block;
}

.pic-wrap {
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 1.3rem 1.2rem 30px rgba(0, 0, 0, 0.1);
  line-height: 0;
}

.pic-wrap img {
  width: 100%;
}

.svg-wrap {
  text-align: center;
}

.landing-page .timer-slider-wrap .slider-body {
  line-height: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  /*box-shadow: 0 1rem 29px rgba(0,0,0,0.1);*/
}

.landing-page .timer-slider-wrap .slider-body video {
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
  overflow: hidden;
}

.article-with-list {
  padding-top: 5rem;
}

.img-company {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;

  animation-name: showFibery;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  animation-duration: 5s;
}

.img-company:hover {
  opacity: 1;
}

.svgcompany.mc:hover ~ .img-company.mc,
.svgcompany.sd:hover ~ .img-company.sd,
.svgcompany.road:hover ~ .img-company.road,
.svgcompany.okr:hover ~ .img-company.okr,
.svgcompany.ideation:hover ~ .img-company.ideation,
.svgcompany.dove:hover ~ .img-company.dove,
.svgcompany.crm:hover ~ .img-company.crm,
.svgcompany.zendesk:hover ~ .img-company.zendesk {
  opacity: 1;
}

.img-company.okr {
  animation-delay: 0.3s;
}

.img-company.road {
  animation-delay: 0.5s;
}

.img-company.ideation {
  animation-delay: 0.7s;
}

.img-company.dove {
  animation-delay: 0.9s;
}

.img-company.sd {
  animation-delay: 1.1s;
}

.img-company.mc {
  animation-delay: 1.1s;
}

.img-company.zendesk {
  animation-delay: 1.3s;
}

.img-company.crm {
  animation-delay: 1.2s;
}

@keyframes showFibery {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


.info-banner {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  padding: 1rem calc(50% - 660px);
  background: #000;
  color: #fff;
  font-size: 2rem;
  font-family: "Graphik", sans-serif;

  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.info-banner p {
  position: relative;
  z-index: 2;
}

.info-banner a {
  color: #00D2AB;
  font-size: 1.6rem;
  text-decoration: none;
}

.info-banner .close-banner {
  display: block;
  position: relative;
  z-index: 2;
  width: 2.2rem;
  height: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='10' transform='rotate(-90 11 11)' stroke='white' stroke-width='2'/%3E%3Cpath d='M7.17578 14.8262L11.0019 11.0001L7.17578 7.174' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M14.8242 7.17383L10.9981 10.9999L14.8242 14.826' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  flex-shrink: 0;
}

.info-banner.hidden {
  display: none;
}

.info-banner.with-astronaut:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 6.6rem;
  height: 7.9rem;
  background: url("../img/common/asronaut.png") no-repeat 0 0;

  right: 20%;

  animation-name: flying;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 40s;
  animation-timing-function: linear;

  transform-origin: 50% 50%;
}

@keyframes flying {
  0% {
    transform: rotate(0deg) translate(-100%, -100%);
  }
  50% {
    transform: rotate(90deg) translate(110%, 110%);
  }
  100% {
    transform: rotate(180deg) translate(-120%, -120%);
  }
}

.info-banner.with-santa {
  background-image: url(../img/case-studies/santa/house.png);
  background-repeat: no-repeat;
  background-position: 90% bottom;
  background-size: auto 100%;
}

.info-banner.with-santa:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 44.5rem;
  height: 21.5rem;
  background-image: url(../img/case-studies/santa/snow1.svg);
  background-size: cover;
  background-repeat: repeat-y;
  right: 0;

  animation-name: falling;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-duration: 80s;
  animation-timing-function: linear;

  transform-origin: 50% 50%;
}

.info-banner.with-santa:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: 41.5rem;
  height: 21.3rem;
  background-image: url(../img/case-studies/santa/snow2.svg);
  background-size: cover;
  background-repeat: repeat-y;
  right: 5%;

  animation-name: falling;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-duration: 160s;
  animation-timing-function: linear;
}

@keyframes falling {
  0% {
    background-position: 0 0;
  }
  /*30%{*/
  /*    background-position: -10px 330px;*/
  /*}*/
  /*60%{*/
  /*    background-position: 10px 660px;*/
  /*}*/
  100% {
    background-position: 0 1000px;
  }
}


body.infobanner .header_global {
  top: 5.2rem !important;
  transition: top 0.3s;
}

body.infobanner .header_global.stick {
  top: 0 !important;
}

body.infobanner .first-page-section_global {
  padding-top: 25rem !important;
}