@font-face {
    font-family: 'Lato';
    src:
        url('../../assets/fonts/LatoLatin-LightItalic.woff?peze2E') format('woff'),
        url('../../assets/fonts/LatoLatin-LightItalic.woff2?peze2E') format('woff2');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Lato';
    src:
        url('../../assets/fonts/LatoLatin-Light.woff?peze2E') format('woff'),
        url('../../assets/fonts/LatoLatin-Light.woff2?peze2E') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src:
        url('../../assets/fonts/LatoLatin-Regular.woff?peze2E') format('woff'),
        url('../../assets/fonts/LatoLatin-Regular.woff2?peze2E') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Lato';
    src:
        url('../../assets/fonts/LatoLatin-Italic.woff?peze2E') format('woff'),
        url('../../assets/fonts/LatoLatin-Italic.woff2?peze2E') format('woff2');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Lato';
    src:
        url('../../assets/fonts/LatoLatin-Bold.woff?peze2E') format('woff'),
        url('../../assets/fonts/LatoLatin-Bold.woff2?peze2E') format('woff2');
    font-weight: 700;
    font-style: normal;
}

html .no-scroll, body .no-scroll { overflow: hidden; }

.header-one {
    transition: .3s;
}

.logo-head {
    height: 50px;
    transition: .3s;
    width: 197px;
}

.header-one.header-scroll {
    background-color: #f5f7fc;
    padding-top: 18px;
}

.header-one.header-scroll .logo-head {
    height: 40px;
    width: 158px;
}

.shadow-box {
    box-shadow: 6px 6px 20px #d6d6d6;
}

.footer {
    padding: 180px 16px 80px;
}

.bg-all {
    background-color: rgba(247, 249, 254, .6);
}

.box-img {
    height: 0;
    overflow: hidden;
    padding-top: 52%;
    position: relative;
}

.box-img--big {
  padding-top: 104%;
}

.box-img-link:after {
    background-color: #324c5f;
    bottom: 0;
    content: '';
    display: inline-block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .3s;
}

.box-img-desc {
    bottom: 0;
    color: white;
    left: 0;
    opacity: 0;
    padding: 10px 30px;
    position: absolute;
    right: 0;
    transition: .3s;
}

.box-img-link:hover:after {
    opacity: .5;
}

.box-img-link:hover .box-img-desc {
    opacity: 1;
}

.mfp-bottom-bar {
    display: none;
}

.animated-link-menu {
    position: relative;
}

.animated-link-menu:after {
    background: #343841;
    bottom: 0;
    content: '';
    display: inline-block;
    height: 1px;
    left: 0;
    position: absolute;
    transition: all .5s;
    width: 0;
}

.animated-link-menu--blue:after {
    background: #315edb;
}

.animated-link-menu--reverse:after {
    width: 100%;
}

.animated-link-menu:hover:after {
    width: 100%;
}

.animated-link-menu--reverse:hover:after {
    width: 0;
}

.js_submenu { height: 0; overflow: hidden; min-width: 286px; }
.js_submenu.active { height: auto; overflow: hidden; transform: translateY(101%); z-index: 0; }
.partneri-hover:hover .js_submenu { height: auto; overflow: hidden; transform: translateY(101%); z-index: 0; }
.js_submenu > a { position: relative; display: block; padding: 4px 0 4px 14px; transition: .3s; }
.js_submenu > a:last-child { padding-bottom: 12px; }
.js_submenu > a:before { position: absolute; left: 0; top: 10px; display: inline-block; content: ''; width: 6px; height: 6px; border-top: 1px solid #343841; border-right: 1px solid #343841; transform: rotate(45deg); overflow: hidden; transition: .3s; }
.js_submenu > a:after { position: absolute; left: -15px; top: 12px; display: inline-block; content: ''; width: 0; height: 1px; background-color: #343841;  transition: .3s; }
.partneri-hover:hover .js_submenu > a, .js_submenu.active > a { padding-left: 10px; }
.partneri-hover:hover .js_submenu > a:before, .js_submenu.active > a:before { display: inline-block; width: 6px; height: 6px; }
.partneri-hover:hover .js_submenu > a:hover, .js_submenu.active > a:hover { padding-left: 14px; font-weight: bold; }
.partneri-hover:hover .js_submenu > a:hover:before, .js_submenu.active > a:hover:before { display: inline-block; left: 4px; }
.partneri-hover:hover .js_submenu > a:hover:after, .js_submenu.active > a:hover:after { width: 24px; }

@keyframes rotate {
    0% { transform: rotateZ(0deg); }
    25% { transform: rotateZ(90deg); }
    50% { transform: rotateZ(180deg); }
    75% { transform: rotateZ(270deg); }
    100% { transform: rotateZ(360deg); }
}

@keyframes rotate2 {
    0% { transform: rotateZ(0deg); }
    25% { transform: rotateZ(-90deg); }
    50% { transform: rotateZ(-180deg); }
    75% { transform: rotateZ(-270deg); }
    100% { transform: rotateZ(-360deg); }
}

input[type='text']:focus { outline: none; }
input[type='email']:focus { outline: none; }
input[type='tel']:focus { outline: none; }
textarea:focus { outline: none; }

/* 
https://www.sliderrevolution.com/resources/css-animated-background/ 
https://codepen.io/ipsumlorem16/pen/MWwKybx
http://www.java2s.com/example/html-css/svg/use-css-to-fliprotate-horizontally-an-svg-from-center-only-works-with.html
*/

/* .bg-hp-animate-svg path#Path_7555 { animation: rotate 3s normal linear infinite; }
.bg-hp-animate-svg path#Path_7556 { animation: rotate2 4s normal linear infinite; }

.bg-hp-animate-svg path#Path_7557 { animation: rotate 6s normal linear infinite; }
.bg-hp-animate-svg path#Path_7558 { animation: rotate2 8s normal linear infinite; }

.bg-hp-animate-svg path#Path_7559 { animation: rotate 4s normal linear infinite; }
.bg-hp-animate-svg path#Path_7560 { animation: rotate2 5s normal linear infinite; } */

/* 640px */
@media (min-width: 40em) {
    
}

/* 768px */
@media (min-width: 48em) {
    
}

/* 1024px */
@media (min-width: 64em) {
    .logo-head {
        height: 92px;
        width: 362px;
    }

    .footer {
        padding: 380px 16px 80px;
    }
}

/* 1280px */
@media (min-width: 80em) {
    
}


/* Recommended styles for Splitting */

.splitting .word,
    .splitting .char {
  display: inline-block;
}

/* Psuedo-element chars */

.splitting .char {
  position: relative;
}

/**
     * Populate the psuedo elements with the character to allow for expanded effects
     * Set to `display: none` by default; just add `display: block` when you want
     * to use the psuedo elements
     */

.splitting .char::before,
    .splitting .char::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: inherit;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Expanded CSS Variables */

.splitting {
  /* The center word index */
  --word-center: calc((var(--word-total) - 1) / 2);
  /* The center character index */
  --char-center: calc((var(--char-total) - 1) / 2);
  /* The center character index */
  --line-center: calc((var(--line-total) - 1) / 2);
}

.splitting .word {
  /* Pecent (0-1) of the word's position */
  --word-percent: calc(var(--word-index) / var(--word-total));
  /* Pecent (0-1) of the line's position */
  --line-percent: calc(var(--line-index) / var(--line-total));
}

.splitting .char {
  /* Percent (0-1) of the char's position */
  --char-percent: calc(var(--char-index) / var(--char-total));
  /* Offset from center, positive & negative */
  --char-offset: calc(var(--char-index) - var(--char-center));
  /* Absolute distance from center, only positive */
  --distance: calc(
                (var(--char-offset) * var(--char-offset)) / var(--char-center)
        );
  /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
  --distance-sine: calc(var(--char-offset) / var(--char-center));
  /* Distance from center where 1 is far left/far right, 0 is center */
  --distance-percent: calc((var(--distance) / var(--char-center)));
}

.splitting .word {
  opacity: 0;
}

.default-animation {
  opacity: 0;
}

.box-animation-left {
    opacity: 0;
}

.box-animation-right {
    opacity: 0;
}

.box-animation-left.isVisible {
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-name: box-left;
            animation-name: box-left;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}

.box-animation-right.isVisible {
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-name: box-right;
            animation-name: box-right;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}

.splitting.isVisible .word {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-name: def;
          animation-name: def;
  -webkit-animation-delay: calc(50ms + (100ms * var(--word-index)));
          animation-delay: calc(50ms + (100ms * var(--word-index)));
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

.splitting.fast.isVisible .word {
  -webkit-animation-delay: calc(10ms + (20ms * var(--word-index)));
          animation-delay: calc(10ms + (20ms * var(--word-index)));
}

.line.isVisible {
  width: 100%;
  transition: width 1.5s ease-in-out;
}

.default-animation.isVisible {
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-name: def;
          animation-name: def;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

.animated-link:after {
  height: 1px;
  background: #fff;
  bottom: 0;
  left: 0;
  content: '';
  transition: all .5s;
  width: 100%;
  position: absolute;
}

.animated-link:hover:after {
  width: 0;
}

.delay-1.isVisible {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.delay-2.isVisible {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}

.delay-3.isVisible {
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}

.delay-4.isVisible {
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}

@-webkit-keyframes def {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes def {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes box-left {
    0% {
      opacity: 0;
      transform: translateX(-20%);
    }
  
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes box-left {
    0% {
      opacity: 0;
      transform: translateX(-20%);
    }
  
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @-webkit-keyframes box-right {
    0% {
      opacity: 0;
      transform: translateX(20%);
    }
  
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes box-right {
    0% {
      opacity: 0;
      transform: translateX(20%);
    }
  
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }