@font-face {
    font-family: "AvenirNext";
    font-weight: 200;
    font-style: normal;
    src: url("../fonts/AvenirNext-UltraLight.ttf") format("truetype"),
         url("../fonts/AvenirNext-UltraLight.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-UltraLight.woff") format("woff"),
         url("../fonts/AvenirNext-UltraLight.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 200;
    font-style: italic;
    src: url("../fonts/AvenirNext-UltraLightItalic.ttf") format("truetype"),
         url("../fonts/AvenirNext-UltraLightItalic.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-UltraLightItalic.woff") format("woff"),
         url("../fonts/AvenirNext-UltraLightItalic.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 300;
    font-style: normal;
    src: url("../fonts/AvenirNext-Light.ttf") format("truetype"),
         url("../fonts/AvenirNext-Light.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-Light.woff") format("woff"),
         url("../fonts/AvenirNext-Light.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 300;
    font-style: italic;
    src: url("../fonts/AvenirNext-LightItalic.ttf") format("truetype"),
         url("../fonts/AvenirNext-LightItalic.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-LightItalic.woff") format("woff"),
         url("../fonts/AvenirNext-LightItalic.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/AvenirNext-Regular.ttf") format("truetype"),
         url("../fonts/AvenirNext-Regular.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-Regular.woff") format("woff"),
         url("../fonts/AvenirNext-Regular.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 400;
    font-style: italic;
    src: url("../fonts/AvenirNext-Italic.ttf") format("truetype"),
         url("../fonts/AvenirNext-Italic.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-Italic.woff") format("woff"),
         url("../fonts/AvenirNext-Italic.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/AvenirNext-DemiBold.ttf") format("truetype"),
         url("../fonts/AvenirNext-DemiBold.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-DemiBold.woff") format("woff"),
         url("../fonts/AvenirNext-DemiBold.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 500;
    font-style: italic;
    src: url("../fonts/AvenirNext-DemiBoldItalic.ttf") format("truetype"),
         url("../fonts/AvenirNext-DemiBoldItalic.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-DemiBoldItalic.woff") format("woff"),
         url("../fonts/AvenirNext-DemiBoldItalic.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 700;
    font-style: normal;
    src: url("../fonts/AvenirNext-Bold.ttf") format("truetype"),
         url("../fonts/AvenirNext-Bold.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-Bold.woff") format("woff"),
         url("../fonts/AvenirNext-Bold.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 700;
    font-style: italic;
    src: url("../fonts/AvenirNext-BoldItalic.ttf") format("truetype"),
         url("../fonts/AvenirNext-BoldItalic.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-BoldItalic.woff") format("woff"),
         url("../fonts/AvenirNext-BoldItalic.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 900;
    font-style: normal;
    src: url("../fonts/AvenirNext-Heavy.ttf") format("truetype"),
         url("../fonts/AvenirNext-Heavy.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-Heavy.woff") format("woff"),
         url("../fonts/AvenirNext-Heavy.svg") format("svg");
}
@font-face {
    font-family: "AvenirNext";
    font-weight: 900;
    font-style: italic;
    src: url("../fonts/AvenirNext-HeavyItalic.ttf") format("truetype"),
         url("../fonts/AvenirNext-HeavyItalic.eot") format("embedded-opentype"),
         url("../fonts/AvenirNext-HeavyItalic.woff") format("woff"),
         url("../fonts/AvenirNext-HeavyItalic.svg") format("svg");
}



@font-face {
    font-family: "Futura Std";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/Futura Std Book.ttf") format("truetype"),
         url("../fonts/Futura Std Book.eot") format("embedded-opentype"),
         url("../fonts/Futura Std Book.woff") format("woff"),
         url("../fonts/Futura Std Book.svg") format("svg");
}
@font-face {
    font-family: "Futura Std";
    font-weight: 400;
    font-style: italic;
    src: url("../fonts/Futura Std Book Oblique.ttf") format("truetype"),
         url("../fonts/Futura Std Book Oblique.eot") format("embedded-opentype"),
         url("../fonts/Futura Std Book Oblique.woff") format("woff"),
         url("../fonts/Futura Std Book Oblique.svg") format("svg");
}
@font-face {
    font-family: "Futura Std";
    font-weight: 500;
    font-style: normal;
    src: url("../fonts/Futura Std Medium.ttf") format("truetype"),
         url("../fonts/Futura Std Medium.eot") format("embedded-opentype"),
         url("../fonts/Futura Std Medium.woff") format("woff"),
         url("../fonts/Futura Std Medium.svg") format("svg");
}
@font-face {
    font-family: "Futura Std";
    font-weight: 500;
    font-style: italic;
    src: url("../fonts/Futura Std Medium Oblique.ttf") format("truetype"),
         url("../fonts/Futura Std Medium Oblique.eot") format("embedded-opentype"),
         url("../fonts/Futura Std Medium Oblique.woff") format("woff"),
         url("../fonts/Futura Std Medium Oblique.svg") format("svg");
}
@font-face {
    font-family: "Futura Std";
    font-weight: 700;
    font-style: normal;
    src: url("../fonts/Futura Std Bold.ttf") format("truetype"),
         url("../fonts/Futura Std Bold.eot") format("embedded-opentype"),
         url("../fonts/Futura Std Bold.woff") format("woff"),
         url("../fonts/Futura Std Bold.svg") format("svg");
}
@font-face {
    font-family: "Futura Std";
    font-weight: 700;
    font-style: italic;
    src: url("../fonts/Futura Std Bold Oblique.ttf") format("truetype"),
         url("../fonts/Futura Std Bold Oblique.eot") format("embedded-opentype"),
         url("../fonts/Futura Std Bold Oblique.woff") format("woff"),
         url("../fonts/Futura Std Bold Oblique.svg") format("svg");
}
@font-face {
    font-family: "Futura Std";
    font-weight: 300;
    font-style: normal;
    src: url("../fonts/Futura Std Light.ttf") format("truetype"),
         url("../fonts/Futura Std Light.eot") format("embedded-opentype"),
         url("../fonts/Futura Std Light.woff") format("woff"),
         url("../fonts/Futura Std Light.svg") format("svg");
}
@font-face {
    font-family: "Futura Std";
    font-weight: 300;
    font-style: italic;
    src: url("../fonts/Futura Std Light Oblique.ttf") format("truetype"),
         url("../fonts/Futura Std Light Oblique.eot") format("embedded-opentype"),
         url("../fonts/Futura Std Light Oblique.woff") format("woff"),
         url("../fonts/Futura Std Light Oblique.svg") format("svg");
}

@font-face {
    font-family: "Futura PT";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/FuturaPTBook.otf") format("opentype"),
         url("../fonts/FuturaPTBook.eot") format("embedded-opentype"),
         url("../fonts/FuturaPTBook.woff") format("woff"),
         url("../fonts/FuturaPTBook.svg") format("svg");
}
@font-face {
    font-family: "Futura PT";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url("../fonts/FuturaPTBookOblique.otf") format("opentype"),
         url("../fonts/FuturaPTBookOblique.eot") format("embedded-opentype"),
         url("../fonts/FuturaPTBookOblique.woff") format("woff"),
         url("../fonts/FuturaPTBookOblique.svg") format("svg");
}
@font-face {
    font-family: "Futura PT";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/FuturaPTMedium.otf") format("opentype"),
         url("../fonts/FuturaPTMedium.eot") format("embedded-opentype"),
         url("../fonts/FuturaPTMedium.woff") format("woff"),
         url("../fonts/FuturaPTMedium.svg") format("svg");
}
@font-face {
    font-family: "Futura PT";
    font-weight: 500;
    font-style: italic;
    font-display: swap;
    src: url("../fonts/FuturaPTMediumOblique.otf") format("opentype"),
         url("../fonts/FuturaPTMediumOblique.eot") format("embedded-opentype"),
         url("../fonts/FuturaPTMediumOblique.woff") format("woff"),
         url("../fonts/FuturaPTMediumOblique.svg") format("svg");
}
@font-face {
    font-family: "Futura PT";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/FuturaPTBold.otf") format("opentype"),
         url("../fonts/FuturaPTBold.eot") format("embedded-opentype"),
         url("../fonts/FuturaPTBold.woff") format("woff"),
         url("../fonts/FuturaPTBold.svg") format("svg");
}
@font-face {
    font-family: "Futura PT";
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url("../fonts/FuturaPTBoldOblique.otf") format("opentype"),
         url("../fonts/FuturaPTBoldOblique.eot") format("embedded-opentype"),
         url("../fonts/FuturaPTBoldOblique.woff") format("woff"),
         url("../fonts/FuturaPTBoldOblique.svg") format("svg");
}
@font-face {
    font-family: "Futura PT";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/FuturaPTLight.otf") format("opentype"),
         url("../fonts/FuturaPTLight.eot") format("embedded-opentype"),
         url("../fonts/FuturaPTLight.woff") format("woff"),
         url("../fonts/FuturaPTLight.svg") format("svg");
}
@font-face {
    font-family: "Futura PT";
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    src: url("../fonts/FuturaPTLightOblique.otf") format("opentype"),
         url("../fonts/FuturaPTLightOblique.eot") format("embedded-opentype"),
         url("../fonts/FuturaPTLightOblique.woff") format("woff"),
         url("../fonts/FuturaPTLightOblique.svg") format("svg");
}
/*
Edited YUI CSS Reset

Copyright (c) 2011, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html, version: 2.9.0
*/
html {
  color: #000;
  background: #FFF;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}

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

fieldset, img {
  border: 0;
}

address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var {
  font: inherit;
}

del, ins {
  text-decoration: none;
}

li {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: baseline;
}

sub {
  vertical-align: baseline;
}

legend {
  color: #000;
}

a {
  color: inherit;
  text-decoration: none;
}

header, footer, section, nav {
  display: block;
}

body {
  font-family: "Futura PT";
  font-family: "AvenirNext";
}

html, body, .scroll-container {
  height: 100%;
  overflow: hidden;
}

.main-logo {
  z-index: 99;
  position: absolute;
  top: 60px;
  left: 20px;
}
@media screen and (min-width: 1208px) {
  .main-logo {
    left: calc(50% - 600px + 16px);
  }
}
.main-logo.small a {
  padding-left: 0;
  margin-left: 0;
  transition-delay: 0;
}
.main-logo a {
  transition-delay: 0.5s;
  transition: 0.3s;
  height: 18px;
  position: relative;
  font-family: "Futura Std";
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
  display: block;
}
@media screen and (min-width: 1208px) {
  .main-logo a {
    padding-left: 34px;
  }
}
@media screen and (max-width: 999px) {
  .main-logo a {
    margin-left: -19px;
  }
}
.main-logo a em {
  display: inline-block;
  vertical-align: middle;
}
.main-logo a > em {
  margin-top: 2px;
}
.main-logo a span {
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  width: 62px;
  transition: 0.2s;
  transition-delay: 0.2s;
  vertical-align: middle;
  padding-right: 1px;
}
.main-logo a span.new em {
  -webkit-animation-name: main-logo-anim;
          animation-name: main-logo-anim;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
.main-logo a span.new em:nth-of-type(1) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.main-logo a span.new em:nth-of-type(2) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.main-logo a span.new em:nth-of-type(3) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
.main-logo a span.new em:nth-of-type(4) {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
@-webkit-keyframes main-logo-anim {
  from {
    -webkit-transform: translateX(-15px);
            transform: translateX(-15px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
}
@keyframes main-logo-anim {
  from {
    -webkit-transform: translateX(-15px);
            transform: translateX(-15px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
  }
}
.main-logo::before {
  box-sizing: border-box;
  border: 3px solid #1498d5;
  transition: 0.2s ease-out;
  width: 6px;
  height: 6px;
  content: "";
  display: block;
  position: absolute;
  border-radius: 27px;
  left: 5px;
  top: 12px;
  opacity: 0;
}
.main-logo.small span {
  width: 0;
  padding-right: 0;
  transition-delay: 0s;
}
.main-logo.small::before {
  width: 54px;
  height: 54px;
  left: -19px;
  top: -12px;
  opacity: 1;
}
.main-logo.svg.small::before {
  opacity: 0;
}
.main-logo svg {
  cursor: pointer;
  position: absolute;
  width: 54px;
  height: 54px;
  left: -19px;
  top: -12px;
}
.main-logo svg path {
  stroke: #1498d5;
  fill: transparent;
  stroke-width: 4px;
}

.red .main-logo svg path,
.red .main-logo::before {
  border-color: white;
  stroke: white;
}

section {
  position: relative;
  overflow: hidden;
}

.intro {
  height: 100vh;
  min-height: 600px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

section.oc-gray {
  background: #fafafa;
}

section .ext-bg {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  /*     transition: height .5s; */
}
section .ext-bg .ext-bg-overlay > div {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation-name: "introshow";
          animation-name: "introshow";
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
section .ext-bg .ext-bg-overlay > div:nth-of-type(1) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
section .ext-bg .ext-bg-overlay > div:nth-of-type(2) {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}
section .ext-bg .ext-bg-overlay > div:nth-of-type(3) {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
section .ext-bg .ext-bg-overlay > div:nth-of-type(4) {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}
section .ext-bg .ext-bg-overlay > div:nth-of-type(5) {
  -webkit-animation-delay: 2.4s;
          animation-delay: 2.4s;
}
section .ext-bg .ext-bg-overlay > div:nth-of-type(6) {
  -webkit-animation-delay: 2.6s;
          animation-delay: 2.6s;
}
section .ext-bg .ext-bg-overlay > div:nth-of-type(7) {
  -webkit-animation-delay: 2.8s;
          animation-delay: 2.8s;
}
section .ext-bg .ext-bg-overlay > div:nth-of-type(8) {
  -webkit-animation-delay: 2.9s;
          animation-delay: 2.9s;
}
section .ext-bg .ext-bg-overlay > div:nth-of-type(9) {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}
@-webkit-keyframes introshow {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);
    margin-top: 0px;
    opacity: 1;
  }
}
@keyframes introshow {
  from {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  to {
    -webkit-transform: scale(1) translate(-50%, -50%);
            transform: scale(1) translate(-50%, -50%);
    margin-top: 0px;
    opacity: 1;
  }
}
section .ext-bg .ext-bg-overlay {
  height: 100%;
  max-height: 100vh;
  width: 100%;
  position: relative;
}

section.red {
  color: white;
}

section.animated1 .ext-bg {
  height: 100% !important;
  width: 100% !important;
  transition: 0.5s height;
}

section.oexpert .ext-bg {
  width: 0;
  height: 100%;
  transition: 0.5s width;
}

section.oexpert.animated1 .ext-bg {
  width: 100%;
}

section.black .ext-bg {
  height: 0;
  width: 100%;
  transition: 0.5s height;
}

section.red .ext-bg {
  background: #1498d5;
  height: 0;
  width: 100%;
  transition: 0.5s height;
}

section.white .ext-bg {
  background: #fff;
  height: 100%;
  width: 0;
  transition: 0.5s width;
}

section.gray .ext-bg {
  background: #f4f4f4;
  height: 100%;
  width: 0;
  transition: 0.5s width;
}
section.gray .intro-content .intro-intro::after {
  background: #1498d5;
}

section.oc-red {
  background: #1498d5;
}

section.black {
  color: white;
}
section.black .ext-bg {
  background: #000;
}
section.black .intro-content .intro-intro::after {
  background: #1498d5;
}
section.black .intro-content .intro-ending {
  color: #1498d5;
}
section.black .menu-handle .menu-handle-a {
  background: #1498d5;
}
section.black .menu-handle .add-link {
  color: #1498d5;
}
section.black .cap-list h3 {
  color: white;
  min-height: 0;
}
section.black .cmail {
  color: #1498d5;
}
section.black .cap-list > li {
  border-color: #1498d5;
}
section.black .splintro {
  color: white;
}

section.page404 .ext-bg {
  background: white;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-perspective: 200vh;
          perspective: 200vh;
}
section.page404 .ext-bg .ext-bg-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 0.2s;
}
section.page404 .ext-bg .ext-bg-2.bg.grey {
  background: #f4f4f4;
}
section.page404 .ext-bg .ext-bg-2.bg.white {
  background: #ffffff;
}
section.page404 .ext-bg .ext-bg-2.bg.red {
  background: #1498d5;
}
section.page404 .ext-bg .ext-bg-2.bg.red .intro-content .intro-intro::after {
  background: white;
}
section.page404 .ext-bg .ext-bg-2.red .intro-content .intro-intro,
section.page404 .ext-bg .ext-bg-2.red .intro-content .intro-heading,
section.page404 .ext-bg .ext-bg-2.red .intro-content .intro-ending {
  color: white;
}
section.page404 .ext-bg .ext-bg-2.bg.black {
  background: #000000;
}
section.page404 .ext-bg .ext-bg-2.black .intro-content .intro-heading {
  color: white;
}
section.page404 .ext-bg .ext-bg-2 .intro-content {
  transition: 0.3s bottom ease-out;
  position: absolute;
  right: 50%;
  bottom: 50vh;
  -webkit-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
}
@media screen and (max-width: 767px) {
  section.page404 .ext-bg .ext-bg-2 .intro-content {
    width: 58%;
  }
}
section.page404 .ext-bg .ext-bg-2 .intro-content .intro-intro,
section.page404 .ext-bg .ext-bg-2 .intro-content .intro-heading .word,
section.page404 .ext-bg .ext-bg-2 .intro-content .intro-heading,
section.page404 .ext-bg .ext-bg-2 .intro-content .intro-ending {
  transition: 0.2s;
}
section.page404 .ext-bg .ext-bg-3 {
  position: absolute;
  bottom: 0%;
  left: 0;
  width: 100%;
  height: 100%;
}
section.page404 .ext-bg .ext-bg-3 > div > div {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
section.page404 .ext-bg .intro-ending span {
  margin-left: 5px;
  color: white;
  position: relative;
  display: inline-block;
}
section.page404 .ext-bg .intro-ending span svg {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.menu-handle {
  z-index: 99;
  position: absolute;
  top: 48px;
  right: 20px;
  -webkit-animation-name: menu-handle-start;
          animation-name: menu-handle-start;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
@media screen and (min-width: 1240px) {
  .menu-handle {
    right: calc(50% - 600px);
  }
}
@-webkit-keyframes menu-handle-start {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes menu-handle-start {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.menu-handle .add-link {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
  -webkit-animation-name: menu-handle-start;
          animation-name: menu-handle-start;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
.menu-handle .add-link span {
  display: inline-block;
}
.menu-handle .add-link a {
  position: relative;
}
.menu-handle .add-link a::after {
  position: absolute;
  height: 1px;
  transition: 0.2s ease-out;
  content: "";
  display: block;
  width: 0%;
  bottom: 0;
  left: 0;
  background: #1498d5;
}
.menu-handle .add-link a:hover::after {
  width: 100%;
}
.menu-handle .add-link a.hovered span {
  -webkit-animation-name: add-link-anim;
          animation-name: add-link-anim;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
}
.menu-handle .add-link a.hovered span:nth-of-type(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.menu-handle .add-link a.hovered span:nth-of-type(2) {
  -webkit-animation-delay: 0.06s;
          animation-delay: 0.06s;
}
.menu-handle .add-link a.hovered span:nth-of-type(3) {
  -webkit-animation-delay: 0.12s;
          animation-delay: 0.12s;
}
.menu-handle .add-link a.hovered span:nth-of-type(4) {
  -webkit-animation-delay: 0.18s;
          animation-delay: 0.18s;
}
.menu-handle .add-link a.hovered span:nth-of-type(5) {
  -webkit-animation-delay: 0.24s;
          animation-delay: 0.24s;
}
.menu-handle .add-link a.hovered span:nth-of-type(6) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.menu-handle .add-link a.hovered span:nth-of-type(7) {
  -webkit-animation-delay: 0.36s;
          animation-delay: 0.36s;
}
.menu-handle .add-link a.hovered span:nth-of-type(8) {
  -webkit-animation-delay: 0.42s;
          animation-delay: 0.42s;
}
.menu-handle .add-link a.hovered span:nth-of-type(9) {
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}
.menu-handle .add-link a.hovered span:nth-of-type(10) {
  -webkit-animation-delay: 0.54s;
          animation-delay: 0.54s;
}
.menu-handle .add-link a.hovered span:nth-of-type(11) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.menu-handle .add-link a.hovered span:nth-of-type(12) {
  -webkit-animation-delay: 0.66s;
          animation-delay: 0.66s;
}
.menu-handle .add-link a.hovered span:nth-of-type(13) {
  -webkit-animation-delay: 0.72s;
          animation-delay: 0.72s;
}
.menu-handle .add-link a.hovered span:nth-of-type(14) {
  -webkit-animation-delay: 0.78s;
          animation-delay: 0.78s;
}
@-webkit-keyframes add-link-anim {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes add-link-anim {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.menu-handle .menu-handle-a {
  vertical-align: middle;
  display: inline-block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 25px;
  background: white;
  position: relative;
}
.menu-handle .menu-handle-a span, .menu-handle .menu-handle-a::before, .menu-handle .menu-handle-a::after {
  content: "";
  display: block;
  height: 1px;
  width: 20px;
  background: black;
  position: absolute;
  right: 15px;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
.menu-handle .menu-handle-a::before {
  top: 20px;
  -webkit-animation-name: menu-handle1;
          animation-name: menu-handle1;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.menu-handle .menu-handle-a span {
  top: 25px;
  width: 15px;
  -webkit-animation-name: menu-handle2;
          animation-name: menu-handle2;
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
.menu-handle .menu-handle-a::after {
  top: 30px;
  -webkit-animation-name: menu-handle1;
          animation-name: menu-handle1;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
@-webkit-keyframes menu-handle1 {
  from {
    width: 0;
  }
  to {
    width: 20px;
  }
}
@keyframes menu-handle1 {
  from {
    width: 0;
  }
  to {
    width: 20px;
  }
}
@-webkit-keyframes menu-handle2 {
  from {
    width: 0;
  }
  to {
    width: 15px;
  }
}
@keyframes menu-handle2 {
  from {
    width: 0;
  }
  to {
    width: 15px;
  }
}

section.red .menu-handle .menu-handle-a span, section.red .menu-handle .menu-handle-a::before, section.red .menu-handle .menu-handle-a::after {
  background: #1498d5;
}

section.red .menu-handle .add-link a::after {
  background: white;
}

.scroll-up-container {
  position: absolute;
  bottom: 0;
  right: 55px;
}
@media screen and (min-width: 1240px) {
  .scroll-up-container {
    right: calc(50% - 565px);
  }
}

@media screen and (max-width: 767px) {
  .scroll-up-container {
    display: none;
  }

  section.intro .scroll-up-container {
    display: block;
  }
}
.scroll-up {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-animation-name: "scrollshow";
          animation-name: "scrollshow";
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  white-space: nowrap;
  overflow: hidden;
  height: 20px;
  font-size: 12px;
  text-transform: uppercase;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  color: white;
  cursor: pointer;
}
@-webkit-keyframes "scrollshow" {
  from {
    -webkit-transform: rotate(90deg) translateX(-100px);
            transform: rotate(90deg) translateX(-100px);
    padding-left: 100px;
    width: 0px;
    color: black;
  }
  90% {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: black;
  }
  to {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: white;
  }
}
@keyframes "scrollshow" {
  from {
    -webkit-transform: rotate(90deg) translateX(-100px);
            transform: rotate(90deg) translateX(-100px);
    padding-left: 100px;
    width: 0px;
    color: black;
  }
  90% {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: black;
  }
  to {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: white;
  }
}
.scroll-up::before {
  content: "";
  width: 50px;
  height: 1px;
  background: white;
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  margin-top: -2px;
  -webkit-animation-name: "scrollshow2";
          animation-name: "scrollshow2";
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
@-webkit-keyframes "scrollshow2" {
  from {
    background: black;
  }
  90% {
    background: black;
  }
  to {
    background: white;
  }
}
@keyframes "scrollshow2" {
  from {
    background: black;
  }
  90% {
    background: black;
  }
  to {
    background: white;
  }
}
.scroll-up a {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.scroll-up.idle a, .scroll-up:hover a {
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-name: "scrollhover";
          animation-name: "scrollhover";
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
}
@-webkit-keyframes "scrollhover" {
  from {
    width: 40px;
    opacity: 1;
  }
  28% {
    width: 40px;
    opacity: 0;
  }
  29% {
    width: 0px;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  to {
    width: 40px;
    opacity: 1;
  }
}
@keyframes "scrollhover" {
  from {
    width: 40px;
    opacity: 1;
  }
  28% {
    width: 40px;
    opacity: 0;
  }
  29% {
    width: 0px;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  to {
    width: 40px;
    opacity: 1;
  }
}

section.black .scroll-up {
  color: white;
  -webkit-animation-name: scrollshowblack;
          animation-name: scrollshowblack;
}

@-webkit-keyframes "scrollshowblack" {
  from {
    -webkit-transform: rotate(90deg) translateX(-100px);
            transform: rotate(90deg) translateX(-100px);
    padding-left: 100px;
    width: 0px;
    color: #1498d5;
  }
  90% {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: #1498d5;
  }
  to {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: white;
  }
}

@keyframes "scrollshowblack" {
  from {
    -webkit-transform: rotate(90deg) translateX(-100px);
            transform: rotate(90deg) translateX(-100px);
    padding-left: 100px;
    width: 0px;
    color: #1498d5;
  }
  90% {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: #1498d5;
  }
  to {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: white;
  }
}
section.black .scroll-up::before {
  background: white;
  -webkit-animation-name: scrollshowblack2;
          animation-name: scrollshowblack2;
}

@-webkit-keyframes "scrollshowblack2" {
  from {
    background: #1498d5;
  }
  90% {
    background: #1498d5;
  }
  to {
    background: white;
  }
}

@keyframes "scrollshowblack2" {
  from {
    background: #1498d5;
  }
  90% {
    background: #1498d5;
  }
  to {
    background: white;
  }
}
section.gray .scroll-up,
section.white .scroll-up {
  color: black;
  -webkit-animation-name: scrollshowlight;
          animation-name: scrollshowlight;
}
@-webkit-keyframes "scrollshowlight" {
  from {
    -webkit-transform: rotate(90deg) translateX(-100px);
            transform: rotate(90deg) translateX(-100px);
    padding-left: 100px;
    width: 0px;
    color: black;
  }
  90% {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: black;
  }
  to {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: black;
  }
}
@keyframes "scrollshowlight" {
  from {
    -webkit-transform: rotate(90deg) translateX(-100px);
            transform: rotate(90deg) translateX(-100px);
    padding-left: 100px;
    width: 0px;
    color: black;
  }
  90% {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: black;
  }
  to {
    width: 100px;
    padding-left: 0;
    -webkit-transform: rotate(90deg) translateX(0px);
            transform: rotate(90deg) translateX(0px);
    color: black;
  }
}
section.gray .scroll-up::before,
section.white .scroll-up::before {
  background: black;
  -webkit-animation-name: scrollshowlight2;
          animation-name: scrollshowlight2;
}
@-webkit-keyframes "scrollshowlight2" {
  from {
    background: black;
  }
  90% {
    background: black;
  }
  to {
    background: black;
  }
}
@keyframes "scrollshowlight2" {
  from {
    background: black;
  }
  90% {
    background: black;
  }
  to {
    background: black;
  }
}

.page-name {
  position: absolute;
  bottom: 0;
  left: 50px;
  font-size: 12px;
  text-transform: uppercase;
}
@media screen and (min-width: 1240px) {
  .page-name {
    left: calc(50% - 570px);
  }
}
@media screen and (max-width: 767px) {
  .page-name {
    display: none;
  }
}
.page-name span {
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  display: block;
  overflow: hidden;
  -webkit-animation-name: page-name-animation;
          animation-name: page-name-animation;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
@-webkit-keyframes page-name-animation {
  from {
    width: 0;
  }
  to {
    width: 200px;
  }
}
@keyframes page-name-animation {
  from {
    width: 0;
  }
  to {
    width: 200px;
  }
}

section.white .page-name,
section.grey .page-name {
  color: #1498d5;
}

.intro:first-of-type .page-name {
  display: none;
}

section.white {
  /*  .scroll-up::before {
      background: black;
    }*/
}
section.white .main-logo {
  color: #1498d5;
}
section.white .menu-handle .menu-handle-a {
  background: black;
}
section.white .menu-handle .menu-handle-a span, section.white .menu-handle .menu-handle-a::before, section.white .menu-handle .menu-handle-a::after {
  background: white;
}

section.gray {
  /*.scroll-up::before {
    background: black;
  }*/
}
section.gray .main-logo {
  color: #1498d5;
}
section.gray .menu-handle .menu-handle-a {
  background: black;
}
section.gray .menu-handle .menu-handle-a span, section.gray .menu-handle .menu-handle-a::before, section.gray .menu-handle .menu-handle-a::after {
  background: white;
}

section.black .main-logo {
  color: #1498d5;
}

section:first-of-type .intro-content .intro-heading .word.animated,
section:first-of-type .intro-content .intro-ending.animated,
section:first-of-type .intro-content .intro-intro.animated {
  transition-delay: 1.5s;
}

.intro-content {
  position: relative;
  pointer-events: none;
}
.intro-content .intro-heading {
  visibility: hidden;
  font-size: 64px;
  font-weight: bold;
  font-family: "Futura PT";
  line-height: 80px;
  /*     padding-left: 90px; */
  margin: 30px 0;
}
.intro-content .intro-heading.rendered {
  visibility: visible;
}
.intro-content .intro-heading .word {
  display: inline-block;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.intro-content .intro-heading .word.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.intro-content .intro-ending {
  font-size: 18px;
  font-weight: bold;
  /*     padding-left: 90px; */
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.intro-content .intro-ending.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.intro-content .intro-intro {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.intro-content .intro-intro.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.intro-content .intro-intro::after {
  content: "";
  width: 0px;
  height: 1px;
  background: white;
  margin-top: 25px;
  display: block;
  transition: width 0.3s 0.15s, -webkit-transform 0.3s;
  transition: width 0.3s 0.15s, transform 0.3s;
  transition: width 0.3s 0.15s, transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}
.intro-content .intro-intro.animated::after {
  width: 60px;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}
.intro-content .open-count {
  /*     padding-left: 90px; */
  margin-top: 30px;
  font-weight: 500;
  font-size: 18px;
  color: #1498d5;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.intro-content .open-count.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.intro-content .open-count span {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 44px;
  border: 4px solid #1498d5;
  border: 0px solid transparent;
  text-align: center;
  line-height: 45px;
  font-size: 24px;
  font-weight: 600;
  margin-left: 10px;
  border-radius: 22px;
}
.intro-content .open-count span svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.white .intro-intro, .white .intro-ending {
  color: #1498d5;
}
.white .intro-intro::after {
  background: #1498d5;
}

.foot-intro {
  height: 640px;
}

.container {
  max-width: 1100px;
  padding: 0 20px;
  margin: 0 auto;
}

footer {
  overflow: hidden;
  position: relative;
  color: white;
  background: #000000;
  padding: 50px 0 20px;
}
footer .finfo {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  margin-bottom: 70px;
}
footer .finfo .fslogan {
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  max-width: 220px;
  max-width: 240px;
  margin-top: 34px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
footer .finfo .fcontact {
  width: 320px;
}
footer .finfo .fcontact div {
  margin-top: 6px;
}
footer .finfo .fcontact a {
  display: inline-block;
  line-height: 34px;
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: #1498d5;
  transition: 0.2s ease-out;
}
footer .finfo .fcontact a::after {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  bottom: 0;
  content: "";
  background: #1498d5;
  transition: 0.2s ease-out;
}
footer .finfo .fcontact a:hover {
  color: white;
}
footer .finfo .fcontact a.tel:hover {
  color: #1498d5;
}
footer .finfo .fcontact a:hover::after {
  width: 0;
}
footer .finfo .fcontact a.tel::after {
  display: none;
}
footer .finfo .fcontact h4, footer .finfo .fcontact > div {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
footer .finfo .fcontact h4.animated, footer .finfo .fcontact > div.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
footer h4 {
  margin-bottom: 15px;
}
footer .fcs {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: flex-end;
          align-items: flex-end;
}
footer .fcopy {
  color: #666;
  font-size: 12px;
  line-height: 22px;
  width: calc(100% - 350px);
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
footer .fcopy a {
  display: inline-block;
  position: relative;
  margin-left: 10px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
footer .fcopy a::after {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  bottom: 0;
  content: "";
  background: #666;
  transition: 0.2s ease-out;
}
footer .fcopy a:hover::after {
  width: 0;
}
footer .fsocial {
  min-width: 320px;
  font-size: 14px;
}
footer .fsocial a {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
footer .fsocial a::after {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  bottom: 0;
  content: "";
  background: #1498d5;
  transition: 0.2s ease-out;
}
footer .fsocial a:hover::after {
  width: 0;
}
footer.animated .fslogan {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
footer.animated .fcontact h4,
footer.animated .fcontact div {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition-delay: 0.25s;
}
footer.animated .fcopy {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition-delay: 0.5s;
}
footer.animated .fcopy a {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition-delay: 0.65s;
}
footer.animated .fcopy a:nth-of-type(2) {
  transition-delay: 0.8s;
}
footer.animated .fsocial a {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
footer.animated .fsocial a:nth-of-type(1) {
  transition-delay: 0.95s;
}
footer.animated .fsocial a:nth-of-type(2) {
  transition-delay: 1.1s;
}
footer.animated .fsocial a:nth-of-type(3) {
  transition-delay: 1.25s;
}
footer.animated .fsocial a:nth-of-type(4) {
  transition-delay: 1.4s;
}

h4 {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
}

h1 {
  font-size: 40px;
  font-weight: bold;
  line-height: 46px;
  margin: 15px 0;
}

h2 {
  font-size: 36px;
  font-weight: bold;
  line-height: 40px;
  margin: 15px 0;
}

h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 26px;
  margin: 15px 0 8px;
}

.sect-head {
  padding-top: 140px;
  margin: 0 0 30px;
  position: relative;
  padding-bottom: 24px;
}
.sect-head .note {
  font-size: 14px;
  color: #999;
}
.sect-head::before {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #1498d5;
  content: "";
  display: block;
  width: 0;
  transition: 0.5s;
}
.sect-head.animated::before {
  width: 60px;
}
.sect-head .note, .sect-head h2 {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.sect-head.animated h2,
.sect-head .note.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.proj-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: flex-start;
          align-items: flex-start;
}
.proj-list li {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  position: relative;
  width: 45.454%;
  margin-bottom: 100px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
  transition-delay: 0.2s;
}
.proj-list li .img {
  height: 600px;
  position: relative;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: 0.5s;
  overflow: hidden;
}
.proj-list li .img a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.proj-list li .img img {
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: 0.5s;
}
.proj-list li .img::before, .proj-list li .img::after {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
}
.proj-list li .img::after {
  background: #1498d5;
}
.proj-list li.animated .img::before {
  width: 0%;
  transition: 0.5s 0.6s;
}
.proj-list li.animated .img::after {
  width: 0%;
  transition: 0.5s 0.3s;
}
.proj-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  z-index: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: 0.5s;
}
.proj-list li:hover .img, .proj-list li:hover::before {
  -webkit-transform: scale(0.95);
          transform: scale(0.95);
  transition: 0.6s;
}
.proj-list li:hover::before {
  background: rgba(0, 0, 0, 0.5);
  transition: 0.6s;
}
.proj-list li:hover img {
  -webkit-transform: scale(1.1) translateX(50%) rotate3d(0, 1, 0, 5deg) translateX(-50%);
          transform: scale(1.1) translateX(50%) rotate3d(0, 1, 0, 5deg) translateX(-50%);
  -webkit-transform: scale(1.054) translateX(50%) rotate3d(0, 1, 0, 5deg) translateX(-50%) translateY(-15px);
          transform: scale(1.054) translateX(50%) rotate3d(0, 1, 0, 5deg) translateX(-50%) translateY(-15px);
  transition: 0.6s;
}
.proj-list li .detail {
  left: 60px;
  bottom: 60px;
  position: absolute;
  color: white;
  z-index: 1;
}
.proj-list li .ptitle {
  font-size: 30px;
  font-family: "Futura PT";
  font-weight: bold;
  line-height: 42px;
}
.proj-list li .tech {
  /*       color: #999; */
  font-weight: 500;
  font-size: 14px;
  margin-top: 4px;
}
.proj-list li.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.proj-list li a.fulllink {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.proj-list li.hidden {
  display: none;
}
.proj-list.featured li:nth-of-type(1), .proj-list.featured li:nth-of-type(2) {
  width: 100%;
}
.proj-list.featured li:nth-of-type(1) .detail, .proj-list.featured li:nth-of-type(2) .detail {
  left: 50%;
  max-width: 45%;
}
.proj-list.featured li:nth-of-type(1) .detail .ptitle, .proj-list.featured li:nth-of-type(2) .detail .ptitle {
  font-size: 36px;
}

.plus-link {
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.plus-link a {
  pointer-events: auto;
  display: inline-block;
  z-index: 0;
  position: relative;
  padding-left: 10px;
  padding-right: 40px;
  margin-left: -10px;
}
.plus-link a::after {
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  vertical-align: middle;
  content: "+";
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #f9f9f9;
  border-radius: 15px;
  margin-left: 20px;
  font-weight: normal;
  padding-left: 0;
  transition: 0.3s padding-left;
}
.plus-link a:hover::after {
  padding-left: calc(100% - 30px);
}
.plus-link.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

section.red .plus-link a::after {
  background: #000000;
}

.pro-list .plus-link {
  text-align: center;
  margin: 75px 0;
  position: relative;
}

.pro-list {
  padding-bottom: 90px;
}

.foot-intro .plus-link {
  /*   padding-left: 90px; */
  margin-top: 70px;
  font-size: 24px;
}

.oexpert {
  padding: 75px 0 85px;
  background: #fafafa;
}
.oexpert h2 {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.oexpert h2.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.oesplit {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: center;
          align-items: center;
}
.oesplit > div:nth-of-type(1) {
  width: 40%;
}
.oesplit > div:nth-of-type(2) {
  width: 50%;
}

.splintro {
  font-weight: 500;
  font-size: 14px;
  color: #9b9b9b;
  line-height: 24px;
  padding-bottom: 24px;
  position: relative;
}
.splintro::after {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  width: 0px;
  transition: 0.5s;
  background: #1498d5;
  bottom: 0;
  left: 0;
}
.splintro.animated::after {
  width: 60px;
}
.splintro p {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.splintro.animated p {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.oexplist ul {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: flex-end;
          align-items: flex-end;
}
.oexplist ul li {
  white-space: nowrap;
  text-align: center;
}
.oexplist ul li span {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.oexplist ul svg,
.oexplist ul img {
  display: inline-block;
  height: 38px;
}
.oexplist ul span {
  display: block;
  font-weight: 600;
  font-size: 18px;
  margin-top: 10px;
}
.oexplist.animated ul li {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.oexplist.animated ul li span {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.oexplist.animated ul li:nth-of-type(1) span {
  transition-delay: 0.8s;
}
.oexplist.animated ul li:nth-of-type(2) span {
  transition-delay: 2.05s;
}
.oexplist.animated ul li:nth-of-type(3) span {
  transition-delay: 3.3s;
}
.oexplist.animated ul li:nth-of-type(4) span {
  transition-delay: 4.55s;
}

.splitcontent {
  padding: 140px 0 100px;
}
.splitcontent .container {
  position: relative;
  margin-bottom: 90px;
}
.splitcontent.animated .gensplitc > div:nth-of-type(1) {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.splitcontent .gensplitc {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-align-items: flex-start;
          align-items: flex-start;
}
.splitcontent .gensplitc > div:nth-of-type(1) {
  width: 310px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.splitcontent .gensplitc > div:nth-of-type(1).fullw {
  width: 100%;
}
.splitcontent .gensplitc > div:nth-of-type(1).fullw .splintro {
  max-width: 310px;
}
.splitcontent .gensplitc > div:nth-of-type(2) {
  width: calc(100% - 350px);
  padding-top: 75px;
  font-size: 18px;
  font-weight: 500;
  color: #999;
  line-height: 1.9em;
}
.splitcontent .gensplitc > div:nth-of-type(2) p {
  margin-bottom: 25px;
}
.splitcontent .gensplitc > div:nth-of-type(2).method-steps {
  width: calc(100% - 380px);
  padding-top: 0;
}
.splitcontent .gensplitc > div.emph-text {
  color: #000;
}
.splitcontent .gensplitc dl dt {
  color: #1498d5;
}
.splitcontent .gensplitc dl dd {
  margin-bottom: 25px;
}
.splitcontent .gensplitc > div:last-child > .animated {
  transition-delay: 0.9s;
}

.gensplitc > div > .splintro,
.gensplitc > div > h2,
.gensplitc > div:last-child > * {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.gensplitc > div > .splintro.animated,
.gensplitc > div > h2.animated,
.gensplitc > div:last-child > *.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.hashtags {
  color: #1498d5;
  font-size: 18px;
  line-height: 36px;
}
.hashtags span {
  display: inline-block;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}

.splintro.animated .hashtags span {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.splintro.animated .hashtags span:nth-of-type(1) {
  transition-delay: 0.3s;
}
.splintro.animated .hashtags span:nth-of-type(2) {
  transition-delay: 0.6s;
}
.splintro.animated .hashtags span:nth-of-type(3) {
  transition-delay: 0.9s;
}
.splintro.animated .hashtags span:nth-of-type(4) {
  transition-delay: 1.2s;
}
.splintro.animated .hashtags span:nth-of-type(5) {
  transition-delay: 1.5s;
}
.splintro.animated .hashtags span:nth-of-type(6) {
  transition-delay: 1.8s;
}
.splintro.animated .hashtags span:nth-of-type(7) {
  transition-delay: 2.1s;
}
.splintro.animated .hashtags span:nth-of-type(8) {
  transition-delay: 2.4s;
}

.cap-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}
.cap-list > li {
  width: calc(50% - 23px);
  box-sizing: border-box;
  /*     border: 1px solid #eeeeee; */
  margin-bottom: 46px;
  padding: 28px;
  text-align: center;
}
.cap-list > li.notitle {
  /*       display: -webkit-flex; */
  /*       display: flex; */
  /*       justify-content: center; */
  padding-left: 10px;
}
.cap-list > li.notitle > div {
  text-align: left;
}
@media screen and (max-width: 767px) {
  .cap-list > li.notitle > div {
    text-align: center;
  }
}
.cap-list > li.notitle.oneline > div {
  text-align: center;
}
.cap-list h3 {
  margin-top: 10px;
  font-size: 18px;
  color: black;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 25px;
  min-height: 50px;
  margin-bottom: 25px;
}

.acc-body ul,
.cap-lin {
  font-size: 14px;
  line-height: 20px;
}
.acc-body ul li,
.cap-lin li {
  position: relative;
  /*     padding-left: 20px; */
  margin-bottom: 15px;
}
.acc-body ul li::before,
.cap-lin li::before {
  position: absolute;
  display: block;
  height: 1px;
  width: 12px;
  /*       content: ""; */
  background: #1498d5;
  top: 9px;
  left: 0;
}
.acc-body ul li span,
.cap-lin li span {
  display: block;
  margin-top: 15px;
  color: #1498d5;
}

.acc-body ul > li {
  margin-left: 20px;
  list-style: disc;
}

.cap-list > li a {
  display: inline-block;
}
.cap-list > li a,
.cap-list > li ul > li,
.cap-list > li h3 {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.cap-list > li.animated a,
.cap-list > li.animated ul > li,
.cap-list > li.animated h3 {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.cap-list > li.animated h3 {
  transition-delay: 0.7s;
}
.cap-list > li.animated a {
  transition-delay: 1s;
}
.cap-list > li.animated ul > li:nth-of-type(1) {
  transition-delay: 1s;
}
.cap-list > li.animated ul > li:nth-of-type(2) {
  transition-delay: 1.1s;
}
.cap-list > li.animated ul > li:nth-of-type(3) {
  transition-delay: 1.2s;
}
.cap-list > li.animated ul > li:nth-of-type(4) {
  transition-delay: 1.3s;
}
.cap-list > li.animated ul > li:nth-of-type(5) {
  transition-delay: 1.4s;
}
.cap-list > li.animated ul > li:nth-of-type(6) {
  transition-delay: 1.5s;
}
.cap-list > li.animated ul > li:nth-of-type(7) {
  transition-delay: 1.6s;
}
.cap-list > li.animated ul > li:nth-of-type(8) {
  transition-delay: 1.7s;
}
.cap-list > li.animated ul > li:nth-of-type(9) {
  transition-delay: 1.8s;
}

.accordeons {
  padding-top: 140px;
}
.accordeons .container {
  position: relative;
}

.introfw-text {
  font-size: 18px;
  font-weight: 500;
  color: black;
  line-height: 25px;
  line-height: 1.9em;
  padding-right: 200px;
  margin-bottom: 90px;
}
.introfw-text p {
  margin-bottom: 25px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.introfw-text p.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.introfw-text a {
  display: inline-block;
  position: relative;
}
.introfw-text a::after {
  position: absolute;
  height: 1px;
  transition: 0.2s ease-out;
  content: "";
  display: block;
  width: 100%;
  bottom: 0;
  right: 0;
  background: #1498d5;
}
.introfw-text a:hover::after {
  width: 0;
}

.accordeon > li {
  margin-bottom: 80px;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.accordeon > li.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.accordeon h2 {
  font-size: 36px;
  font-family: "Futura PT";
  font-weight: bold;
  color: black;
}
.accordeon .open h2 {
  color: #1498d5;
}
.accordeon .acc-head {
  position: relative;
  z-index: 1;
}
.accordeon .acc-head .toggle {
  position: relative;
  z-index: 1;
  float: right;
  font-weight: 500;
  font-size: 18px;
  color: #9b9b9b;
  color: #1498d5;
  display: block;
  border-bottom: 1px solid #1498d5;
  margin-right: 24px;
}
.accordeon .acc-head .toggle span:last-of-type {
  display: none;
}
@media screen and (max-width: 1239px) {
  .accordeon .acc-head .toggle {
    margin-right: calc(644px - 50vw);
  }
}
@media screen and (max-width: 1139px) {
  .accordeon .acc-head .toggle {
    margin-right: 74px;
  }
}
@media screen and (max-width: 760px) {
  .accordeon .acc-head .toggle {
    margin-right: 0;
  }
}
.accordeon .acc-head .location {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: #9b9b9b;
  padding-bottom: 25px;
  margin-top: 25px;
  position: relative;
  clear: both;
}
.accordeon .acc-head .location::before {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #1498d5;
  content: "";
  display: block;
  width: 60px;
}
.accordeon .open .acc-head .toggle {
  color: #9b9b9b;
  border-color: #9b9b9b;
}
.accordeon .open .acc-head .toggle span:last-of-type {
  display: inline;
}
.accordeon .open .acc-head .toggle span:first-of-type {
  display: none;
}
.accordeon .acc-body {
  padding-right: 120px;
  overflow: hidden;
  display: none;
}
.accordeon .acc-body h3 {
  margin-top: 45px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.accordeon .acc-body ul,
.accordeon .acc-body .cap-lin {
  color: #9b9b9b;
  margin-bottom: 70px;
  line-height: 20px;
}
.accordeon .acc-body .apply {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid #1498d5;
  font-size: 18px;
  font-weight: 500;
}
.accordeon .open .acc-body {
  height: auto;
  display: block;
}

.cap-list li.emph {
  border-color: transparent;
  height: 145px;
  position: relative;
  -webkit-perspective: 500px;
          perspective: 500px;
}
.cap-list li.emph .cmail {
  color: white;
}
.cap-list li.emph > div {
  border-color: #1498d5;
  background: #1498d5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 28px;
  box-sizing: border-box;
  transition: 0.5s -webkit-transform;
  transition: 0.5s transform;
  transition: 0.5s transform, 0.5s -webkit-transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.cap-list li.emph > div.side-face {
  background: white;
}
.cap-list li.emph > div.side-face h3 {
  color: #1498d5;
}
.cap-list li.emph > div.side-face .cmail {
  color: black;
}
.cap-list li.emph > div.side-face .cmail::after {
  background: black;
}
.cap-list li.emph > div.front-face {
  -webkit-transform: translateZ(-72px) rotate3d(1, 0, 0, 0deg) translateZ(72px);
          transform: translateZ(-72px) rotate3d(1, 0, 0, 0deg) translateZ(72px);
  /*       transform-origin: 50% 50% -72px; */
}
.cap-list li.emph > div.side-face {
  -webkit-transform: translateZ(-72px) rotate3d(1, 0, 0, -90deg) translateZ(72px);
          transform: translateZ(-72px) rotate3d(1, 0, 0, -90deg) translateZ(72px);
  /*       transform-origin: 50% 50% -72px; */
}
.cap-list li.emph:hover > div.front-face {
  -webkit-transform: translateZ(-72px) rotate3d(1, 0, 0, 90deg) translateZ(72px);
          transform: translateZ(-72px) rotate3d(1, 0, 0, 90deg) translateZ(72px);
}
.cap-list li.emph:hover > div.side-face {
  -webkit-transform: translateZ(-72px) rotate3d(1, 0, 0, 0deg) translateZ(72px);
          transform: translateZ(-72px) rotate3d(1, 0, 0, 0deg) translateZ(72px);
}
.cap-list li.noborder {
  border-color: transparent !important;
}

.method-steps {
  counter-reset: method-steps;
  position: relative;
}
.method-steps .steps-svg {
  width: 790px;
  height: 1520px;
  margin: -15px 0 0 -15px;
}
.method-steps li {
  margin-bottom: 60px;
}
.method-steps li .title {
  color: #1498d5;
  font-weight: bold;
  font-size: 24px;
  line-height: 30px;
  padding: 7px 0;
  position: relative;
  margin-bottom: 12px;
}
.method-steps li .title::before {
  counter-increment: method-steps;
  content: counter(method-steps);
  display: block;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  text-align: center;
  border: 3px solid #1498d5;
  background: black;
  line-height: 38px;
  font-weight: 600;
  position: absolute;
  top: 0;
  border-radius: 22px;
  transition: 0.5s;
}
.method-steps li.current .title::before {
  color: black;
  background: #1498d5;
}
.method-steps li .content {
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  color: #999;
  max-width: 500px;
}
.method-steps li:nth-of-type(2n+1) .title {
  padding-left: 56px;
}
.method-steps li:nth-of-type(2n+1) .title::before {
  left: 0;
}
.method-steps li:nth-of-type(2n+1) .content {
  padding-left: 56px;
}
.method-steps li:nth-of-type(2n) {
  text-align: right;
}
.method-steps li:nth-of-type(2n) .title {
  padding-right: 56px;
}
.method-steps li:nth-of-type(2n) .title::before {
  right: 0;
}
.method-steps li:nth-of-type(2n) .content {
  padding-right: 56px;
  margin: 0 0 0 auto;
}
.method-steps ol {
  position: relative;
  height: 1550px;
}
.method-steps ol > li:nth-of-type(1) {
  height: 250px;
}
.method-steps ol > li:nth-of-type(2) {
  height: 209px;
}
.method-steps ol > li:nth-of-type(3) {
  height: 250px;
}
.method-steps ol > li:nth-of-type(4) {
  height: 210px;
}
.method-steps ol > li:nth-of-type(5) {
  height: 255px;
}
.method-steps ol > li:nth-of-type(6) {
  height: 150px;
}
.method-steps svg {
  bottom: 0;
  right: 0;
  position: absolute;
  top: 40px;
  left: -25px;
}

.menu {
  visibility: hidden;
  position: fixed;
  top: 73px;
  right: 60px;
  width: 0;
  height: 0;
  overflow: hidden;
  transition: 0.5s;
  border-radius: 100%;
  z-index: 101;
}
@media screen and (min-width: 1300px) {
  .menu {
    right: calc(50vw - 575px);
  }
}
.menu .menu-container {
  position: absolute;
  top: -73px;
  right: -60px;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  transition: 0.5s;
}
@media screen and (min-width: 1300px) {
  .menu .menu-container {
    right: calc(-50vw + 575px);
  }
}
.menu .contactinfo > *,
.menu ul.lang > li {
  opacity: 0;
  -webkit-transform: translateX(30px);
          transform: translateX(30px);
  transition: 0.5s;
}
.menu nav ul li {
  opacity: 0;
  -webkit-transform: translateX(-30px);
          transform: translateX(-30px);
  transition: 0.5s;
}
.menu.mopen {
  top: calc(73px - 142vh);
  right: calc(165px - 142vw);
  top: calc(73px - 142vmax);
  right: calc(165px - 142vmax);
  width: 284vw;
  height: 284vh;
  width: 284vmax;
  height: 284vmax;
  visibility: visible;
}
.menu.mopen ul.lang > li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.menu.mopen ul.lang > li:nth-child(1) {
  transition-delay: 2.4s;
}
.menu.mopen ul.lang > li:nth-child(2) {
  transition-delay: 2.7s;
}
.menu.mopen .contactinfo > * {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.menu.mopen .contactinfo > *:nth-child(1) {
  transition-delay: 3s;
}
.menu.mopen .contactinfo > *:nth-child(2) {
  transition-delay: 3.3s;
}
.menu.mopen .contactinfo > *:nth-child(3) {
  transition-delay: 3.6s;
}
.menu.mopen nav ul li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.menu.mopen nav ul li:nth-child(1) {
  transition-delay: 0.4s;
}
.menu.mopen nav ul li:nth-child(2) {
  transition-delay: 0.7s;
}
.menu.mopen nav ul li:nth-child(3) {
  transition-delay: 1s;
}
.menu.mopen nav ul li:nth-child(4) {
  transition-delay: 1.3s;
}
.menu.mopen nav ul li:nth-child(5) {
  transition-delay: 1.6s;
}
.menu.mopen nav ul li:nth-child(6) {
  transition-delay: 1.9s;
}
.menu.mopen nav ul li:nth-child(7) {
  transition-delay: 2.1s;
}
@media screen and (min-width: 1300px) {
  .menu.mopen {
    right: calc(50vw - 525px - 142vw);
  }
}
.menu.mopen .menu-container {
  top: calc(142vh - 73px);
  right: calc(142vw - 165px);
  top: calc(142vmax - 73px);
  right: calc(142vmax - 165px);
}
@media screen and (min-width: 1300px) {
  .menu.mopen .menu-container {
    right: calc(525px - 50vw + 142vw);
  }
}
.menu .menu-handle .menu-handle-a span, .menu .menu-handle .menu-handle-a::before, .menu .menu-handle .menu-handle-a::after {
  content: "";
  display: block;
  height: 1px;
  width: 20px;
  background: black;
  position: absolute;
  right: 15px;
}
.menu .menu-handle .menu-handle-a::before {
  top: 25px;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.menu .menu-handle .menu-handle-a span {
  display: none;
}
.menu .menu-handle .menu-handle-a::after {
  top: 25px;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.menu nav ul {
  position: absolute;
  top: 15vh;
  height: 70vh;
  left: calc(50% - 430px);
  width: 430px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: space-around;
          justify-content: space-around;
}
.menu nav ul li {
  font-size: 48px;
  font-family: "Futura PT";
  font-weight: bold;
  line-height: 50px;
}
.menu nav ul li a {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  vertical-align: middle;
  transition: 0.2s ease-out;
}
.menu nav ul li a > span {
  color: #1498d5;
  border: 2px solid #1498d5;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  border-radius: 16px;
  margin-left: 12px;
  font-size: 18px;
}
.menu nav ul li:not(.active) a:hover {
  color: #1498d5;
}
.menu nav ul li:not(.active) a:hover::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  bottom: 0;
  content: "";
  background: #1498d5;
  transition: 0.2s ease-out;
  -webkit-animation-name: menu-hover;
          animation-name: menu-hover;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
@-webkit-keyframes menu-hover {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
@keyframes menu-hover {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}
.menu nav ul li.active a {
  color: #1498d5;
}
.menu nav ul li.active a::after {
  position: absolute;
  right: 0;
  width: 100%;
  height: 3px;
  bottom: 0;
  content: "";
  background: #1498d5;
  transition: 0.2s ease-out;
}
.menu nav ul li.active a:hover::after {
  width: 0;
}
.menu .lang {
  position: absolute;
  top: 140px;
  width: 100px;
  right: 95px;
  text-align: right;
  font-size: 18px;
  font-weight: 500;
}
@media screen and (min-width: 1240px) {
  .menu .lang {
    right: calc(50% - 525px);
  }
}
.menu .lang li {
  margin-bottom: 10px;
}
.menu .lang li.active {
  color: #1498d5;
}
.menu .lang a {
  display: inline-block;
  position: relative;
  line-height: 24px;
  padding-bottom: 3px;
}
.menu .lang a::after {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  bottom: 0;
  content: "";
  background: #1498d5;
  transition: 0.2s ease-out;
}
.menu .lang a:hover::after {
  width: 0;
}
.menu .contactinfo {
  position: absolute;
  bottom: 18.5vh;
  width: 180px;
  right: 95px;
  text-align: right;
  font-size: 18px;
  font-weight: 500;
}
@media screen and (min-width: 1240px) {
  .menu .contactinfo {
    right: calc(50% - 525px);
  }
}
.menu .contactinfo h4 {
  margin-bottom: 20px;
}
.menu .contactinfo div {
  color: #1498d5;
  white-space: nowrap;
  margin-bottom: 10px;
}
.menu .contactinfo a {
  position: relative;
  padding-bottom: 3px;
}
.menu .contactinfo a::after {
  position: absolute;
  right: 0;
  width: 100%;
  height: 1px;
  bottom: 0;
  content: "";
  background: #1498d5;
  transition: 0.2s ease-out;
}
.menu .contactinfo a:hover::after {
  width: 0;
}
.menu .main-logo {
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
}

.tech-list {
  height: 320px;
  position: relative;
}
.tech-list .tech-item {
  cursor: pointer;
  position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 50px;
  background: #1498d5;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: 0.3s -webkit-transform;
  transition: 0.3s transform;
  transition: 0.3s transform, 0.3s -webkit-transform;
  margin-left: -50px;
  margin-top: -50px;
  box-sizing: border-box;
  border: 4px solid #1498d5;
}
@media screen and (max-width: 767px) {
  .tech-list .tech-item {
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    font-size: 12px;
  }
}
.tech-list .tech-item:hover {
  background: white;
  color: #1498d5;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-animation-name: tech-item-pulse;
          animation-name: tech-item-pulse;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes tech-item-pulse {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(20, 152, 213, 0.66);
  }
  100% {
    box-shadow: 0px 0px 0px 40px rgba(20, 152, 213, 0);
  }
}
@keyframes tech-item-pulse {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(20, 152, 213, 0.66);
  }
  100% {
    box-shadow: 0px 0px 0px 40px rgba(20, 152, 213, 0);
  }
}
.tech-list .tech-item span {
  display: block;
}
.tech-list .tech-item.animated {
  -webkit-transform: scale(1);
          transform: scale(1);
  /*&:nth-of-type(1) { transition-delay: 0.0s; }
  &:nth-of-type(2) { transition-delay: 0.2s; }
  &:nth-of-type(3) { transition-delay: 0.4s; }
  &:nth-of-type(4) { transition-delay: 0.6s; }
  &:nth-of-type(5) { transition-delay: 0.8s; }
  &:nth-of-type(6) { transition-delay: 1.0s; }
  &:nth-of-type(7) { transition-delay: 1.2s; }
  &:nth-of-type(8) { transition-delay: 1.4s; }
  &:nth-of-type(9) { transition-delay: 1.6s; }
  &:nth-of-type(10) { transition-delay: 1.8s; }
  &:nth-of-type(11) { transition-delay: 2.0s; }
  &:nth-of-type(12) { transition-delay: 2.2s; }
  &:nth-of-type(13) { transition-delay: 2.4s; }
  &:nth-of-type(14) { transition-delay: 2.6s; }
  &:nth-of-type(15) { transition-delay: 2.8s; }
  &:nth-of-type(16) { transition-delay: 3.0s; }
  &:nth-of-type(17) { transition-delay: 3.2s; }*/
}
.tech-list .tech-item.animated:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.method h2,
.method .splintro,
.method .method-steps {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.method h2.animated,
.method .splintro.animated,
.method .method-steps.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  transition-delay: 0.4s;
}
.method h2 ol li .title span,
.method .splintro ol li .title span,
.method .method-steps ol li .title span {
  display: block;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.method h2 ol li.animated .title span,
.method .splintro ol li.animated .title span,
.method .method-steps ol li.animated .title span {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.method h2 ol li .content,
.method .splintro ol li .content,
.method .method-steps ol li .content {
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.method h2 ol li.animated .content,
.method .splintro ol li.animated .content,
.method .method-steps ol li.animated .content {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  transition-delay: 0.4s;
}

.client-list-container .client-list {
  position: relative;
  z-index: 2;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  padding-bottom: 50px;
}
.client-list-container .client-list li {
  min-width: 33%;
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 50px;
  /*       padding: 20px; */
  box-sizing: border-box;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.client-list-container .client-list.animated li {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.client-list-container .client-list.animated li:nth-of-type(1) {
  transition-delay: 0s;
}
.client-list-container .client-list.animated li:nth-of-type(2) {
  transition-delay: 0.3s;
}
.client-list-container .client-list.animated li:nth-of-type(3) {
  transition-delay: 0.6s;
}
.client-list-container .client-list.animated li:nth-of-type(4) {
  transition-delay: 0.9s;
}
.client-list-container .client-list.animated li:nth-of-type(5) {
  transition-delay: 1.2s;
}
.client-list-container .client-list.animated li:nth-of-type(6) {
  transition-delay: 1.5s;
}
.client-list-container .client-list.animated li:nth-of-type(7) {
  transition-delay: 1.8s;
}
.client-list-container .client-list.animated li:nth-of-type(8) {
  transition-delay: 2.1s;
}
.client-list-container .client-list.animated li:nth-of-type(9) {
  transition-delay: 2.4s;
}
.client-list-container .client-list.animated li:nth-of-type(10) {
  transition-delay: 2.7s;
}
.client-list-container .client-list.animated li:nth-of-type(11) {
  transition-delay: 3s;
}
.client-list-container .client-list.animated li:nth-of-type(12) {
  transition-delay: 3.3s;
}
.client-list-container .client-list img {
  /*       max-width: 150px; */
  padding: 0 20px;
  max-height: 75px;
}
.client-list-container .more {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
  text-transform: uppercase;
  color: #1498d5;
  font-size: 12px;
  letter-spacing: 0.2em;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  opacity: 0;
  transition: 0.5s;
}
.client-list-container .more.animated {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  transition-delay: 1s;
}

a.cmail,
.content-text a {
  display: inline-block;
  position: relative;
}
a.cmail::after,
.content-text a::after {
  position: absolute;
  height: 1px;
  transition: 0.2s ease-out;
  content: "";
  display: block;
  width: 100%;
  bottom: 0;
  right: 0;
  background: #1498d5;
}
a.cmail:hover::after,
.content-text a:hover::after {
  width: 0;
}

a.cmail::after {
  background: white;
}

.content-text {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  /*   padding: 120px 0 50px; */
  padding: 0px 0 50px;
  line-height: 1.9em;
}
.content-text h2 {
  margin-bottom: 1em;
}
.content-text p {
  margin-bottom: 1em;
}
.content-text ul {
  margin-bottom: 1.4em;
}
.content-text ul li {
  margin-left: 25px;
  margin-bottom: 0.2em;
  list-style: disc;
}
.content-text ol {
  margin-bottom: 1.4em;
}
.content-text ol li {
  margin-left: 25px;
  margin-bottom: 0.2em;
  list-style: decimal;
}
.content-text strong {
  font-weight: bold;
}
.content-text em {
  font-style: italic;
}

.mouse-anim {
  z-index: 102;
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(192, 192, 192, 0.75);
  width: 24px;
  height: 24px;
  position: fixed;
  top: 30px;
  left: 30px;
  border-radius: 12px;
  transition: 0.5s border-color, 0.5s opacity;
}
.mouse-anim.visible {
  opacity: 1;
}
.mouse-anim.visible.hidden {
  opacity: 0;
}
.mouse-anim::after {
  content: "";
  width: 4px;
  height: 4px;
  position: absolute;
  top: 10px;
  left: 10px;
  background: #000000;
  border-radius: 2px;
}
.mouse-anim::before {
  content: "";
  width: 1px;
  height: 1px;
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(240, 240, 240, 0.5);
  transition: 0.5s;
  border-radius: 100px;
}
.mouse-anim.hovered {
  border-color: rgba(240, 240, 240, 0);
}
.mouse-anim.hovered::before {
  width: 64px;
  height: 64px;
  top: -20px;
  left: -20px;
}

section.splitcontent.white + section.splitcontent.white,
section.splitcontent.gray + section.splitcontent.gray,
section.splitcontent.red + section.splitcontent.red,
section.splitcontent.black + section.splitcontent.black {
  padding-top: 1px;
  margin-top: -100px;
}

.typeform {
  z-index: 102;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0%;
  height: 100%;
  transition: 0.5s;
  background: white;
  visibility: hidden;
}
.typeform.active {
  width: 100%;
  visibility: visible;
}
.typeform .menu-handle .menu-handle-a span, .typeform .menu-handle .menu-handle-a::before, .typeform .menu-handle .menu-handle-a::after {
  content: "";
  display: block;
  height: 1px;
  width: 20px;
  background: black;
  position: absolute;
  right: 15px;
}
.typeform .menu-handle .menu-handle-a::before {
  top: 25px;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.typeform .menu-handle .menu-handle-a span {
  display: none;
}
.typeform .menu-handle .menu-handle-a::after {
  top: 25px;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.typeform .tfcontainer {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
}
.typeform .tfcontainer .question-list {
  height: 100%;
}
.typeform .tfcontainer .question-list ul.questions {
  width: 100%;
  height: 100%;
  position: relative;
}
.typeform .tfcontainer .question-list ul.questions li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.typeform .tfcontainer .question-list ul.questions li > div {
  min-width: 300px;
  width: 60%;
  max-width: 800px;
  margin: auto;
  padding: 20px 10px 60px;
}
.typeform .tfcontainer .question-list div.before-send,
.typeform .tfcontainer .question-list div.after-send {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}
.typeform .tfcontainer .question-list div.before-send > div,
.typeform .tfcontainer .question-list div.after-send > div {
  min-width: 300px;
  width: 60%;
  max-width: 800px;
  margin: auto;
  padding: 20px 10px 60px;
}
.typeform .tfcontainer .question-list h3 {
  font-size: 24px;
  line-height: 1.2em;
  margin: 0 0 10px;
}
.typeform .tfcontainer .question-list h3 span, .typeform .tfcontainer .question-list h3 em {
  color: #1498d5;
  font-size: 18px;
  font-weight: bold;
}
.typeform .tfcontainer .question-list div.question-intro {
  font-size: 20px;
  line-height: 24px;
  line-height: 1.4em;
  color: #666;
  margin-bottom: 24px;
}
.typeform .tfcontainer .question-list div.question-intro p {
  margin-bottom: 24px;
}
.typeform .tfcontainer .question-list .actions em {
  margin-left: 10px;
}
.typeform .tfcontainer .question-list .actions em strong {
  font-weight: bold;
}
.typeform .tfcontainer .question-list .actions button {
  border: 0px none;
  background: #1498d5;
  color: white;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px;
}
.typeform .tfcontainer .question-list .actions button.next-question {
  background: black;
}
.typeform .tfcontainer .question-list .actions button.next-question:disabled, .typeform .tfcontainer .question-list .actions button:disabled {
  background: #eee;
}
.typeform .tfcontainer .question-list .actions button.send-button {
  margin: auto;
  display: block;
  padding: 10px 40px;
}
.typeform .tfcontainer .question-list .summary li {
  margin: 5px 0;
  display: block;
}
.typeform .tfcontainer .question-list .summary li h3 {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  margin: 0 0 12px;
}
.typeform .tfcontainer .question-list .summary li h3 span, .typeform .tfcontainer .question-list .summary li h3 em {
  font-size: 16px;
}
.typeform .tfcontainer .question-list .summary li .question-intro {
  font-size: 14px;
  line-height: 20px;
  color: #666;
  margin: -8px 0 8px;
}
.typeform .tfcontainer .question-list .summary li .question-intro p {
  margin-bottom: 8px;
}
.typeform .tfcontainer .question-list .summary li .answer {
  font-weight: 500;
  font-size: 14px;
  color: black;
  margin-bottom: 40px;
}
.typeform .tfcontainer .q-slide-enter {
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}
.typeform .tfcontainer .q-slide-enter-to {
  transition: 0.5s;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.typeform .tfcontainer .q-slide-leave {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.typeform .tfcontainer .q-slide-leave-to {
  transition: 0.5s;
  opacity: 0;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
}
.typeform .tfcontainer .q-slide-rev-enter {
  opacity: 0;
  -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
}
.typeform .tfcontainer .q-slide-rev-enter-to {
  transition: 0.5s;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.typeform .tfcontainer .q-slide-rev-leave {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.typeform .tfcontainer .q-slide-rev-leave-to {
  transition: 0.5s;
  opacity: 0;
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}
.typeform .tfcontainer .navigation {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: #f4f4f4;
}
.typeform .tfcontainer .navigation > a {
  cursor: pointer;
  position: absolute;
  top: 8px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  text-align: center;
  color: white;
  background: #1498d5;
}
.typeform .tfcontainer .navigation > a.disabled {
  opacity: 0.3333;
}
.typeform .tfcontainer .navigation > a.prev {
  right: 40px;
}
.typeform .tfcontainer .navigation > a.next {
  right: 10px;
}
.typeform .tfcontainer .answer {
  margin-bottom: 10px;
}
.typeform .tfcontainer .answer > input,
.typeform .tfcontainer .answer textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 2px 4px;
  height: 26px;
  border: 0px none;
  border-bottom: 1px solid #eee;
  -webkit-appearance: none;
  border-radius: 0;
  outline: none;
}
.typeform .tfcontainer .answer > input:focus,
.typeform .tfcontainer .answer textarea:focus {
  border-color: #999;
}
.typeform .tfcontainer .answer .textarea {
  position: relative;
}
.typeform .tfcontainer .answer .textarea > div {
  visibility: hidden;
  padding: 2px 4px 4px;
}
.typeform .tfcontainer .answer .textarea > textarea {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  resize: none;
}
.typeform .tfcontainer .answer.error > input,
.typeform .tfcontainer .answer.error textarea {
  border-color: #1498d5;
}
.typeform .tfcontainer .answer.error > input:focus,
.typeform .tfcontainer .answer.error textarea:focus {
  border-color: #1498d5;
}
.typeform .tfcontainer p.error {
  margin-bottom: 1em;
  color: #1498d5;
}
.typeform .tfcontainer .q-select label {
  display: block;
  margin-bottom: 8px;
}
.typeform .tfcontainer .q-select label::before {
  content: "";
  vertical-align: middle;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent;
  box-sizing: border-box;
  border: 1px solid #ccc;
  position: relative;
  margin-right: 15px;
}
.typeform .tfcontainer .q-select label.checkbox.checked::before {
  border-color: #1498d5;
  box-shadow: 0px 2px 1px #982929, 0px 0px 0px 1px rgba(255, 255, 255, 0.75) inset;
  background: url("../img/check.svg") 50% 50% no-repeat #1498d5;
  background-size: 11px 8px;
}
.typeform .tfcontainer .q-select label.radio::before {
  border-radius: 10px;
}
.typeform .tfcontainer .q-select label.radio.checked::before {
  border-color: #1498d5;
  box-shadow: 0px 2px 1px #982929, 0px 0px 0px 1px rgba(255, 255, 255, 0.75) inset;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Ym94PSIwIDAgOCA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxjaXJjbGUgcj0iNCIgY3g9IjQiIGN5PSI0IiBmaWxsPSIjZmZmZmZmIiAvPgo8L3N2Zz4KCg==") 50% 50% no-repeat #1498d5;
  background-size: 8px 8px;
}
.typeform .tfcontainer .q-select label input {
  display: none;
  vertical-align: middle;
}

[vue-dyn] {
  opacity: 0;
}

.mobile-only {
  display: none;
}

@media only screen and (max-width: 767px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }
}
@media only screen and (max-width: 1099px) {
  .splitcontent .gensplitc {
    display: block;
  }

  .splitcontent .gensplitc > div:nth-of-type(2) {
    width: 100%;
  }

  .splitcontent .gensplitc > div:nth-of-type(2).method-steps {
    width: 100%;
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
  }

  .page-name {
    display: none;
  }

  .proj-list {
    padding: 0 40px;
  }
}
@media only screen and (max-width: 999px) {
  .intro-content {
    padding: 0 20px;
    padding: 0;
  }

  .intro-content .intro-heading {
    font-size: 48px;
    line-height: 64px;
  }

  .main-logo {
    left: 38px;
    top: 40px;
  }

  .menu-handle {
    top: 30px;
    right: 20px;
  }

  .scroll-up-container {
    right: 55px;
  }

  .oexplist ul {
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  .oexplist ul li {
    width: 50%;
    margin-bottom: 10px;
  }

  .splitcontent .gensplitc {
    display: block;
  }

  .splitcontent .gensplitc > div:nth-of-type(2) {
    width: 100%;
  }

  .menu nav ul {
    left: 30px;
  }

  .splitcontent .gensplitc > div:nth-of-type(2).method-steps {
    width: 100%;
    margin-top: 20px;
  }
}
@media only screen and (max-width: 760px) {
  .intro-content {
    margin-left: 20px;
    margin-right: 20px;
  }
  .intro-content .intro-heading {
    font-size: 36px;
    line-height: 50px;
    padding-right: 32px;
  }

  .proj-list {
    padding: 0 10px;
    padding: 0;
  }

  .proj-list li {
    width: 100%;
  }

  .proj-list.featured li:nth-of-type(1) .detail, .proj-list.featured li:nth-of-type(2) .detail {
    margin-left: 60px;
  }

  footer .fcs {
    display: block;
  }

  footer .fcopy {
    width: 100%;
    margin-bottom: 10px;
  }

  footer .finfo {
    display: block;
  }

  footer .finfo .fslogan {
    margin-top: 0;
    margin-bottom: 40px;
  }

  .oesplit {
    display: block;
  }

  .oesplit > div:nth-of-type(1) {
    width: 100%;
    margin-bottom: 20px;
  }

  .oesplit > div:nth-of-type(2) {
    width: 100%;
  }

  .introfw-text {
    padding-right: 0;
  }

  .accordeon .acc-body {
    padding-right: 0;
  }

  .cap-list > li {
    width: 100%;
  }

  .menu nav ul li {
    font-size: 24px;
    line-height: 30px;
    height: 30px;
  }
  .menu nav ul li a {
    padding-bottom: 6px;
  }

  .menu nav ul {
    height: 55%;
    width: calc(100% - 50px);
  }

  .lang-sr .menu .lang,
.menu .lang {
    right: 20px;
    top: auto;
    bottom: 9.7vh;
    bottom: 5vh;
  }

  .menu .contactinfo {
    bottom: 5vh;
    right: auto;
    left: 30px;
    text-align: left;
  }

  .method-steps svg {
    -webkit-transform-origin: 10% 0%;
            transform-origin: 10% 0%;
    -webkit-transform: scale(0.4, 1) !important;
            transform: scale(0.4, 1) !important;
  }

  .proj-list.featured li:nth-of-type(1) .detail .ptitle, .proj-list.featured li:nth-of-type(2) .detail .ptitle {
    font-size: 30px;
  }

  .proj-list.featured li:nth-of-type(1) .detail, .proj-list.featured li:nth-of-type(2) .detail {
    /*     margin-left: 0; */
    left: 0;
  }

  .intro-heading br {
    display: none;
  }

  .client-list-container .client-list li {
    margin-bottom: 20px;
  }

  .client-list-container .client-list img {
    /*     padding: 0; */
    max-width: 40vw;
    box-sizing: border-box;
  }

  .client-list-container .client-list li.double img {
    max-width: none;
  }

  .no-mobile {
    display: none;
  }
}
.loading {
  z-index: 102;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  background: #1498d5;
  pointer-events: none;
}
.loading.step1::after, .loading.step2::after, .loading.step3::after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
  top: 0;
  bottom: 0;
  -webkit-animation-name: loading-anim;
          animation-name: loading-anim;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
@-webkit-keyframes loading-anim {
  from {
    left: auto;
    right: 0;
    width: 0%;
  }
  49% {
    left: auto;
    right: 0;
    width: 100%;
  }
  51% {
    right: auto;
    left: 0;
    width: 100%;
  }
  to {
    right: auto;
    left: 0;
    width: 0%;
  }
}
@keyframes loading-anim {
  from {
    left: auto;
    right: 0;
    width: 0%;
  }
  49% {
    left: auto;
    right: 0;
    width: 100%;
  }
  51% {
    right: auto;
    left: 0;
    width: 100%;
  }
  to {
    right: auto;
    left: 0;
    width: 0%;
  }
}
.loading.step1 {
  width: 100%;
  transition: 0.5s;
}
.loading.step2 {
  width: 100%;
  left: 0;
  right: auto;
}
.loading.step3 {
  right: auto;
  left: 0;
  width: 0%;
  transition: 0.5s;
}
.loading.reverse {
  left: 0;
  right: auto;
}
.loading.reverse.step1::after, .loading.reverse.step2::after, .loading.reverse.step3::after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
  top: 0;
  bottom: 0;
  animation-direction: reverse;
}
.loading.reverse.step1 {
  width: 100%;
  transition: 0.5s;
}
.loading.reverse.step2 {
  width: 100%;
  right: 0;
  left: auto;
}
.loading.reverse.step3 {
  left: auto;
  right: 0;
  width: 0%;
  transition: 0.5s;
}

.privacy-banner {
  z-index: 102;
  position: fixed;
  left: 16px;
  bottom: 16px;
  background: #ffffff;
  color: #5c5c5c;
  padding: 35px 55px;
  width: 390px;
  max-width: calc(100% - 142px);
  -webkit-animation-name: privacy-banner;
          animation-name: privacy-banner;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
}
@media screen and (max-width: 767px) {
  .privacy-banner {
    padding: 35px 35px;
    max-width: calc(100% - 102px);
  }
}
@-webkit-keyframes privacy-banner {
  from {
    -webkit-transform: translateX(-150%);
            transform: translateX(-150%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes privacy-banner {
  from {
    -webkit-transform: translateX(-150%);
            transform: translateX(-150%);
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes privacy-banner2 {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-150%);
            transform: translateX(-150%);
  }
}
@keyframes privacy-banner2 {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-150%);
            transform: translateX(-150%);
  }
}
.privacy-banner.closed {
  -webkit-animation-name: privacy-banner2;
          animation-name: privacy-banner2;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.privacy-banner h4 {
  font-size: 24px;
  line-height: 30px;
  font-weight: bold;
  text-transform: none;
  margin-bottom: 30px;
}
.privacy-banner p {
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 30px;
}
.privacy-banner a {
  color: #1498d5;
}
.privacy-banner .button-box button {
  font-size: 18px;
  font-weight: bold;
  background: black;
  border: 1px solid white;
  padding: 10px 20px;
  color: white;
  transition: 0.3s;
  cursor: pointer;
}
.privacy-banner .button-box button:focus, .privacy-banner .button-box button:hover {
  border-color: #1498d5;
  color: #1498d5;
}
/*# sourceMappingURL=app.css.map*/