.grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: stretch; }
  .grid__col {
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .grid__col_10 {
      display: none; }
      @media (min-width: 768px) {
        .grid__col_10 {
          display: block;
          width: 10%; } }
    .grid__col_30 {
      width: 100%; }
      @media (min-width: 768px) {
        .grid__col_30 {
          width: 30%;
          width: 490px; } }
    .grid__col_60 {
      width: 100%; }
      @media (min-width: 768px) {
        .grid__col_60 {
          width: 60%;
          width: auto;
          flex-grow: 1; } }

* {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box; }
  @media (min-width: 768px) {
    * {
      cursor: none; } }

html {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'WarnockPro';
  background: url(../images/bg.jpg) center center/cover no-repeat; }

h1 {
  line-height: 25px;
  font-size: 25px;
  font-weight: bold; }
  @media (min-width: 768px) {
    h1 {
      line-height: 52px;
      font-size: 60px; } }
  @media (min-width: 1440px) {
    h1 {
      line-height: 70px;
      font-size: 80px; } }

h2 {
  font-size: 21px;
  font-weight: bold; }
  @media (min-width: 768px) {
    h2 {
      font-size: 32px; } }
  @media (min-width: 1440px) {
    h2 {
      font-size: 40px; } }

h3 {
  font-size: 26px;
  font-weight: bold;
  line-height: 1; }

p {
  line-height: 18px;
  font-size: 14px; }
  @media (min-width: 768px) {
    p {
      line-height: 20px;
      font-size: 16px; } }
  @media (min-width: 1440px) {
    p {
      line-height: 28px;
      font-size: 20px; } }

.hidden,
.loading {
  opacity: 0; }

.poly {
  display: block; }
  .poly__outline {
    opacity: 0; }
  .poly__body, .poly__outline {
    fill: none;
    stroke: #000000;
    stroke-width: 8;
    stroke-miterlimit: 10; }
  .poly_filled .poly__body {
    fill: #000000; }
  .poly_outlined .poly__outline {
    opacity: 1;
    stroke-dasharray: 40% 10%;
    stroke-dashoffset: 20%;
    animation: poly_outline 2s infinite linear; }
  .poly_bordered .poly__outline {
    opacity: 1; }
  .poly_bordered .poly__body {
    fill: #000000; }
  .poly_stroked .poly__outline {
    opacity: 1; }

@keyframes poly_outline {
  0% {
    stroke-dashoffset: 20%; }
  100% {
    stroke-dashoffset: 120%; } }

.logo {
  display: block;
  text-decoration: none; }
  .logo__image {
    display: block;
    width: 100%; }
  .logo__subtitle {
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    text-decoration: none;
    margin-top: 5px;
    opacity: 0;
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease ; }
    @media (max-width: 767px) {
      .logo__subtitle {
        display: none; } }
    @media (min-width: 768px) {
      .logo__subtitle {
        width: 280%;
        margin-left: -90%; } }
  .logo:hover .logo__subtitle,
  .logo_hover .logo__subtitle {
    margin-top: 18px;
    opacity: 1; }

.soc {
  list-style: none;
  text-align: center;
  font-size: 0;
  pointer-events: none; }
  .soc__list {
    pointer-events: auto; }
  .soc__item {
    vertical-align: top;
    margin: 1vw auto; }
  .soc__link {
    display: block;
    width: 6vw;
    height: 6vw;
    line-height: 6vw;
    margin: auto;
    color: inherit;
    font-size: 4.3vw;
    text-align: center;
    text-decoration: none; }
    @media (min-width: 768px) {
      .soc__link {
        width: 2vw;
        height: 2vw;
        line-height: 2vw;
        font-size: 1.3vw; } }
    .soc__link[class*="vkontakte"] {
      font-size: 4.1vw; }
      @media (min-width: 768px) {
        .soc__link[class*="vkontakte"] {
          font-size: 1.1vw; } }

.arrow {
  transition: all 0.3s ease ; }
  .arrow_up:hover {
    transform: translate3d(0, -10px, 0); }
  .arrow_down:hover {
    transform: translate3d(0, 10px, 0); }
  .arrow__label {
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    margin: auto;
    font-weight: bold;
    font-size: 15px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease ; }
  @media (min-width: 768px) {
    .arrow:hover .arrow__label {
      right: 150%;
      opacity: 1; } }
  .arrow_inactive {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 10px, 0); }

.nav {
  z-index: 20; }
  .nav__list {
    list-style: none;
    margin: 2vw 0; }
    @media (min-width: 1440px) {
      .nav__list {
        margin: 2.1vw 0; } }
  .nav__item {
    width: 17px;
    height: 17px; }
    .nav__item + .nav__item {
      margin-top: 1.4vw; }
      @media (min-width: 1440px) {
        .nav__item + .nav__item {
          margin-top: 2.76vw; } }
  .nav__link {
    display: block;
    width: 100%;
    height: 100%; }
  .nav__poly {
    width: 100%;
    height: 100%; }
    .nav__poly .poly__outline {
      opacity: 1;
      stroke-dashoffset: 0%;
      stroke-dasharray: 0% 100%;
      transition: stroke-dasharray 0.3s ease ; }
    .nav__poly.poly_stroked .poly__outline {
      stroke-dasharray: 100% 0%; }
  .nav__arrow {
    display: block;
    color: inherit;
    font-size: 0;
    text-decoration: none;
    text-align: center; }
    .nav__arrow:before {
      font-size: 2.1vw; }
    @media (max-width: 767px) {
      .nav__arrow {
        display: none; } }
  .nav__label {
    position: absolute;
    top: -4px;
    right: 100%;
    color: rgba(0, 0, 0, 1);
    font-size: 15px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease ; }
    @media (max-width: 767px) {
      .nav__label {
        display: none; } }
  @media (min-width: 768px) {
    .nav__item:not(.nav__item_active):hover .nav__label {
      right: 150%;
      opacity: 1; } }

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 1.5s ease 2s; }
  @media (max-width: 767px) {
    .content {
      z-index: 2000; } }
  .content__group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all 0.3s ease ;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform: translate3d(0, 30px, 0); }
    .content__group_active {
      opacity: 1;
      z-index: 2;
      pointer-events: auto;
      transform: translate3d(0, 0, 0); }
  .content__title {
    margin-bottom: 2vw; }
  .content__subtitle {
    margin-bottom: 1.5vw; }
  .content__text a {
    color: inherit;
    font-weight: bold;
    text-decoration: none; }
  .content__back {
    margin-top: 30px; }
    .content__back:before {
      display: inline-block;
      font-size: 8px;
      margin-right: 5px;
      transition: all 0.3s ease ; }
      @media (min-width: 768px) {
        .content__back:before {
          font-size: 14px;
          margin-right: 30px; } }
    @media (min-width: 768px) {
      .content__back:hover:before {
        margin-right: 15px; } }
  .content__subtext {
    font-size: 13px;
    line-height: 18px;
    margin-top: 15px; }
    @media (min-width: 768px) {
      .content__subtext {
        font-size: 17px;
        line-height: 20px;
        margin-top: 20px;
        padding-top: 20px; } }
    @media (min-width: 768px) {
      .content__subtext:before {
        content: '';
        display: block;
        width: 50px;
        height: 2px;
        position: absolute;
        top: -1px;
        left: 0px;
        background: rgba(0, 0, 0, 1); } }
    .content__subtext a {
      color: inherit;
      font-weight: bold;
      text-decoration: none; }
  .content.hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
    transition: all 1.5s ease ; }

.fullpage {
  width: 100%;
  height: 100%; }
  .fullpage__page {
    width: 100%;
    height: 100%; }

.wrapper {
  display: flex;
  padding: 3.54vw 7.4vw 3.54vw 10.4vw;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }
  @media (min-width: 768px) {
    .wrapper {
      padding: 3.54vw 7.4vw; } }

.container {
  width: 100%;
  height: 100%;
  transition: all 0.3s ease ; }

.interface {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }
  .interface .logo_buro {
    width: 5.73vw;
    position: absolute;
    z-index: 5000; }
    @media (max-width: 767px) {
      .interface .logo_buro {
        width: 11vw;
        left: 2vw; } }
  .interface .logo_jura {
    width: 5.73vw;
    position: absolute;
    z-index: 5000;
    left: auto;
    right: 7.4vw; }
    @media (max-width: 767px) {
      .interface .logo_jura {
        width: 11vw;
        right: 3vw; } }
  .interface .nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    z-index: 1000; }
    @media (max-width: 767px) {
      .interface .nav {
        position: absolute;
        top: 0;
        left: 2vw; } }
  .interface .soc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 93vw;
    right: 0;
    z-index: 5000; }
    @media (max-width: 767px) {
      .interface .soc {
        left: 91vw; } }

.credit__title {
  font-weight: bold; }

.credits {
  list-style: none;
  text-align: center;
  font-size: 14px; }
  .credits__credit {
    display: block; }

.spot__line {
  width: 100%;
  height: 0px;
  border-top: 2px dotted rgba(0, 0, 0, 1);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  pointer-events: none;
  transition: all 0.1s ease 0.1s; }
  .spot__line_out {
    transition-delay: 0s; }

.spot__origin {
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 1);
  pointer-events: none;
  transition: all 0.1s ease ; }

.spot__origin .spot__line {
  top: 8px;
  left: 6px; }

.spot__marker {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0; }

.spot__label {
  position: absolute;
  top: 0;
  right: 130%;
  white-space: nowrap;
  opacity: 0;
  line-height: 22px;
  font-size: 17px;
  pointer-events: none;
  transform: translate3d(0px, 0, 0);
  transition: all 0.3s ease ; }
  @media (max-width: 767px) {
    .spot__label {
      display: none; } }

.spot_preview .spot__label {
  opacity: 1;
  transform: translate3d(0px, 0, 0);
  pointer-events: auto; }

.spot:hover .spot__line {
  transition-delay: 0s; }

.spot:hover .spot__line_out {
  transition-delay: 0.1s; }

.spot:hover .spot__origin {
  transition-delay: 0.2s; }

.spot:hover .spot__label {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0); }

.machines {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.machine {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -116%;
  bottom: -100%;
  left: -100%;
  right: -100%;
  margin: auto; }
  @media (min-width: 768px) {
    .machine {
      top: -100%;
      z-index: 1000; } }
  .machine__viewport {
    width: 100%;
    transition: all 0.3s ease ; }
  .machine__image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; }
  .machine__preview {
    display: block;
    max-width: 100%;
    max-height: 100%;
    transition: all 0.3s ease ; }
  .machine__svg {
    display: block;
    width: 100%; }
    .machine__svg path,
    .machine__svg ellipse,
    .machine__svg polyline {
      stroke: rgba(0, 0, 0, 1);
      stroke-miterlimit: 10;
      stroke-width: 1px;
      stroke-dasharray: 100% 0%;
      fill: rgba(0, 0, 0, 1);
      transition: stroke-dasharray 1s ease 2s, fill 0.5s ease 3s; }
  .machine__preview + .machine__svg {
    position: absolute;
    top: 0; }
  .machine__viewport .machine__preview {
    width: 100%;
    opacity: 0; }
  .machine__spots {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
    @media (max-width: 767px) {
      .machine__spots {
        z-index: 3000; } }
  .machine__spot {
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    right: auto;
    transition: all 0.3s ease ; }
    .machine__spot:not(:hover) .spot__marker {
      transition: none; }
      .machine__spot:not(:hover) .spot__marker svg {
        animation: spotPulse 1.6s infinite; }
    .machine__spot.spot_2:not(:hover) .spot__marker svg {
      animation-delay: 0.8s; }

@keyframes spotPulse {
  0% {
    transform: scale(1.1); }
  40% {
    transform: scale(0.7); }
  100% {
    transform: scale(1.1); } }
  .machine:not(.spots) .machine__spot {
    transition: all 0.3s ease 3s; }
  .machine__back {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 7%;
    opacity: 0;
    transform: rotate(-10deg) translate3d(20px, -20px, 0);
    pointer-events: none;
    transition: all 0.3s ease ; }
  .machine.hidden {
    opacity: 1;
    z-index: 0; }
  .machine.hidden .machine__preview {
    opacity: 0; }
  .machine.hidden .machine__svg path,
  .machine.hidden .machine__svg ellipse,
  .machine.hidden .machine__svg polyline {
    stroke-dasharray: 0% 100%;
    fill: rgba(0, 0, 0, 0);
    transition: stroke-dasharray 1s ease 0.5s, fill 0.5s ease; }
  .machine.hidden .machine__spot,
  .machine.zoomed .machine__spot {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.9);
    transition: all 0.3s ease ; }
  .machine.zoomed .machine__viewport {
    opacity: 0.3;
    transform: scale(1.3); }
  .machine.zoomed .machine__back {
    opacity: 1;
    pointer-events: auto;
    transform: rotate(0deg) translate3d(0, 0, 0); }
    .machine.zoomed .machine__back:hover {
      transform: rotate(0deg) translate3d(0px, 0px, 0) scale(1.1); }
  .machine_main {
    width: 86%; }
    @media (min-width: 768px) {
      .machine_main {
        left: -110%; } }
    @media (max-width: 767px) {
      .machine_main {
        top: -105%; } }
    .machine_main .spot_1 {
      top: 12%;
      left: 33%; }
      .machine_main .spot_1 .spot__line_out {
        width: 8vw;
        top: -7.3vw;
        left: -2vw;
        transform: rotate(72deg); }
      .machine_main .spot_1 .spot__marker {
        top: 5vw;
        left: -16vw; }
        .machine_main .spot_1 .spot__marker .spot__line {
          width: 18vw;
          top: 0vw;
          left: 0.7vw;
          transform: rotate(-43deg); }
    .machine_main .spot_2 {
      top: 16%;
      left: 64%; }
      .machine_main .spot_2 .spot__line_out {
        width: 9vw;
        top: -8vw;
        left: 3.5vw;
        transform: rotate(110deg); }
      .machine_main .spot_2 .spot__marker {
        top: -3vw;
        left: 12vw; }
        .machine_main .spot_2 .spot__marker .spot__line {
          width: 10.1vw;
          top: 0vw;
          left: 0.2vw;
          transform: rotate(-150deg); }
      .machine_main .spot_2 .spot__label {
        left: 130%;
        right: auto; }
    .machine_main .spot_3 {
      top: 73%;
      left: 64%; }
      .machine_main .spot_3 .spot__line_out {
        width: 14vw;
        top: 11.4vw;
        left: 9.3vw;
        transform: rotate(-129deg); }
      .machine_main .spot_3 .spot__marker {
        top: 4vw;
        left: 12vw; }
        .machine_main .spot_3 .spot__marker .spot__line {
          width: 7vw;
          top: 17px;
          left: 5px;
          transform: rotate(114deg); }
      .machine_main .spot_3 .spot__label {
        left: 130%;
        right: auto; }
  @media (max-width: 767px) {
    .machine_design {
      top: -105%; } }
  .machine_design .spot_1 {
    top: 15%;
    left: 25%; }
    @media (min-width: 768px) {
      .machine_design .spot_1 {
        top: 15%;
        left: 35%; } }
    .machine_design .spot_1 .spot__line_out {
      width: 8vw;
      top: -7.3vw;
      left: -2vw;
      transform: rotate(72deg); }
    .machine_design .spot_1 .spot__marker {
      top: 5vw;
      left: -16vw; }
      .machine_design .spot_1 .spot__marker .spot__line {
        width: 18vw;
        top: 0vw;
        left: 0.7vw;
        transform: rotate(-43deg); }
  .machine_design .spot_2 {
    top: 73%;
    left: 74%; }
    @media (min-width: 768px) {
      .machine_design .spot_2 {
        top: 71%;
        left: 34%; } }
    @media (min-width: 1800px) {
      .machine_design .spot_2 {
        top: 71%;
        left: 64%; } }
    .machine_design .spot_2 .spot__line_out {
      width: 14vw;
      top: 11.4vw;
      left: 9.3vw;
      transform: rotate(-129deg); }
      @media (min-width: 768px) {
        .machine_design .spot_2 .spot__line_out {
          width: 24.5vw;
          top: 11.3vw;
          left: 22.3vw;
          transform: rotate(-153.7deg); } }
      @media (min-width: 1800px) {
        .machine_design .spot_2 .spot__line_out {
          width: 14vw;
          top: 11.4vw;
          left: 9.3vw;
          transform: rotate(-129deg); } }
    .machine_design .spot_2 .spot__marker {
      top: 4vw;
      left: 12vw; }
      @media (min-width: 768px) {
        .machine_design .spot_2 .spot__marker {
          left: 25vw; } }
      @media (min-width: 1800px) {
        .machine_design .spot_2 .spot__marker {
          top: 4vw;
          left: 12vw; } }
      .machine_design .spot_2 .spot__marker .spot__line {
        width: 7vw;
        top: 17px;
        left: 5px;
        transform: rotate(114deg); }
    .machine_design .spot_2 .spot__label {
      left: 130%;
      right: auto; }
  @media (max-width: 767px) {
    .machine_gadget {
      top: -100%; } }
  .machine_gadget .spot_1 {
    top: 15%;
    left: 35%; }
    @media (min-width: 768px) {
      .machine_gadget .spot_1 {
        top: 52%;
        left: 35%; } }
    @media (min-width: 1800px) {
      .machine_gadget .spot_1 {
        top: 45%;
        left: 35%; } }
    .machine_gadget .spot_1 .spot__line_out {
      width: 8vw;
      top: -7.3vw;
      left: -2vw;
      transform: rotate(72deg); }
    .machine_gadget .spot_1 .spot__marker {
      top: -15vw;
      left: -16vw; }
      .machine_gadget .spot_1 .spot__marker .spot__line {
        width: 15vw;
        top: 0.5vw;
        left: 0.7vw;
        transform: rotate(28deg); }
  .machine_gadget .spot_2 {
    top: 68%;
    left: 64%; }
    @media (min-width: 768px) {
      .machine_gadget .spot_2 {
        top: 68%;
        left: 46%; } }
    @media (min-width: 1800px) {
      .machine_gadget .spot_2 {
        top: 68%;
        left: 64%; } }
    .machine_gadget .spot_2 .spot__line_out {
      width: 14vw;
      top: 11.4vw;
      left: 9.3vw;
      transform: rotate(-129deg); }
    .machine_gadget .spot_2 .spot__marker {
      top: 4vw;
      left: 12vw; }
      .machine_gadget .spot_2 .spot__marker .spot__line {
        width: 7vw;
        top: 17px;
        left: 5px;
        transform: rotate(114deg); }
    .machine_gadget .spot_2 .spot__label {
      left: 130%;
      right: auto; }
  @media (max-width: 767px) {
    .machine_miracle {
      left: -90%; } }
  .machine_miracle .spot_1 {
    top: 14%;
    left: 24%; }
    @media (min-width: 768px) {
      .machine_miracle .spot_1 {
        top: 33%;
        left: 24%; } }
    .machine_miracle .spot_1 .spot__line_out {
      width: 8vw;
      top: -7.3vw;
      left: -2vw;
      transform: rotate(72deg); }
    .machine_miracle .spot_1 .spot__marker {
      top: -9.5vw;
      left: -10.5vw; }
      .machine_miracle .spot_1 .spot__marker .spot__line {
        width: 8vw;
        top: 0.5vw;
        left: 0.7vw;
        transform: rotate(13deg); }
  .machine_miracle .spot_2 {
    top: 92%;
    left: 49%; }
    @media (min-width: 768px) {
      .machine_miracle .spot_2 {
        top: 70%;
        left: 58%; } }
    @media (min-width: 1800px) {
      .machine_miracle .spot_2 {
        top: 58%;
        left: 65%; } }
    .machine_miracle .spot_2 .spot__line_out {
      width: 14vw;
      top: 11.4vw;
      left: 9.3vw;
      transform: rotate(-129deg); }
    .machine_miracle .spot_2 .spot__marker {
      top: 4vw;
      left: 12vw; }
      .machine_miracle .spot_2 .spot__marker .spot__line {
        width: 7vw;
        top: 17px;
        left: 5px;
        transform: rotate(114deg); }
    .machine_miracle .spot_2 .spot__label {
      left: 130%;
      right: auto; }
  @media (max-width: 767px) {
    .machine_barista {
      top: -100%; } }
  .machine_barista .spot_1 {
    top: 13%;
    left: 28%; }
    @media (min-width: 768px) {
      .machine_barista .spot_1 {
        top: 33%;
        left: 24%; } }
    .machine_barista .spot_1 .spot__line_out {
      width: 8vw;
      top: -7.3vw;
      left: -2vw;
      transform: rotate(72deg); }
    .machine_barista .spot_1 .spot__marker {
      top: -9.5vw;
      left: -10.5vw; }
      .machine_barista .spot_1 .spot__marker .spot__line {
        width: 8vw;
        top: 0.5vw;
        left: 0.7vw;
        transform: rotate(13deg); }
  .machine_barista .spot_2 {
    top: 47%;
    left: 72%; }
    @media (min-width: 768px) {
      .machine_barista .spot_2 {
        top: 58%;
        left: 52%; } }
    @media (min-width: 1800px) {
      .machine_barista .spot_2 {
        top: 58%;
        left: 65%; } }
    .machine_barista .spot_2 .spot__line_out {
      width: 14vw;
      top: 11.4vw;
      left: 9.3vw;
      transform: rotate(-129deg); }
    .machine_barista .spot_2 .spot__marker {
      top: 4vw;
      left: 12vw; }
      .machine_barista .spot_2 .spot__marker .spot__line {
        width: 7vw;
        top: 17px;
        left: 5px;
        transform: rotate(114deg); }
    .machine_barista .spot_2 .spot__label {
      left: 130%;
      right: auto; }
  @media (max-width: 767px) {
    .machine .spot__origin {
      transform: scale(0) !important; }
    .machine .spot__line {
      width: 0vw !important; }
    .machine .spot__label {
      display: none; } }
  @media (min-width: 768px) {
    .machine .spot:not(:hover) .spot__origin {
      transform: scale(0); }
    .machine .spot:not(:hover) .spot__line {
      width: 0vw; } }

.hidden .machine__svg path,
.hidden .machine__svg ellipse,
.hidden .machine__svg polyline {
  stroke-dasharray: 0% 100%;
  fill: rgba(0, 0, 0, 0);
  transition: stroke-dasharray 1s ease 0.5s, fill 0.5s ease; }

.guide {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  z-index: 99999; }
  @media (max-width: 767px) {
    .guide {
      left: 0 !important;
      top: 0 !important;
      display: none !important; } }
  .guide_hor {
    width: 100%;
    height: 0;
    border-top: 1px dotted rgba(0, 0, 0, 1);
    left: 0px;
    top: -1px; }
  .guide_ver {
    width: 0;
    height: 100%;
    border-left: 1px dotted rgba(0, 0, 0, 1);
    left: -1px;
    top: 0px; }
  .guide_cursor {
    width: 18px;
    height: 18px; }
    .guide_cursor:before, .guide_cursor:after {
      content: '';
      display: block;
      width: 100%;
      height: 3px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background: rgba(0, 0, 0, 1); }
    .guide_cursor:after {
      transform: rotate(90deg); }
  .guide_hover {
    width: 25px;
    height: 25px;
    border: 1px solid rgba(0, 0, 0, 1); }
  body:hover .guide:not(.guide_hover) {
    opacity: 1; }
  body:hover .guide_cursor.hovered {
    opacity: 0; }
  body:hover .guide_hover.hovered {
    opacity: 1; }

.cup__image {
  display: block;
  width: 100%; }

.cup__fill {
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  transition: none; }

.cup__coffee {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0; }

.cup__title {
  width: 100%;
  position: absolute;
  top: 95%;
  left: 0;
  font-size: 15px;
  opacity: 0;
  transition: all 0.3s ease ; }

.cup:hover:not(.ui-animating):not(.ui-draggable-dragging) .cup__title {
  top: 100%;
  opacity: 1; }

.cup_cooked .cup__fill {
  height: 100%;
  transition: all 4s ease ; }

.game {
  text-align: center;
  z-index: 3000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease 2s; }
  .game__credits {
    margin-top: 3vw; }
  @media (max-width: 767px) {
    .game .grid {
      align-items: start; } }
  @media (min-width: 768px) {
    .game .grid__col_10 {
      display: none; } }
  @media (max-width: 767px) {
    .game .grid__col_30 {
      display: none; } }
  @media (min-width: 768px) {
    .game .grid__col_30 {
      width: 35%; } }
  .game .grid__col_60 {
    width: 100%;
    margin-top: 4vh; }
    @media (min-width: 768px) {
      .game .grid__col_60 {
        flex-grow: 0;
        width: 60%;
        margin-top: -4vh; } }
  .game__cups {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0;
    transition: all 0.3s ease 3s; }
    @media (max-width: 767px) {
      .game__cups {
        margin-top: 8vh; } }
    .game__cups-title {
      flex-shrink: 0;
      width: 100%; }
    .game__cups.hidden {
      display: none; }
  .game__cup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 20vw;
    z-index: 3100; }
    @media (min-width: 768px) {
      .game__cup {
        width: 14vw; } }
    .game__cup .cup__container {
      width: 100%;
      margin: auto; }
    .game__cup .cup__image {
      width: 100%;
      margin: auto; }
    .game__cup_cappuccino .cup__container {
      width: 80%; }
    .game__cup_macchiato {
      margin: auto -5%; }
      @media (min-width: 768px) {
        .game__cup_macchiato {
          margin: auto -5%; } }
    .game__cup_macchiato .cup__title {
      padding-left: 1vw; }
    .game__cup_espresso .cup__title {
      margin-top: -12%; }
  .game__machine {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%; }
    @media (max-width: 767px) {
      .game__machine {
        position: absolute;
        bottom: 0;
        left: 0; } }
    @media (min-width: 768px) {
      .game__machine {
        width: 45%;
        height: 100%; } }
    .game__machine-wrapper {
      display: block;
      width: 100%;
      margin: auto; }
    .game__machine-image {
      display: block;
      width: 100%;
      opacity: 0; }
    .game__machine .game__cup {
      position: absolute; }
      .game__machine .game__cup:not(.game__cup_selected) {
        visibility: hidden; }
      .game__machine .game__cup_cappuccino {
        top: 65%;
        left: 38%; }
        @media (min-width: 768px) {
          .game__machine .game__cup_cappuccino {
            top: 64%; } }
      .game__machine .game__cup_macchiato {
        top: 60%;
        left: 42%; }
        @media (min-width: 768px) {
          .game__machine .game__cup_macchiato {
            top: 59%; } }
      .game__machine .game__cup_espresso {
        top: 63%;
        left: 37%; }
        @media (min-width: 768px) {
          .game__machine .game__cup_espresso {
            top: 62%; } }
  .game__machine-svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
    .game__machine-svg .machine__svg {
      width: auto;
      height: 100%; }
  .game__dropzone {
    width: 65%;
    height: 50%;
    position: absolute;
    bottom: 0%;
    right: 30%; }
  .game__selects {
    transition: all 0.3s ease 3s; }
    .game__selects-header {
      display: inline-block;
      vertical-align: top;
      width: 100%;
      padding: 12vw 0px 6vw;
      background: url(../images/coffee-name.svg) bottom center/100% no-repeat; }
      @media (max-width: 767px) {
        .game__selects-header {
          margin-top: -5vh; } }
      @media (min-width: 768px) {
        .game__selects-header {
          width: 510px;
          padding: 120px 155px 38px; } }
    @media (max-width: 767px) {
      .game__selects-title {
        font-size: 14px !important; } }
    .game__selects.hidden {
      display: none; }
  .game__select {
    margin: auto; }
  .game__result {
    transition: all 0.3s ease 3s; }
    @media (max-width: 767px) {
      .game__result {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 40vh; } }
    .game__result.hidden {
      display: none; }
  .game.hidden {
    z-index: 5;
    opacity: 1;
    transition: all 0.3s ease 0s; }
  .game .game__machine-wrapper .game__cup {
    transition: opacity 0.3s ease 3s; }
  .game.hidden .game__machine-wrapper .game__cup,
  .game.hidden .game__cups,
  .game.hidden .game__selects,
  .game.hidden .game__result {
    opacity: 0;
    transition: all 0.3s ease ; }
  .game__cook-btn {
    margin-top: 15px;
    transition: all 0.3s ease ; }
    .game__cook-btn:hover {
      transform: scale(1.05); }
  .game__to-cups-btn {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    transition: all 0.3s ease ; }
    @media (min-width: 768px) {
      .game__to-cups-btn {
        margin-top: -28px;
        margin-bottom: 30px; } }
    .game__to-cups-btn:hover {
      transform: scale(1.05); }
  @media (max-width: 767px) {
    .game h3 {
      font-size: 16px; } }

.select {
  width: 392px;
  height: 63px; }
  @media (max-width: 767px) {
    .select {
      width: 80%;
      height: 40px;
      margin: 0 auto; } }
  .select__content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 26px; }
  .select__option {
    z-index: 3200; }
    .select__option_default {
      display: block; }
    .select__option_hover {
      display: none; }
    .select__option:not(.select__option_selected) {
      z-index: 3100;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0; }
  .select__options_grains {
    font-size: 0; }
  .select__options_grains .select__option {
    display: inline-block;
    vertical-align: middle;
    width: 21px;
    height: 29px;
    margin: 0 3px;
    background: url(../images/grain-fill-black.png) center center/contain no-repeat; }
    @media (max-width: 767px) {
      .select__options_grains .select__option {
        width: 14px; } }
  .select__options_grains .select__option:not(.select__option_selected) {
    z-index: 3200;
    position: relative;
    top: auto;
    left: auto;
    opacity: 1;
    background: url(../images/grain-stroke-black.png) center center/contain no-repeat; }
  .select__label {
    margin-left: 10px;
    font-weight: 400; }
    .select__label_default {
      display: block; }
    .select__label_hover {
      display: none; }
  .select__arrow {
    width: 40px;
    height: 110px;
    position: absolute;
    top: -71px;
    bottom: -71px;
    margin: auto;
    opacity: 0; }
    @media (max-width: 767px) {
      .select__arrow {
        height: 30px;
        opacity: 1; } }
    .select__arrow.arrow_left {
      right: 95%;
      background: url(../images/select-arrow-left.svg) center center/contain no-repeat; }
    .select__arrow.arrow_right {
      left: 95%;
      background: url(../images/select-arrow-right.svg) center center/contain no-repeat; }
  @media (min-width: 768px) {
    .select:hover, .select.hovered {
      background: url(../images/select.svg) center center/contain no-repeat; } }
  .select:hover .select__label_default,
  .select.hovered .select__label_default,
  .select:hover .select__option_default,
  .select.hovered .select__option_default {
    display: none; }
  .select:hover .select__label_hover,
  .select.hovered .select__label_hover,
  .select:hover .select__option_hover,
  .select.hovered .select__option_hover {
    display: block; }
  .select:hover .select__arrow,
  .select.hovered .select__arrow {
    opacity: 1; }
  .select:hover .select__options_grains .select__option,
  .select.hovered .select__options_grains .select__option {
    background: url(../images/grain-fill-black.png) center center/contain no-repeat; }
  .select:hover .select__options_grains .select__option:not(.select__option_selected),
  .select.hovered .select__options_grains .select__option:not(.select__option_selected) {
    background: url(../images/grain-stroke-black.png) center center/contain no-repeat; }

.to-game {
  width: 5vw;
  height: 5vw;
  position: absolute;
  left: -3.3vw;
  bottom: 1vh;
  z-index: 5000; }
  @media (max-width: 767px) {
    .to-game {
      width: 15vw;
      height: 15vw; } }
  @media (min-width: 768px) {
    .to-game {
      left: 5.3vw;
      bottom: 5.7vh; } }
  .to-game__cup {
    display: block;
    width: 100%;
    height: 100%; }
  .to-game__mask {
    width: 100%;
    height: 0%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transition: all 0.6s ease ; }
  .to-game__fill {
    width: 5vw;
    height: 5vw;
    position: absolute;
    bottom: 0;
    left: 0; }
    @media (max-width: 767px) {
      .to-game__fill {
        width: 15vw;
        height: 15vw; } }
  .to-game__label {
    white-space: nowrap;
    font-size: 14px;
    position: absolute;
    top: 1.8vw;
    left: 80%;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease ; }
    @media (max-width: 767px) {
      .to-game__label {
        display: none; } }
  .to-game:hover .to-game__mask {
    height: 100%; }
  .to-game:hover .to-game__label {
    left: 100%;
    opacity: 1;
    pointer-events: auto; }

.to-main {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 1vh;
  right: 3vw;
  z-index: 5000;
  transition: all 0.3s ease ; }
  @media (min-width: 768px) {
    .to-main {
      right: 7.4vw;
      bottom: 5.7vh; } }
  .to-main__text {
    font-size: 15px;
    font-weight: bold;
    left: 0;
    transition: all 0.3s ease ;
    margin-left: 20px; }
    @media (max-width: 767px) {
      .to-main__text {
        top: 2px;
        font-size: 13px;
        font-weight: normal; } }
  .to-main__poly {
    width: 20px;
    margin-left: 20px; }
    @media (max-width: 767px) {
      .to-main__poly {
        margin-left: 9px; } }
    .to-main__poly .poly__outline {
      opacity: 0;
      stroke-dashoffset: 0%;
      stroke-dasharray: 0% 100%;
      transition: stroke-dasharray 0.3s ease; }
  .to-main__arrow {
    display: block;
    position: absolute;
    top: -4.1vw;
    right: 4px;
    font-size: 0;
    transition: all 0.3s ease ; }
    .to-main__arrow:before {
      font-size: 2.1vw; }
      @media (max-width: 767px) {
        .to-main__arrow:before {
          font-size: 32px; } }
    @media (max-width: 767px) {
      .to-main__arrow {
        top: -50px; } }
  .to-main:hover .to-main__text {
    left: -1vw; }
  .to-main:hover .to-main__poly .poly__outline {
    opacity: 1;
    stroke-dasharray: 100% 0%; }
  .to-main:hover .to-main__arrow {
    opacity: 1;
    top: -5vw; }

.lock {
  display: none;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
  background: url(../images/bg.jpg) center center/cover no-repeat; }
  .lock__icon {
    display: block;
    max-width: 120px;
    margin: 0 auto 20px; }
  .lock__title {
    text-align: center; }
  @media (max-width: 767px) and (orientation: landscape) {
    .lock {
      display: flex; } }

.coffeefall {
  width: 20px;
  height: 24%;
  position: absolute;
  top: 59%;
  right: 45%;
  overflow: hidden;
  transition: all 0.3s ease ; }
  @media (max-width: 767px) {
    .coffeefall {
      right: 43%; } }
  .coffeefall__img {
    display: block;
    height: 190%;
    position: absolute;
    bottom: 100%;
    left: 0; }
  .coffeefall_done .coffeefall__img {
    bottom: -190%;
    transition: all 3s ease ; }
orm: scale(1.05);
      transform: scale(1.05); }
  .game__to-cups-btn {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    -webkit-transition: all 0.3s ease ;
    transition: all 0.3s ease ; }
    @media (min-width: 768px) {
      .game__to-cups-btn {
        margin-top: -28px;
        margin-bottom: 30px; } }
    .game__to-cups-btn:hover {
      -webkit-transform: scale(1.05);
      transform: scale(1.05); }
  @media (max-width: 767px) {
    .game h3 {
      font-size: 16px; } }

.select {
  width: 392px;
  height: 63px; }
  @media (max-width: 767px) {
    .select {
      width: 80%;
      height: 40px;
      margin: 0 auto; } }
  .select__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 26px; }
  .select__option {
    z-index: 3200; }
    .select__option_default {
      display: block; }
    .select__option_hover {
      display: none; }
    .select__option:not(.select__option_selected) {
      z-index: 3100;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0; }
  .select__options_grains {
    font-size: 0; }
  .select__options_grains .select__option {
    display: inline-block;
    vertical-align: middle;
    width: 21px;
    height: 29px;
    margin: 0 3px;
    background: url(../images/grain-fill-black.png) center center/contain no-repeat; }
    @media (max-width: 767px) {
      .select__options_grains .select__option {
        width: 14px; } }
  .select__options_grains .select__option:not(.select__option_selected) {
    z-index: 3200;
    position: relative;
    top: auto;
    left: auto;
    opacity: 1;
    background: url(../images/grain-stroke-black.png) center center/contain no-repeat; }
  .select__label {
    margin-left: 10px;
    font-weight: 400; }
    .select__label_default {
      display: block; }
    .select__label_hover {
      display: none; }
  .select__arrow {
    width: 40px;
    height: 110px;
    position: absolute;
    top: -71px;
    bottom: -71px;
    margin: auto;
    opacity: 0; }
    @media (max-width: 767px) {
      .select__arrow {
        height: 30px;
        opacity: 1; } }
    .select__arrow.arrow_left {
      right: 95%;
      background: url(../images/select-arrow-left.svg) center center/contain no-repeat; }
    .select__arrow.arrow_right {
      left: 95%;
      background: url(../images/select-arrow-right.svg) center center/contain no-repeat; }
  @media (min-width: 768px) {
    .select:hover, .select.hovered {
      background: url(../images/select.svg) center center/contain no-repeat; } }
  .select:hover .select__label_default,
  .select.hovered .select__label_default,
  .select:hover .select__option_default,
  .select.hovered .select__option_default {
    display: none; }
  .select:hover .select__label_hover,
  .select.hovered .select__label_hover,
  .select:hover .select__option_hover,
  .select.hovered .select__option_hover {
    display: block; }
  .select:hover .select__arrow,
  .select.hovered .select__arrow {
    opacity: 1; }
  .select:hover .select__options_grains .select__option,
  .select.hovered .select__options_grains .select__option {
    background: url(../images/grain-fill-black.png) center center/contain no-repeat; }
  .select:hover .select__options_grains .select__option:not(.select__option_selected),
  .select.hovered .select__options_grains .select__option:not(.select__option_selected) {
    background: url(../images/grain-stroke-black.png) center center/contain no-repeat; }

.to-game {
  width: 5vw;
  height: 5vw;
  position: absolute;
  left: -3.3vw;
  bottom: 1vh;
  z-index: 5000; }
  @media (max-width: 767px) {
    .to-game {
      width: 15vw;
      height: 15vw; } }
  @media (min-width: 768px) {
    .to-game {
      left: 5.3vw;
      bottom: 5.7vh; } }
  .to-game__cup {
    display: block;
    width: 100%;
    height: 100%; }
  .to-game__mask {
    width: 100%;
    height: 0%;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    -webkit-transition: all 0.6s ease ;
    transition: all 0.6s ease ; }
  .to-game__fill {
    width: 5vw;
    height: 5vw;
    position: absolute;
    bottom: 0;
    left: 0; }
    @media (max-width: 767px) {
      .to-game__fill {
        width: 15vw;
        height: 15vw; } }
  .to-game__label {
    white-space: nowrap;
    font-size: 14px;
    position: absolute;
    top: 1.8vw;
    left: 80%;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s ease ;
    transition: all 0.3s ease ; }
    @media (max-width: 767px) {
      .to-game__label {
        display: none; } }
  .to-game:hover .to-game__mask {
    height: 100%; }
  .to-game:hover .to-game__label {
    left: 100%;
    opacity: 1;
    pointer-events: auto; }

.to-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  bottom: 1vh;
  right: 3vw;
  z-index: 5000;
  -webkit-transition: all 0.3s ease ;
  transition: all 0.3s ease ; }
  @media (min-width: 768px) {
    .to-main {
      right: 7.4vw;
      bottom: 5.7vh; } }
  .to-main__text {
    font-size: 15px;
    font-weight: bold;
    left: 0;
    -webkit-transition: all 0.3s ease ;
    transition: all 0.3s ease ;
    margin-left: 20px; }
    @media (max-width: 767px) {
      .to-main__text {
        top: 2px;
        font-size: 13px;
        font-weight: normal; } }
  .to-main__poly {
    width: 20px;
    margin-left: 20px; }
    @media (max-width: 767px) {
      .to-main__poly {
        margin-left: 9px; } }
    .to-main__poly .poly__outline {
      opacity: 0;
      stroke-dashoffset: 0%;
      stroke-dasharray: 0% 100%;
      -webkit-transition: stroke-dasharray 0.3s ease;
      transition: stroke-dasharray 0.3s ease; }
  .to-main__arrow {
    display: block;
    position: absolute;
    top: -4.1vw;
    right: 4px;
    font-size: 0;
    -webkit-transition: all 0.3s ease ;
    transition: all 0.3s ease ; }
    .to-main__arrow:before {
      font-size: 2.1vw; }
      @media (max-width: 767px) {
        .to-main__arrow:before {
          font-size: 32px; } }
    @media (max-width: 767px) {
      .to-main__arrow {
        top: -50px; } }
  .to-main:hover .to-main__text {
    left: -1vw; }
  .to-main:hover .to-main__poly .poly__outline {
    opacity: 1;
    stroke-dasharray: 100% 0%; }
  .to-main:hover .to-main__arrow {
    opacity: 1;
    top: -5vw; }

.lock {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
  background: url(../images/bg.jpg) center center/cover no-repeat; }
  .lock__icon {
    display: block;
    max-width: 120px;
    margin: 0 auto 20px; }
  .lock__title {
    text-align: center; }
  @media (max-width: 767px) and (orientation: landscape) {
    .lock {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; } }

.coffeefall {
  width: 20px;
  height: 24%;
  position: absolute;
  top: 59%;
  right: 45%;
  overflow: hidden;
  -webkit-transition: all 0.3s ease ;
  transition: all 0.3s ease ; }
  @media (max-width: 767px) {
    .coffeefall {
      right: 43%; } }
  .coffeefall__img {
    display: block;
    height: 190%;
    position: absolute;
    bottom: 100%;
    left: 0; }
  .coffeefall_done .coffeefall__img {
    bottom: -190%;
    -webkit-transition: all 3s ease ;
    transition: all 3s ease ; }