.announce__animation {
  transition: transform .05s linear;
  will-change: transform;
}

/*** grid ***/
.grid,
.grid__column {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.grid {
  width: 1264px;
  max-width: calc(100% - 22px);
  margin: 2em auto;
}

.grid_screenshots {
  width: 1600px;
}

.grid__column {
  width: calc(50% - 22px);
  padding: 1px 11px;
}

/*** custom columns ***/
.grid__column_65p {
  width: calc(65% - 22px);
}

.grid__column_60p {
  width: calc(60% - 22px);
}

.grid__column_40p {
  width: calc(40% - 22px);
}

.grid__column_35p {
  width: calc(35% - 22px);
}
/*** custom columns end ***/

@media(max-width: 880px) {
  .grid__column {
    width: calc(100% - 22px);
  }
}

.grid__content {
  width: 100%;
  margin-bottom: 2em;
  text-align: center;
  position: relative;
  z-index: 1;
}

.grid__content .announce__text {
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 0;
}

.grid__content img {
  max-width: 100%;
  height: auto;
}

/*** tripe ***/
.grid_stripe__wrapper {
  overflow: hidden;
}

.grid_stripe {
  width: 4672px;
  max-width: none;
}

.grid_stripe .grid__column {
  width: 270px;
}

.grid_stripe .grid__content {
  text-align: center;
}

.grid_stripe .grid__content .announce__picture-note2 {
  width: 75%;
  text-align: center;
  height: 70px;
}

.lk-icon {
  width: 270px;
  height: 179px;
  background:  url(premium-lk/sprite.png) no-repeat;
}
/*** stripe end ***/

@media(min-width: 881px) {
  .grid_with-text {
    width: 1500px;
    margin-left: 13%;
  }
}

@media(min-width: 1291px) {
  .grid_with-text {
    margin-left: calc((100% - 940px) / 2);
  }
}
/*** grid end ***/

/*** stage ***/
.stage {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 60px 0;
  white-space: nowrap;
  text-align: center;
  /*z-index: -1;*/
}

.stage__image {
  position: relative;
  /*display: inline-block;*/
  -webkit-transition: opacity .5s ease,-webkit-transform .5s ease;
  transition: opacity .5s ease,-webkit-transform .5s ease;
  transition: transform .5s ease,opacity .5s ease;
  transition: transform .5s ease,opacity .5s ease,-webkit-transform .5s ease;
  z-index: 2;
}

.stage__image_stagein {
  transform: scale(1.1);
}

.stage__image_stageout {
  opacity: .5;
}

.stage__image img {
  max-width: 100%;
  height: auto;
  white-space: nowrap;
}

.stage__bg {
  position: absolute;
  height: 800px;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(b2b/bg-center.png) bottom no-repeat;
}

.stage::before {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 0;
  left: 0;
  min-height: 800px;
  height: 150%;
  background: url(b2b/bg-top.png) no-repeat bottom;
  background-size: cover;
}

.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8%;
  margin: auto;
  height: 110px;
  background: url(b2b/bg-bottom.png) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  z-index: 1;
}

.stage__note {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 44px);
  margin: -2em auto 2em;
}

@media(max-width: 520px) {
  .stage__note {
    display: none;
  }
}
/*** stage end***/

/*** sticky polyfill ***/
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

.eye {
  width: 100% !important;
  height: 100vh;
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  transition: opacity .3s ease-out;
}
/*** sticky polyfill end ***/


/*** main-cover animation ***/
.main-cover__content {
  transition: opacity 1s cubic-bezier(.35,.26,0,.97), transform 1s cubic-bezier(.35,.26,0,.97);
}

@media(max-width: 980px) {
  .main-cover {
    background: url(cover/cover2.jpg) 50% 50% / cover no-repeat;
  }
}

@media(max-width: 620px) {
  .main-cover {
    background: url(cover/cover2.jpg) 34% 50% / cover no-repeat;
  }
}

.main-cover__animation-wrapper {
  position: relative;
  height: 100vh;
  background: #000;
  pointer-events: none;
  overflow: hidden;
}

.main-cover__animation-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(cover/cover2_bg.jpg) 50% 0 / cover no-repeat;
  /*filter: blur(5px);*/
}

.main-cover__animation {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(cover/cover2.jpg) 50% 50% / cover no-repeat;
  opacity: 0;
  transform: scale(4) translateZ(0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  z-index: 4;
  transition: opacity 1s cubic-bezier(.35,.26,0,.97), transform 1s cubic-bezier(.35,.26,0,.97);
}

@media(max-width:  900px) {
  .main-cover__animation-wrapper { display: none; }
}
/*** main-cover animation end***/

/*** emo ***/
.emo {
  overflow: hidden;
  text-align: center;
  font-size: 0;
}

@media(min-width: 881px) {
  .emo {
    /* width: 85%; */
    margin: auto;
  }
}

.emo__image-container {
  position: relative;
  width: 33.33%;
  display: inline-block;
}

.emo__image {
  max-width: 100%;
  height: auto;
  margin-left: 50%;
  transform: translateX(-50%);
}

.emo__image_front {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .6s ease-in;
  will-change: opacity;
}

.emo_show-1 .emo__image-container:nth-child(odd) .emo__image_front,
.emo_show-2 .emo__image-container:nth-child(even)  .emo__image_front {
  opacity: 1;
}
/*** emo end ***/

/*** gen ***/
.gen__wrapper {
  position: relative;
  width: 200px;
  font-family: als_storyregular, Helvetica, Arial, sans-serif;
  float: left;
  margin-bottom: 40px;
  text-align: left;
}

.gen__container {
  max-width: 600px; 
  margin: 0;
}

.gen__container::after {
  content: "";
  display: block;
  clear: both;
}

.gen__preview {
  color: #fff;
  width: 160px;
}

.gen__name {
  font-family: Roboto Mono, Helvetica, monospace;
  font-size: 32px;
  line-height: 30px;
  margin-bottom: 10px;
}

.gen__name span {
  font-family: Roboto Mono, Helvetica, monospace;
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 700;
  border-bottom: 1px dashed;
  border-bottom-color: hsla(0,0%,100%,.3);
  cursor: pointer;
  transition: all .2s ease;
}

.gen__name span:hover {
  color: #e20c4a;
  border-bottom-color: rgba(226,12,74,.3);
}

.gen__label {
  font-size: 14px;
  line-height: 21px;
}

.gen__image {
  display: block;
  margin-top: 18px;
  line-height: 26.25px;
}

.gen__image img {
  vertical-align: center;
}

.gen__description,
.gen__information {
  font-size: 14px;
  line-height: 18px;
  opacity: .5;
  margin-bottom: 10px;
}

.gen__popup {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 160px;
  padding: 20px;
  background: #fff;
  color: #000;
  border-radius: 20px;
  /*z-index: -2;*/
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease-in-out;
}

.gen__popup_active {
  opacity: 1;
  z-index: 21;
  pointer-events: all;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px 0px;
}

.gen__popup .gen__name span {
  border-bottom-color: rgba(0,0,0,.3);
}

.gen__popup .gen__name span:hover {
  color: #000;
}

.gen__popup .gen__description {
  opacity: 1;
}

.gen__information {
  opacity: 1;
  color: #a5a5a5;
}
/*** gen end ***/

/*** premium ***/
.premium {
  overflow: hidden;
  position: relative;
  background: #000;
  padding: 1px 0 4em 0;
  color: #7b5e4f;
}

.premium .announce__picture-note2 {
  color: #7b5e4f;
}

@media(min-width: 881px) {
  .premium__text {
    transform: translateY(9em);
  }
}

.premium__video-space {
  height: 500px;
}

.premium__video-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: -36%;
  height: 700px;
  width: 100%;
  z-index: 10;
}

@media(max-width: 880px) {
  .premium__video-container {
    display: none;
  }
}

.premium__video-container::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: url(genotek-site-gen_bg.png) repeat-x 50% 100%;
  z-index: 20;
}

.premium__video-container::after {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(-90deg, #000 1%, transparent 20%, transparent 99%);
  z-index: 20;
}

.premium__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}
/*** premium end ***/

/*** screencast ***/
.announce__screencast {
  position: relative;
  width: 1264px;
  max-width: calc(100% - 44px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -15px;
}

.announce__screencast video {
  position: absolute;
  top: 75px;
  left: 2.54%;
  width: 1200px;
  max-width: 94.94%;
  height: auto;
}

@media(max-width: 1308px) {
  .announce__screencast video {
    top: calc((100vw - 44px) * 0.059);
  }
}
/*** screencast end***/

.talant::after {
  display: block;
  content: "";
  clear: both;
}

.talant {
  position: relative;
  text-align: left;
  margin-left: auto;
  margin-right: 0;
  max-width: 500px;
  height: 300px;
}

.talant__image {
  position: absolute;
  height: auto;
  top: 0;
  width: 20%;
}

/*** tilt ***/
.top-girl, .top-hand {
    height: 100%;
}

.scene-image, .scene-text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


.section-children__tilt-hand {
    position: relative;
    left: -60px;
}

.top-hand {
    height: 100%;
}

.top-hand {
    width: 35%;
    float: left;
}


.tilt {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.tilt__back, .tilt__front {
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tilt__back {
  position: relative;
}
.tilt__front {
  position: absolute;
  top: 0;
  left: 0;
}

.section-children__tilt-bg {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
}
.section-children__tilt-bg .tilt__back,
.section-children__tilt-bg .tilt__front {
  background-size: cover;
}
.section-children__tilt-hand {
  position: relative;
  left: -60px;
}
.section-children__tilt-hand .tilt {
  overflow: visible;
}
.section-children__tilt-hand .tilt__back,
.section-children__tilt-hand .tilt__front {
  background-position: 0 100%;
}
.section-children__tilt-girl {
  position: relative;
  right: -47px;
  bottom: -10px;
}
.section-children__tilt-girl .tilt {
  overflow: visible;
}
.section-children__tilt-girl .tilt__back,
.section-children__tilt-girl .tilt__front {
  background-position: 100% 100%;
}
.section-children__tilt-dust {
  position: absolute;
  top: -40px;
  left: -40px;
  right: -40px;
  bottom: -40px;
}
.section-children__tilt-dust .tilt__back,
.section-children__tilt-dust .tilt__front {
  background-size: cover;
}


@media(max-width: 1100px) {
  .top-hand {
    visibility: hidden !important;
  }
  .tilt-text {
    display: none;
  }
}
/*** tilt end ***/

.switcher .announce__screencast {
  cursor: pointer;
}