/* 
Compile this file to css/custom_zfTujOYZ.css using any SCSS preprocessor. 
More information here: https://slides.gitbook.io/manual/scss
*/
.red {
  background: #f44336 !important;
  color: #fff !important;
}
.red svg {
  fill: #fff !important;
}

.stroke.button.red {
  color: #f44336 !important;
  border-color: #f44336 !important;
}
.stroke.button.red svg {
  fill: #f44336 !important;
}

.lightGreen {
  background: #8ff7eb !important;
  color: #fff !important;
}
.lightGreen svg {
  fill: #fff !important;
}

.stroke.button.lightGreen {
  color: #8ff7eb !important;
  border-color: #8ff7eb !important;
}
.stroke.button.lightGreen svg {
  fill: #8ff7eb !important;
}

.green {
  background: #3aaa3e !important;
  color: #fff !important;
}
.green svg {
  fill: #fff !important;
}

.stroke.button.green {
  color: #3aaa3e !important;
  border-color: #3aaa3e !important;
}
.stroke.button.green svg {
  fill: #3aaa3e !important;
}

.lime {
  background: #e0ef48 !important;
  color: #fff !important;
}
.lime svg {
  fill: #fff !important;
}

.stroke.button.lime {
  color: #e0ef48 !important;
  border-color: #e0ef48 !important;
}
.stroke.button.lime svg {
  fill: #e0ef48 !important;
}

.violet {
  background: #500752 !important;
  color: #fff !important;
}
.violet svg {
  fill: #fff !important;
}

.stroke.button.violet {
  color: #500752 !important;
  border-color: #500752 !important;
}
.stroke.button.violet svg {
  fill: #500752 !important;
}

.lightRed {
  background: #ffdbda !important;
  color: #fff !important;
}
.lightRed svg {
  fill: #fff !important;
}

.stroke.button.lightRed {
  color: #ffdbda !important;
  border-color: #ffdbda !important;
}
.stroke.button.lightRed svg {
  fill: #ffdbda !important;
}

.lightBlue {
  background: #effdff !important;
  color: #fff !important;
}
.lightBlue svg {
  fill: #fff !important;
}

.stroke.button.lightBlue {
  color: #effdff !important;
  border-color: #effdff !important;
}
.stroke.button.lightBlue svg {
  fill: #effdff !important;
}

.text-red {
  color: #f44336 !important;
}
.text-red.button svg {
  fill: #f44336 !important;
}

.text-lightGreen {
  color: #8ff7eb !important;
}
.text-lightGreen.button svg {
  fill: #8ff7eb !important;
}

.text-green {
  color: #3aaa3e !important;
}
.text-green.button svg {
  fill: #3aaa3e !important;
}

.text-lime {
  color: #e0ef48 !important;
}
.text-lime.button svg {
  fill: #e0ef48 !important;
}

.text-violet {
  color: #500752 !important;
}
.text-violet.button svg {
  fill: #500752 !important;
}

.text-lightRed {
  color: #ffdbda !important;
}
.text-lightRed.button svg {
  fill: #ffdbda !important;
}

.text-lightBlue {
  color: #effdff !important;
}
.text-lightBlue.button svg {
  fill: #effdff !important;
}

::-moz-selection {
  background: #3aaa3e;
  color: #fff;
}

::-webkit-selection {
  background: #3aaa3e;
  color: #fff;
}

::selection {
  background: #3aaa3e;
  color: #fff;
}

/* Panel Top 03 */
.panel.top .menu {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.panel.top .menu .tip {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, 70%);
          transform: translate(-50%, 70%);
  pointer-events: none !important;
}
.panel.top .menu .tip svg {
  position: absolute;
  right: 110%;
  bottom: 35%;
  width: 50px;
  height: 30px;
  -webkit-transition: none !important;
  transition: none !important;
}
@media (max-width: 679px) {
  .panel.top .menu .tip {
    display: none;
  }
}
.panel.top .menu li {
  margin: 0 4px;
}
.panel.top .menu span {
  display: block;
  padding: 0 8px;
  line-height: 20px;
  opacity: 1 !important;
  position: relative;
  cursor: pointer;
}
.panel.top .menu span:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: currentcolor;
  -webkit-filter: invert(1);
          filter: invert(1);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}
.panel.top .menu span.js-breakpoint:hover svg, .panel.top .menu span.active svg {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.panel.top .menu span.active:before {
  opacity: 0.2;
}
.panel.top .menu svg {
  display: block;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.panel.top .menu .js-breakpoint svg {
  fill: none !important;
  stroke: currentColor;
}
.panel.top .sections.compact .menu {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: fixed;
  left: 4px;
  top: 50vh;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.panel.top .sections.compact .menu li {
  margin: 8px 0;
}
.panel.top .sections.compact .menu span {
  padding: 4px;
  line-height: 16px;
}
.panel.top .sections.compact .menu span:before {
  width: 32px;
  height: 32px;
  opacity: 1;
  background: rgba(80, 7, 82, 0.75);
  -webkit-filter: none;
          filter: none;
}
.panel.top .sections.compact .menu span.active:before {
  -webkit-transform: translate(-50%, -50%) scale(1.2);
          transform: translate(-50%, -50%) scale(1.2);
  background: #500752;
}
.panel.top .sections.compact .menu span svg {
  width: 16px;
  height: 16px;
}

.stage-2 .panel.top, .stage-3 .panel.top {
  color: #111111 !important;
}

.stage-1 .panel.top .sections .menu, .stage-2 .panel.top .sections .menu, .stage-3 .panel.top .sections .menu, .stage-4 .panel.top .sections .menu {
  opacity: 0 !important;
  visibility: hidden;
}

@media (max-width: 767px) {
  .slides .panel.top {
    background: rgba(80, 7, 82, 0.75) !important;
    color: #fff !important;
  }
}
.sidebar[data-sidebar-id=contacts] .js-form-res {
  display: none;
}
.sidebar[data-sidebar-id=contacts] .js-message-sent + .js-form-res {
  display: block;
}
.sidebar[data-sidebar-id=contacts] svg {
  fill: #111111 !important;
}
.sidebar[data-sidebar-id=contacts] .socials a {
  margin: 0 4px;
  display: inline-block;
}
.sidebar[data-sidebar-id=contacts] .socials a:hover {
  -webkit-transform: scale(1.1) !important;
          transform: scale(1.1) !important;
}
.sidebar[data-sidebar-id=contacts] .socials svg {
  width: 32px;
  height: 32px;
}

/* First screen (#1) */
/* To restrict styles to the current slide, panel, or example use .slide[data-cid="slide-159-ff4137ed"] */
.slide[data-cid=slide-159-ff4137ed] .my-photo {
  max-height: calc(100vh - 120px - 120px);
}

/* Facts (#2) */
/* To restrict styles to the current slide, panel, or example use .slide[data-cid="slide-29-513bc9c8"] */
/* Services (#3) */
.slide[data-cid=slide-112-f7a074da] .container > .wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.slide[data-cid=slide-112-f7a074da] .container > .wrap > .wrap {
  width: 50%;
  min-height: 100vh;
}
.slide[data-cid=slide-112-f7a074da] ul {
  margin-left: 16px;
}
.slide[data-cid=slide-112-f7a074da] ul li {
  list-style-type: disc;
}
@media (max-width: 767px) {
  .slide[data-cid=slide-112-f7a074da] .container > .wrap {
    display: block;
  }
  .slide[data-cid=slide-112-f7a074da] .container > .wrap > .wrap {
    display: block;
    width: 100%;
  }
}

/* Portfolio (#4) */
.anim-scroll-down {
  -webkit-animation: scrollDown 5s ease 0s infinite;
          animation: scrollDown 5s ease 0s infinite;
}

@-webkit-keyframes scrollDown {
  0% {
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  73% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  85% {
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  88% {
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  90% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  92% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  94% {
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  97% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes scrollDown {
  0% {
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  73% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  85% {
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  88% {
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  90% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  92% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  94% {
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  97% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* Portfolio item (#5) */
.custom-tooltip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  -webkit-transform: scale(0.9) translate(-50%, 0);
          transform: scale(0.9) translate(-50%, 0);
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff !important;
  background: #500752 !important;
  font-size: 9px;
  white-space: nowrap;
  pointer-events: none !important;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.custom-tooltip:after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 4px 4px 0 4px;
  border-color: #500752 transparent transparent transparent;
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.portfolio-item.text-black {
  color: #111111 !important;
}
.portfolio-item .custom-row.dirRowReverse .mockup .buttons {
  right: 0%;
  left: auto;
}
.portfolio-item .custom-row.dirRowReverse .mockup .tip {
  left: 0%;
  right: unset;
  text-align: left;
}
.portfolio-item .custom-row.dirRowReverse .mockup .tip svg {
  right: 86%;
  left: unset;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
.portfolio-item .info {
  max-width: 30%;
  padding-right: 30px;
}
.portfolio-item .mockup {
  position: relative;
  width: 60%;
  padding-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.portfolio-item .mockup .inner {
  position: relative;
}
.portfolio-item .mockup .buttons {
  position: absolute;
  bottom: 100%;
  left: 0%;
  -webkit-transform: translate(0%, -20%);
          transform: translate(0%, -20%);
  margin: 0 -5px;
}
.portfolio-item .mockup .buttons .pseudo-button {
  padding: 5px;
  position: relative;
  cursor: pointer;
}
.portfolio-item .mockup .buttons .pseudo-button:hover svg {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.portfolio-item .mockup .buttons .pseudo-button:hover .custom-tooltip {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(-50%, -40%);
          transform: translate(-50%, -40%);
}
.portfolio-item .mockup .buttons svg {
  display: block;
  border-radius: 50%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.portfolio-item .mockup .buttons .js-project-url:hover svg {
  -webkit-box-shadow: inset #3aaa3e 0 0 30px, #3aaa3e 0 0 4px 1px;
          box-shadow: inset #3aaa3e 0 0 30px, #3aaa3e 0 0 4px 1px;
}
.portfolio-item .mockup .buttons .js-report-broken-link:hover svg {
  -webkit-box-shadow: inset #FF9800 0 0 30px, #FF9800 0 0 4px 1px;
          box-shadow: inset #FF9800 0 0 30px, #FF9800 0 0 4px 1px;
}
.portfolio-item .mockup .tip {
  position: absolute;
  bottom: 100%;
  right: 0%;
  -webkit-transform: translate(0%, -40%);
          transform: translate(0%, -40%);
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  pointer-events: none;
}
.portfolio-item .mockup .tip .js-project-url {
  margin: 0 2px;
  display: inline-block;
  vertical-align: middle;
  pointer-events: all;
  cursor: pointer;
}
.portfolio-item .mockup .tip .js-project-url:hover svg {
  -webkit-box-shadow: inset #3aaa3e 0 0 30px, #3aaa3e 0 0 4px 1px;
          box-shadow: inset #3aaa3e 0 0 30px, #3aaa3e 0 0 4px 1px;
}
.portfolio-item .mockup .tip .js-project-url svg {
  display: block;
  border-radius: 50%;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.portfolio-item .mockup .tip .arrow {
  width: 100px;
  position: absolute;
  top: 50%;
  left: 86%;
}
.portfolio-item .mockup img {
  width: unset;
  height: unset;
  max-height: calc(100vh - 250px);
  display: none;
}
.portfolio-item .rect {
  display: block;
  position: absolute;
  overflow: hidden;
  border: 1px solid #CCCCCC;
}
.portfolio-item iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  background: #fff;
}
.portfolio-item .tech {
  margin: 0 -2px;
}
.portfolio-item .tech li {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin: 0 2px 10px 2px;
}
.portfolio-item.whiteSlide .tech li {
  background: rgba(17, 17, 17, 0.1);
}

.breakpoint-desktop .mockup .desktop {
  display: block;
}
.breakpoint-desktop .mockup .rect {
  left: 0%;
  top: 3.4%;
  width: 100%;
  height: 96.6%;
  border-bottom-left-radius: 0.888%;
  border-bottom-right-radius: 0.888%;
}
.breakpoint-desktop .mockup iframe {
  width: 1440px;
  aspect-ratio: 1440/900;
}

.breakpoint-tablet-landscape .mockup .tablet-landscape {
  display: block;
}
.breakpoint-tablet-landscape .mockup .rect {
  left: 8.7%;
  top: 5.9%;
  right: 8.7%;
  bottom: 5.9%;
}
.breakpoint-tablet-landscape .mockup iframe {
  width: 1024px;
  aspect-ratio: 1024/768;
}

.breakpoint-tablet-portrait .custom-row.dirRowReverse .mockup {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.breakpoint-tablet-portrait .mockup {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.breakpoint-tablet-portrait .mockup .tablet-portrait {
  display: block;
}
.breakpoint-tablet-portrait .mockup .rect {
  top: 8.7%;
  left: 5.9%;
  bottom: 8.9%;
  right: 5.9%;
}
.breakpoint-tablet-portrait .mockup iframe {
  width: 768px;
  aspect-ratio: 768/1024;
}

.breakpoint-phone .custom-row.dirRowReverse .mockup {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.breakpoint-phone .mockup {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.breakpoint-phone .mockup .phone {
  display: block;
}
.breakpoint-phone .mockup .rect {
  left: 2.9%;
  top: 5.4%;
  right: 2.9%;
  bottom: 5.4%;
  border-radius: 8.61%/4.19%;
}
.breakpoint-phone .mockup iframe {
  width: 360px;
  aspect-ratio: 360/740;
}

@media (max-width: 767px) {
  .portfolio-item .custom-row, .portfolio-item .custom-row.dirRowReverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
        -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
  }
  .portfolio-item .info {
    max-width: 380px;
    padding-right: 0px;
    margin: 50px auto 0px auto;
  }
  .portfolio-item .mockup {
    margin-top: 50px;
    width: 100%;
  }
  .breakpoint-tablet-portrait .custom-row.dirRowReverse .mockup, .breakpoint-tablet-portrait .mockup, .breakpoint-phone .custom-row.dirRowReverse .mockup, .breakpoint-phone .mockup {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}