/*------------------------------------*\
  SASS MIXINS
\*------------------------------------*/
/* Mixins for transformation & animation */
/* Background mixins */
/* Mixins for single rules */
/* Special classes for accessibility */
/* Colors name to hex values map */
/* Colors map */
/* Helper function to obtain color by name */
/* Main colors */
/* Text Color */
/* Component colors */
/* Main UI colors map */
@font-face {
  font-family: 'Roboto';
  src: url("../fonts/custom/Roboto-Thin.eot");
  src: url("../fonts/custom/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/custom/Roboto-Thin.woff2") format("woff2"), url("../fonts/custom/Roboto-Thin.woff") format("woff"), url("../fonts/custom/Roboto-Thin.ttf") format("truetype"), url("../fonts/custom/Roboto-Thin.svg#Roboto-Thin") format("svg");
  font-weight: 100;
  font-style: normal; }
@font-face {
  font-family: 'Open Sans Extrabold';
  src: url("../fonts/custom/OpenSans-Extrabold.eot");
  src: url("../fonts/custom/OpenSans-Extrabold.eot?#iefix") format("embedded-opentype"), url("../fonts/custom/OpenSans-Extrabold.woff2") format("woff2"), url("../fonts/custom/OpenSans-Extrabold.woff") format("woff"), url("../fonts/custom/OpenSans-Extrabold.ttf") format("truetype"), url("../fonts/custom/OpenSans-Extrabold.svg#OpenSans-Extrabold") format("svg");
  font-weight: 800;
  font-style: normal; }
@font-face {
  font-family: 'Tw Cen MT Condensed Extra';
  src: url("../fonts/custom/TwCenMT-CondensedExtraBold.eot");
  src: url("../fonts/custom/TwCenMT-CondensedExtraBold.eot?#iefix") format("embedded-opentype"), url("../fonts/custom/TwCenMT-CondensedExtraBold.woff2") format("woff2"), url("../fonts/custom/TwCenMT-CondensedExtraBold.woff") format("woff"), url("../fonts/custom/TwCenMT-CondensedExtraBold.ttf") format("truetype"), url("../fonts/custom/TwCenMT-CondensedExtraBold.svg#TwCenMT-CondensedExtraBold") format("svg");
  font-weight: 800;
  font-style: normal; }
@font-face {
  font-family: 'Brandon Grotesque';
  src: url("../fonts/custom/BrandonGrotesque-Black.eot");
  src: url("../fonts/custom/BrandonGrotesque-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/custom/BrandonGrotesque-Black.woff2") format("woff2"), url("../fonts/custom/BrandonGrotesque-Black.woff") format("woff"), url("../fonts/custom/BrandonGrotesque-Black.ttf") format("truetype"), url("../fonts/custom/BrandonGrotesque-Black.svg#BrandonGrotesque-Black") format("svg");
  font-weight: 900;
  font-style: normal; }
/*------------------------------------*\
  #GENERAL PAGE STYLES
\*------------------------------------*/
html {
  font-size: 62.5%; }

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

body {
  margin: 0;
  padding: 0;
  color: #222;
  background-color: #e8e8e8;
  font-family: "Brandon Grotesque", "Open Sans Extrabold", sans-serif;
  line-height: 1.5;
  font-weight: normal;
  font-size: 1.6rem;
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-font-smoothing: antialiased !important; }

a {
  text-decoration: none;
  -webkit-transition-property: all 0.3s ease-in-out;
  -moz-transition-property: all 0.3s ease-in-out;
  transition-property: all 0.3s ease-in-out; }

textarea:focus,
input:focus,
button:focus {
  outline: none; }

a:visited,
a:focus,
a:hover {
  text-decoration: none;
  outline: 0; }

a:focus {
  color: #56c99b; }

h1 {
  font-size: 3.6rem; }

h2 {
  font-size: 3.0rem; }

h3 {
  font-size: 2.4rem; }

h4 {
  font-size: 1.8rem; }

h5 {
  font-size: 1.4rem; }

h6 {
  font-size: 1.2rem; }

h1, h2, h3, h4, h5, h6 {
  color: #3d3d3d; }

textarea {
  width: 100%; }

ol, ul {
  list-style: none; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0; }

.section {
  position: relative;
  width: 100%;
  text-align: center; }
  .section--artboard {
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }

.section-content-overlay {
  font-size: 1em;
  z-index: 2;
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  vertical-align: middle; }
  .section-content-overlay__container {
    display: table-cell;
    vertical-align: middle; }
    @media only screen and (max-width: 768px) {
      .section-content-overlay__container {
        display: inline-block;
        vertical-align: top;
        padding-top: 20.625em; } }
    @media only screen and (max-width: 560px) {
      .section-content-overlay__container {
        padding-top: 18.75em; } }
    @media only screen and (max-width: 480px) {
      .section-content-overlay__container {
        padding-top: 18.125em; } }
  @media only screen and (max-width: 992px) {
    .section-content-overlay {
      font-size: 0.90909em; } }
  @media only screen and (max-width: 768px) {
    .section-content-overlay {
      font-size: 0.83333em; } }
  @media only screen and (max-width: 600px) {
    .section-content-overlay {
      font-size: 0.76923em; } }
  @media only screen and (max-width: 560px) {
    .section-content-overlay {
      font-size: 0.52632em; } }
  @media only screen and (max-width: 480px) {
    .section-content-overlay {
      font-size: 0.5em; } }
  @media only screen and (max-width: 320px) {
    .section-content-overlay {
      font-size: 0.45455em; } }

.main-content {
  width: 100%;
  height: 100%;
  position: relative; }
  .main-content__row {
    height: 100%; }
  .main-content__container {
    height: 100%; }

.language-switcher {
  font-size: 1.0625em;
  font-family: "Tw Cen MT Condensed Extra";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-left: 1.76471em; }
  @media only screen and (max-width: 560px) {
    .language-switcher {
      font-size: 0.9em;
      padding-left: 1.17647em; } }

.languages-list {
  padding-left: 0; }
  .languages-list__item {
    margin-right: 0.35294em;
    display: inline-block; }

.language-link {
  text-transform: uppercase;
  color: #fff; }
  .language-link:visited, .language-link:focus {
    color: #fff; }
  .language-link:hover {
    color: #00aab6; }
  .language-link.session-active {
    color: #00dae9; }

.background-content {
  position: absolute;
  height: 100%;
  width: 100%; }
  .background-content__wrapper {
    white-space: nowrap;
    position: relative;
    height: 100%;
    text-align: center; }
    .background-content__wrapper:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em;
      /* Adjusts for spacing */ }

.background-incresive-image {
  display: inline-block;
  text-align: center;
  opacity: 0; }
  .background-incresive-image__figure {
    max-width: 100%;
    margin-bottom: 6.875em; }
    @media only screen and (max-width: 768px) {
      .background-incresive-image__figure {
        max-width: 75%; } }
    @media only screen and (max-width: 480px) {
      .background-incresive-image__figure {
        max-width: 95%;
        margin-bottom: 5.5625em; } }
    @media only screen and (max-width: 320px) {
      .background-incresive-image__figure {
        margin-bottom: 5em; } }

.logo {
  font-size: 1em;
  width: 100%;
  padding-top: 1.125em;
  padding-bottom: 1.125em;
  padding-left: 1.875em; }
  .logo__image-container {
    vertical-align: middle; }
  .logo__link {
    display: inline-block; }
  .logo__image {
    display: block;
    max-width: 100%; }
    @media only screen and (max-width: 768px) {
      .logo__image {
        max-width: 90%; } }
    @media only screen and (max-width: 560px) {
      .logo__image {
        max-width: 80%; } }
  @media only screen and (max-width: 768px) {
    .logo {
      font-size: 0.83333em; } }
  @media only screen and (max-width: 560px) {
    .logo {
      font-size: 0.71429em; } }
  @media only screen and (max-width: 480px) {
    .logo {
      font-size: 0.625em; } }

.menu-toggle {
  font-size: 1em;
  position: relative;
  z-index: 3;
  display: inline-block;
  margin-right: 2.5em;
  vertical-align: middle;
  width: 2.5em;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s; }
  .menu-toggle__line {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    margin-bottom: 0.3125em;
    padding: 0;
    line-height: 0.3125em;
    width: 100%;
    height: 0.3125em;
    background-color: #fff;
    border-bottom-left-radius: 0.3125em;
    border-top-left-radius: 0.3125em;
    border-bottom-right-radius: 0.3125em;
    border-top-right-radius: 0.3125em; }
    .menu-toggle__line--middle {
      width: 80%; }
  .menu-toggle:hover .menu-toggle__line--middle {
    width: 100%; }
  .menu-toggle--opened {
    margin-bottom: 1.25em; }
    .menu-toggle--opened .menu-toggle__line {
      position: absolute; }
      .menu-toggle--opened .menu-toggle__line--top {
        -webkit-transform: translateY(0) rotate(45deg);
        -moz-transform: translateY(0) rotate(45deg);
        -ms-transform: translateY(0) rotate(45deg);
        -o-transform: translateY(0) rotate(45deg);
        transform: translateY(0) rotate(45deg);
        width: 100%; }
      .menu-toggle--opened .menu-toggle__line--middle {
        display: none; }
      .menu-toggle--opened .menu-toggle__line--bottom {
        -webkit-transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
        -o-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
        width: 100%; }
  @media only screen and (max-width: 768px) {
    .menu-toggle {
      font-size: 0.76923em; } }
  @media only screen and (max-width: 480px) {
    .menu-toggle {
      font-size: 0.66667em;
      margin-right: 1.875em; } }

.navigation-menu {
  z-index: 2;
  position: absolute;
  top: 0;
  right: -25em;
  bottom: 0;
  height: 100%;
  padding-top: 5em;
  width: 25em;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  transition: all 0.1s; }
  .navigation-menu--main {
    background: #333; }
  .navigation-menu--opened {
    right: 0; }
    .navigation-menu--opened .navigation-menu-list-item {
      padding-left: 0; }
  @media only screen and (max-width: 768px) {
    .navigation-menu {
      font-size: 0.76923em; } }
  @media only screen and (max-width: 480px) {
    .navigation-menu {
      width: 20.83333em; } }

.navigation-menu-list-item:nth-child(1), .navigation-menu-list-item:nth-child(2), .navigation-menu-list-item:nth-child(3), .navigation-menu-list-item:nth-child(4), .navigation-menu-list-item:nth-child(5) {
  -webkit-perspective: 1000;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden; }

.navigation-menu-list-item {
  width: 100%;
  position: relative;
  font-family: "Roboto";
  font-weight: 100;
  display: block;
  height: 100%;
  font-size: 1.75em;
  padding-top: 0.42857em;
  padding-bottom: 0.42857em;
  text-align: left;
  padding-left: 5em;
  -webkit-transition: 0.35s all ease;
  -moz-transition: 0.35s all ease;
  transition: 0.35s all ease; }
  .navigation-menu-list-item:nth-child(1) {
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
    transition: 0.2s all ease;
    transition-delay: 0.03s; }
  .navigation-menu-list-item:nth-child(2) {
    -webkit-transition: 0.4s all ease;
    -moz-transition: 0.4s all ease;
    transition: 0.4s all ease;
    transition-delay: 0.06s; }
  .navigation-menu-list-item:nth-child(3) {
    -webkit-transition: 0.6s all ease;
    -moz-transition: 0.6s all ease;
    transition: 0.6s all ease;
    transition-delay: 0.09s; }
  .navigation-menu-list-item:nth-child(4) {
    -webkit-transition: 0.8s all ease;
    -moz-transition: 0.8s all ease;
    transition: 0.8s all ease;
    transition-delay: 0.12s; }
  .navigation-menu-list-item:nth-child(5) {
    -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    transition: 1s all ease;
    transition-delay: 0.15s; }
  .navigation-menu-list-item__link {
    color: #fff; }
    .navigation-menu-list-item__link:visited, .navigation-menu-list-item__link:focus {
      color: #fff; }
    .navigation-menu-list-item__link:hover {
      color: #00dae9; }

.menu-contacts {
  margin: auto;
  text-align: center;
  width: 100%;
  font-weight: 100;
  font-family: "Roboto";
  bottom: 0;
  padding-bottom: 1.25em;
  position: absolute; }
  .menu-contacts__email {
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 0;
    margin: 0;
    font-size: 1.5625em; }
    .menu-contacts__email:hover, .menu-contacts__email:visited {
      color: #fff; }

.contact-skype__icon {
  vertical-align: middle;
  display: inline-block;
  width: 3.125em; }
.contact-skype__text {
  vertical-align: middle;
  display: inline-block;
  color: #fff;
  font-size: 1.5625em;
  margin: auto 0.28em;
  padding: 0; }
  .contact-skype__text:hover, .contact-skype__text:visited {
    color: #fff; }

.page-navigation {
  height: 100%;
  display: table;
  position: fixed;
  vertical-align: middle;
  right: 0;
  bottom: 0;
  width: 4.375em; }
  @media only screen and (max-width: 768px) {
    .page-navigation {
      width: 2.5em; } }
  @media only screen and (max-width: 480px) {
    .page-navigation {
      width: 2.1875em; } }

.page-navigation .page-nav-items {
  vertical-align: middle;
  display: table-cell;
  margin: auto; }

.page-navigation .page-nav-items .page-nav-item {
  position: relative;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 10px;
  margin: 20px 0;
  cursor: pointer;
  opacity: 1; }

.page-navigation .page-nav-items .page-nav-item svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  margin-left: -0.5px; }

.page-navigation .page-nav-items .page-nav-item svg.circle {
  top: 5px;
  left: 5.4px;
  width: 11px;
  height: 11px;
  stroke: #00dae9;
  stroke-width: 3;
  fill: transparent; }

.page-navigation .page-nav-items .page-nav-item svg.curve {
  top: 50%;
  left: -1.8px;
  fill: none;
  stroke: #0ebdf7;
  stroke-width: 3; }

.our-services {
  margin-top: 2.5em; }
  @media only screen and (max-width: 480px) {
    .our-services {
      margin-top: 0.625em; } }

.our-service-item {
  font-size: 1.6875em;
  text-align: center; }
  .our-service-item--first {
    padding-left: 17%; }
  .our-service-item--last {
    padding-right: 17%; }
  .our-service-item__image-container {
    line-height: 5.55556em;
    height: 5.55556em;
    text-align: center; }
  .our-service-item__image {
    max-width: 100%;
    max-height: 100%;
    text-align: center; }
  .our-service-item__title {
    font-size: 1.11111em;
    display: inline-block;
    color: #3d3d3d;
    line-height: 1.3;
    letter-spacing: 0.05rem;
    margin-top: 0.675em;
    text-align: center;
    text-transform: uppercase; }
    @media only screen and (max-width: 1440px) {
      .our-service-item__title {
        font-size: 0.92593em; } }
    @media only screen and (max-width: 1200px) {
      .our-service-item__title {
        font-size: 0.81481em; } }
    @media only screen and (max-width: 992px) {
      .our-service-item__title {
        font-size: 1.11111em; } }
  @media only screen and (max-width: 992px) {
    .our-service-item {
      padding: 0 !important; } }

[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

/* Reset `button` and button-style `input` default styles */
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
  background: none;
  border: 0;
  color: inherit;
  /* cursor: default; */
  font: inherit;
  line-height: normal;
  overflow: visible;
  padding: 0;
  -webkit-appearance: button;
  /* for input */
  -webkit-user-select: none;
  /* for button */
  -moz-user-select: none;
  -ms-user-select: none; }

input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0; }

/* Make `a` like a button */
[role="button"] {
  color: inherit;
  cursor: default;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  white-space: pre;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; }

.button {
  position: relative;
  font-size: 1.6875em;
  border-bottom-left-radius: 1.875em;
  border-top-left-radius: 1.875em;
  border-bottom-right-radius: 1.875em;
  border-top-right-radius: 1.875em;
  height: 1.85185em;
  background-color: rgba(255, 255, 255, 0.08);
  line-height: 1.85185em;
  text-transform: uppercase;
  padding: 0 0.44444em;
  -webkit-transition: background-color 0.3s, color 0.3s;
  -moz-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s; }
  .button::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    bottom: -30px;
    right: -30px;
    background: inherit;
    border-radius: 50px;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    -moz-transform: scale3d(0.8, 0.5, 1);
    -ms-transform: scale3d(0.8, 0.5, 1);
    -o-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1); }
  .button:hover, .button:active {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    -moz-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    -webkit-animation: anim-moema-1 0.3s forwards;
    -moz-animation: anim-moema-1 0.3s forwards;
    animation: anim-moema-1 0.3s forwards; }
    .button:hover::before, .button:active::before {
      -webkit-animation: anim-moema-2 0.3s 0.3s forwards;
      -moz-animation: anim-moema-2 0.3s 0.3s forwards;
      animation: anim-moema-2 0.3s 0.3s forwards; }
  .button--contact-us {
    padding-left: 1.11111em;
    padding-right: 1.11111em; }
    .button--contact-us:hover, .button--contact-us:active {
      -webkit-transition: box-shadow 0.3s ease-in-out;
      -moz-transition: box-shadow 0.3s ease-in-out;
      transition: box-shadow 0.3s ease-in-out;
      -moz-box-shadow: 0px 0px 30px 1px #00dae9;
      -webkit-box-shadow: 0px 0px 30px 1px #00dae9;
      box-shadow: 0px 0px 30px 1px #00dae9;
      background-color: #00dae9;
      color: #fff; }
  .button--contact-us-bottom {
    margin-top: 0.37037em !important;
    padding-left: 1.11111em;
    padding-right: 1.11111em; }
    .button--contact-us-bottom:hover, .button--contact-us-bottom:active {
      -webkit-transition: box-shadow 0.3s ease-in-out;
      -moz-transition: box-shadow 0.3s ease-in-out;
      transition: box-shadow 0.3s ease-in-out;
      -moz-box-shadow: 0px 0px 30px 1px #00dae9;
      -webkit-box-shadow: 0px 0px 30px 1px #00dae9;
      box-shadow: 0px 0px 30px 1px #00dae9;
      background-color: #00dae9;
      color: #fff; }
  .button--more-works {
    display: inline-block;
    padding-left: 1.11111em;
    padding-right: 1.11111em;
    color: #fff; }
    .button--more-works:hover, .button--more-works:active {
      -webkit-transition: box-shadow 0.3s ease-in-out;
      -moz-transition: box-shadow 0.3s ease-in-out;
      transition: box-shadow 0.3s ease-in-out;
      -moz-box-shadow: 0px 0px 30px 1px #00dae9;
      -webkit-box-shadow: 0px 0px 30px 1px #00dae9;
      box-shadow: 0px 0px 30px 1px #00dae9;
      background-color: #00dae9;
      color: #fff; }
  .button--go-home {
    display: inline-block;
    padding-left: 1.11111em;
    padding-right: 1.11111em;
    color: #fff; }
    .button--go-home:hover, .button--go-home:active {
      -webkit-transition: box-shadow 0.3s ease-in-out;
      -moz-transition: box-shadow 0.3s ease-in-out;
      transition: box-shadow 0.3s ease-in-out;
      -moz-box-shadow: 0px 0px 30px 1px #00dae9;
      -webkit-box-shadow: 0px 0px 30px 1px #00dae9;
      box-shadow: 0px 0px 30px 1px #00dae9;
      background-color: #00dae9;
      color: #fff; }
  .button--admin {
    margin-top: 12.5em;
    display: inline-block;
    padding-left: 1.11111em;
    padding-right: 1.11111em;
    color: #fff; }
    .button--admin:hover, .button--admin:active {
      -webkit-transition: box-shadow 0.3s ease-in-out;
      -moz-transition: box-shadow 0.3s ease-in-out;
      transition: box-shadow 0.3s ease-in-out;
      -moz-box-shadow: 0px 0px 30px 1px #00dae9;
      -webkit-box-shadow: 0px 0px 30px 1px #00dae9;
      box-shadow: 0px 0px 30px 1px #00dae9;
      background-color: #00dae9;
      color: #fff; }

@-webkit-keyframes anim-moema-1 {
  60% {
    -webkit-transform: scale3d(0.8, 0.8, 1);
    -moz-transform: scale3d(0.8, 0.8, 1);
    -ms-transform: scale3d(0.8, 0.8, 1);
    -o-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1); }
  85% {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    -moz-transform: scale3d(1.1, 1.1, 1);
    -ms-transform: scale3d(1.1, 1.1, 1);
    -o-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes anim-moema-1 {
  60% {
    -webkit-transform: scale3d(0.8, 0.8, 1);
    -moz-transform: scale3d(0.8, 0.8, 1);
    -ms-transform: scale3d(0.8, 0.8, 1);
    -o-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1); }
  85% {
    -webkit-transform: scale3d(1.1, 1.1, 1);
    -moz-transform: scale3d(1.1, 1.1, 1);
    -ms-transform: scale3d(1.1, 1.1, 1);
    -o-transform: scale3d(1.1, 1.1, 1);
    transform: scale3d(1.1, 1.1, 1); }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@-webkit-keyframes anim-moema-2 {
  to {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
@keyframes anim-moema-2 {
  to {
    opacity: 0;
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    -o-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }
.top-header {
  z-index: 2;
  width: 100%;
  display: table; }
  .top-header--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0; }
  .top-header__container {
    display: table-cell;
    width: 100%;
    vertical-align: middle; }
    .top-header__container--nav-menu {
      text-align: right; }
    .top-header__container--logo {
      text-align: left; }
    .top-header__container--half {
      width: 50%; }
    .top-header__container--full {
      width: 50%; }

.artboard {
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
  font-size: 1em; }
  .artboard__color-line {
    height: 0.625em;
    width: 6.5625em;
    display: inline-block; }
  .artboard__container {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%; }
  .artboard__description {
    visibility: hidden;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-size: 1.6875em; }
    @media only screen and (max-width: 768px) {
      .artboard__description {
        font-size: 1.875em;
        width: 80%; } }
    @media only screen and (max-width: 480px) {
      .artboard__description {
        width: 70%; } }
  .artboard__title {
    visibility: hidden;
    line-height: 1;
    letter-spacing: 1px;
    font-size: 6.5625em;
    text-transform: uppercase;
    margin: 0.13333em auto 0.06667em; }
    @media only screen and (max-width: 480px) {
      .artboard__title {
        font-size: 5.625em; } }
  .artboard__button {
    font-size: 1.5em;
    text-transform: uppercase;
    margin-top: 1.54167em; }
    @media only screen and (max-width: 768px) {
      .artboard__button {
        font-size: 2.5em;
        margin-top: 0.625em; } }
  .artboard__button-container--more-works {
    padding-top: 6.25em; }
  @media only screen and (max-width: 992px) {
    .artboard {
      font-size: 0.90909em; } }
  @media only screen and (max-width: 768px) {
    .artboard {
      font-size: 0.83333em; } }
  @media only screen and (max-width: 600px) {
    .artboard {
      font-size: 0.76923em; } }
  @media only screen and (max-width: 560px) {
    .artboard {
      font-size: 0.52632em; } }
  @media only screen and (max-width: 480px) {
    .artboard {
      font-size: 0.5em; } }
  @media only screen and (max-width: 320px) {
    .artboard {
      font-size: 0.45455em; } }

.artboard-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: table;
  font-size: 1em; }

.artboards-container {
  width: 100%;
  height: 100%; }

.clock-container {
  width: 100%;
  font-size: 1em;
  text-align: center;
  margin-top: 1.875em; }
  @media only screen and (max-width: 768px) {
    .clock-container {
      font-size: 1.4em; } }

.clock {
  line-height: 1;
  color: #fff;
  font-family: "Roboto";
  font-size: 2.75em;
  margin: auto;
  width: 4.54545em;
  height: 4.54545em; }
  .clock__radius {
    position: relative;
    width: 100%;
    line-height: 100%;
    height: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%; }

.clock-radius-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.clock-hand-container {
  position: absolute;
  width: 100%;
  height: 100%; }

.clock-hand {
  position: relative;
  width: 0.90909em;
  height: 0.90909em;
  display: inline-block;
  top: -0.20202em;
  text-align: center; }

.clock-hand-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.clock-time {
  height: 100%;
  width: 100%;
  display: table;
  font-weight: 100; }
  .clock-time__container {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    display: table-cell;
    padding-bottom: 0.22727em; }
  .clock-time__period {
    line-height: 0.4;
    font-size: 0.31818em;
    text-align: right;
    padding-right: 23%; }

.clock-numbers {
  line-height: 1;
  text-align: center; }
  .clock-numbers__part {
    display: inline-block;
    vertical-align: middle; }
    .clock-numbers__part--hour {
      margin-right: -3.5%; }
    .clock-numbers__part--delimiter {
      padding-right: 0.06818em;
      width: 0.25em; }
    .clock-numbers__part--minutes {
      margin-left: -7%; }

.contact-email {
  width: 100%;
  font-family: "Roboto";
  text-align: center;
  margin-bottom: 0.22222em; }
  .contact-email__address {
    padding: 0;
    font-weight: 100;
    margin: 0;
    color: #fff;
    font-size: 2.8125em; }

.work-item {
  font-size: 1em;
  height: 26.25em;
  padding-left: 0 !important;
  padding-right: 0 !important; }
  @media only screen and (max-width: 768px) {
    .work-item {
      height: 21.875em; } }
  @media only screen and (max-width: 480px) {
    .work-item {
      height: 18.75em; } }
  .work-item__container {
    border: 1px solid #fff;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; }
  .work-item__content {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    position: relative; }
  .work-item__content-overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(71, 50, 88, 0.63);
    text-align: center;
    display: table;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s; }
    .work-item__content-overlay:hover {
      background-color: rgba(0, 218, 233, 0.8); }
      .work-item__content-overlay:hover .work-item__title {
        visibility: visible;
        opacity: 1; }
      .work-item__content-overlay:hover .work-item__description {
        visibility: visible;
        opacity: 1; }
  .work-item__title {
    font-size: 1.875em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    margin: 0.1875em auto;
    padding: 0.1875em auto;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s; }
  .work-item__description {
    font-size: 1.25em;
    color: #cccccc;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0.0625em auto;
    padding: 0.0625em auto;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s; }
  .work-item__link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }

.is-ios-device .work-item__title, .is-mobile .work-item__title {
  visibility: visible;
  opacity: 1; }
.is-ios-device .work-item__description, .is-mobile .work-item__description {
  visibility: visible;
  opacity: 1; }

.page {
  width: 100%;
  height: 100%;
  position: relative; }
  .page__container {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center; }
  .page__line {
    height: 0.625em;
    width: 6.5625em;
    display: inline-block; }
  .page__content {
    display: table-cell;
    vertical-align: middle; }
  .page__button {
    color: #fff;
    text-transform: uppercase; }
  .page__title {
    text-transform: uppercase;
    color: #fff; }
  .page__description {
    text-transform: uppercase;
    color: #fff; }

.page-main-content {
  width: 100%;
  height: 100%;
  font-size: 1em; }

.sw-loader__wrapper {
  position: relative; }

.sw-loader__wrapper--center {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.sw-loader__wrapper .sw-loader__holder {
  width: 70%;
  height: 70%;
  margin-left: 15%;
  margin-top: 15%;
  position: relative;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.sw-loader__wrapper .sw-loader__holder .rect {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: -webkit-linear-gradient(left, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC);
  background: linear-gradient(to right, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC);
  background-position: 0% 50%;
  background-size: 1000% 1000%;
  overflow: hidden;
  -webkit-animation: moveGradient 15s infinite;
  animation: moveGradient 15s infinite; }

@-webkit-keyframes moveGradient {
  to {
    background-position: 100% 50%; } }
@keyframes moveGradient {
  to {
    background-position: 100% 50%; } }
.not-found-page {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/not-found.jpg"); }
  .not-found-page__title {
    font-size: 6.6875em;
    line-height: 1.1;
    margin: 0.04673em auto; }
  .not-found-page__description {
    font-size: 1.75em;
    margin: 0.17857em auto;
    line-height: 1.1; }
  .not-found-page__line {
    background-color: #00dae9; }
  .not-found-page__button {
    margin-top: 1.375em; }

.footer {
  display: block; }

.latest-work {
  font-size: 1em;
  text-align: center; }
  .latest-work__content {
    text-align: center;
    display: table;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    position: relative; }
    @media only screen and (max-width: 768px) {
      .latest-work__content {
        vertical-align: top;
        display: inline-block; } }
  .latest-work__images {
    z-index: 1;
    top: 0;
    left: 0;
    position: absolute; }
  @media only screen and (max-width: 992px) {
    .latest-work {
      font-size: 0.90909em; } }
  @media only screen and (max-width: 768px) {
    .latest-work {
      font-size: 0.83333em;
      vertical-align: top; } }
  @media only screen and (max-width: 600px) {
    .latest-work {
      font-size: 0.76923em; } }
  @media only screen and (max-width: 560px) {
    .latest-work {
      font-size: 0.52632em; } }
  @media only screen and (max-width: 480px) {
    .latest-work {
      font-size: 0.5em; } }
  @media only screen and (max-width: 320px) {
    .latest-work {
      font-size: 0.45455em; } }

.latest-work-info {
  z-index: 5;
  position: relative;
  display: table-cell;
  padding-bottom: 9.375em;
  vertical-align: middle; }
  @media only screen and (max-width: 768px) {
    .latest-work-info {
      vertical-align: top;
      display: inline-block;
      padding-bottom: 0;
      padding-top: 9.375em; } }
  .latest-work-info__line {
    height: 0.625em;
    width: 6.5625em;
    display: inline-block; }
  .latest-work-info__title {
    visibility: hidden;
    line-height: 1;
    letter-spacing: 1px;
    font-size: 6.5625em;
    text-transform: uppercase;
    margin: 0.13333em auto 0.06667em; }
    @media only screen and (max-width: 480px) {
      .latest-work-info__title {
        font-size: 5.625em; } }
  .latest-work-info__description {
    visibility: hidden;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-size: 1.6875em; }

.latest-work-devices {
  width: 100%;
  height: 100%;
  text-align: left; }
  @media only screen and (max-width: 768px) {
    .latest-work-devices {
      position: absolute;
      display: inline-block;
      padding-bottom: 6.25em;
      margin-top: 10.625em; } }
  .latest-work-devices__image-container {
    height: 100%;
    width: 100%;
    position: absolute; }
    .latest-work-devices__image-container:before {
      content: ' ';
      display: inline-block;
      vertical-align: middle;
      height: 100%; }

.work-figure {
  white-space: nowrap;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }
  .work-figure__image {
    height: auto;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    /* vertical alignment of the inline element */
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s; }
    .work-figure__image--hidden {
      left: -100% !important; }
      @media only screen and (max-width: 768px) {
        .work-figure__image--hidden {
          left: -200% !important; } }
  .work-figure--macbook .work-figure__image {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    display: inline-block;
    position: relative;
    max-width: 55.625em;
    left: -23.17708em; }
    @media only screen and (max-width: 768px) {
      .work-figure--macbook .work-figure__image {
        max-width: 46.35417em;
        left: -18.54167em; } }
  .work-figure--iphone {
    width: 50%;
    text-align: center; }
    @media only screen and (max-width: 768px) {
      .work-figure--iphone {
        width: 60%; } }
    @media only screen and (max-width: 560px) {
      .work-figure--iphone {
        width: 80%; } }
    @media only screen and (max-width: 480px) {
      .work-figure--iphone {
        width: 90%; } }
    .work-figure--iphone .work-figure__image {
      -webkit-transition: all 1.5s;
      -moz-transition: all 1.5s;
      transition: all 1.5s;
      display: inline-block;
      position: relative;
      max-width: 9.375em;
      left: 0;
      margin-top: 18.75em;
      margin-left: 2.5em; }
      @media only screen and (max-width: 768px) {
        .work-figure--iphone .work-figure__image {
          max-width: 7.8125em;
          margin-top: 16.875em; } }

.fp-slidesNav {
  z-index: 5;
  font-size: 1em;
  bottom: 4px; }
  .fp-slidesNav.bottom {
    bottom: 1.875em; }
    @media only screen and (max-width: 768px) {
      .fp-slidesNav.bottom {
        bottom: 1.25em; } }
  .fp-slidesNav ul li {
    height: auto;
    width: 8.4375em;
    display: inline-block; }
    @media only screen and (max-width: 768px) {
      .fp-slidesNav ul li {
        width: 6.25em; } }
    @media only screen and (max-width: 560px) {
      .fp-slidesNav ul li {
        width: 5em; } }
    @media only screen and (max-width: 480px) {
      .fp-slidesNav ul li {
        width: 3.125em; } }
    .fp-slidesNav ul li a {
      width: 100%;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      display: inline-block !important; }
      .fp-slidesNav ul li a span {
        margin: 0 !important;
        position: static !important;
        background-color: #fff !important;
        display: block;
        border-radius: 10px !important;
        height: 0.375em !important;
        width: 100% !important;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s; }
    .fp-slidesNav ul li a.active {
      height: auto;
      width: 100%; }
      .fp-slidesNav ul li a.active span {
        width: 100% !important;
        background-color: #00dae9 !important; }
    .fp-slidesNav ul li:hover a span {
      background-color: #00dae9 !important; }

.form {
  font-size: 1em;
  text-align: center;
  width: 100%; }
  .form__submit-button {
    text-transform: uppercase;
    display: inline-block;
    width: 6.25em; }
    .form__submit-button:hover, .form__submit-button:active {
      -webkit-transition: box-shadow 0.3s ease-in-out;
      -moz-transition: box-shadow 0.3s ease-in-out;
      transition: box-shadow 0.3s ease-in-out;
      -moz-box-shadow: 0px 0px 30px 1px #00dae9;
      -webkit-box-shadow: 0px 0px 30px 1px #00dae9;
      box-shadow: 0px 0px 30px 1px #00dae9;
      background-color: #00dae9;
      color: #fff; }
  .form__submit-container {
    width: 100%;
    display: block;
    position: relative;
    text-align: center;
    margin-top: 1.25em; }
  @media only screen and (max-width: 768px) {
    .form {
      display: inline-block;
      padding-bottom: 0.625em;
      font-size: 1.4em; } }

.submit-loader {
  display: block;
  visibility: hidden;
  width: 100%;
  position: absolute;
  top: 1.875em; }
  .submit-loader__loader {
    width: 70px;
    height: 70px;
    border: 8px solid transparent;
    border-radius: 50%;
    position: relative;
    top: 50%;
    margin: -35px auto 0; }
    .submit-loader__loader::before {
      content: '';
      border: 8px solid rgba(0, 218, 233, 0.5);
      border-radius: 50%;
      width: 84px;
      height: 84px;
      position: absolute;
      top: -15px;
      left: -15px;
      animation: loader-scale 1.5s ease-out infinite;
      animation-delay: 1.5s;
      opacity: 0; }
    .submit-loader__loader::after {
      content: '';
      border: 8px solid #00dae9;
      border-radius: 50%;
      width: 70px;
      height: 70px;
      position: absolute;
      top: -8px;
      left: -8px;
      animation: loader-scale 1.5s ease-out infinite;
      animation-delay: 0.75s; }
@keyframes loader-scale {
  0% {
    transform: scale(0);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 0; } }
.alertify-logs.center {
  width: 100%;
  text-align: center;
  margin-right: -15px;
  margin-left: -15px;
  z-index: 99; }
  .alertify-logs.center .show {
    display: inline-block;
    margin: auto;
    float: none;
    text-align: center;
    position: static; }

.form-submit-button {
  background-color: #c4c4c4; }

.form-element {
  max-width: 100%;
  width: 100%;
  font-family: "Roboto";
  position: relative;
  display: block;
  overflow: visible;
  text-align: center;
  z-index: 1; }
  .form-element__wrapper {
    position: relative;
    text-align: center;
    display: inline-block;
    border-bottom: 1px solid #B9C1CA;
    width: 80%; }
    .form-element__wrapper::before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      width: 0;
      background: #00dae9;
      transition: width .5s ease; }
  .form-element__field {
    display: inline-block;
    width: 100%;
    border: none;
    border-radius: 0;
    line-height: 2.5;
    margin-top: 1.1em;
    padding: 0.4375em 0.3125em;
    background: transparent;
    color: #595F6E;
    font-weight: bold;
    -webkit-appearance: none;
    /* for box shadows to show on iOS */ }
    .form-element__field--textarea {
      line-height: 1.2;
      max-width: 100%;
      max-height: 7.5em; }
  .form-element__label {
    z-index: 4;
    line-height: 2.5;
    color: #595F6E;
    position: absolute;
    font-size: 0.875em;
    bottom: 0;
    top: 2.1875em;
    left: 0;
    padding: 0.3125em 0.3125em;
    width: 100%;
    text-align: left;
    pointer-events: none;
    -webkit-transition: top 0.3s ease-in-out;
    -moz-transition: top 0.3s ease-in-out;
    transition: top 0.3s ease-in-out; }
  .form-element--focused .form-element__label {
    top: -0.625em; }
  .form-element--focused .form-element__wrapper {
    border-bottom: 1px solid transparent; }
    .form-element--focused .form-element__wrapper::before {
      width: 100%; }

.popup {
  position: fixed;
  font-size: 1em;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: table;
  background-color: rgba(0, 0, 0, 0.58);
  text-align: center; }
  .popup__content-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center; }
  .popup__content {
    position: relative;
    display: inline-block;
    background-color: #fff; }
  .popup--hidden {
    display: none; }
  @media only screen and (max-width: 992px) {
    .popup {
      font-size: 0.90909em; } }
  @media only screen and (max-width: 768px) {
    .popup {
      font-size: 0.83333em; } }
  @media only screen and (max-width: 600px) {
    .popup {
      font-size: 0.76923em; } }
  @media only screen and (max-width: 560px) {
    .popup {
      font-size: 0.71429em; } }
  @media only screen and (max-width: 480px) {
    .popup {
      font-size: 0.66667em; } }
  @media only screen and (max-width: 320px) {
    .popup {
      font-size: 0.625em; } }

.popup-header {
  text-align: center; }
  .popup-header__title {
    font-size: 2.3125em;
    text-transform: uppercase;
    line-height: 1; }
  .popup-header__line {
    line-height: 1;
    display: inline-block;
    width: 6.25em;
    background-color: #00dae9;
    height: 0.375em; }

.popup-close-button {
  font-size: 1.5625em;
  position: absolute;
  height: 1.6em;
  width: 1.6em;
  text-align: center;
  top: -0.8em;
  right: -0.8em;
  line-height: 1.6em;
  border-radius: 50%;
  background-color: #3d3d3d; }
  .popup-close-button__icon {
    font-size: 1.5em;
    color: #fff;
    display: inline-block; }
  .popup-close-button:active {
    background-color: #575757;
    transform: translateY(2px); }

.popup-content--contact-form {
  padding-top: 1.5625em;
  width: 28.4375em;
  height: 30em; }
  @media only screen and (max-width: 768px) {
    .popup-content--contact-form {
      height: auto;
      padding-bottom: 1.25em; } }

.popup-form {
  text-align: center; }


body::after, body::before {
  /* these are the 2 half blocks which cover the content once the animation is triggered */
  content: '';
  height: 50%;
  width: 100%;
  position: fixed;
  left: 0;
  background-color: #ffffff;
  z-index: 1;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.4s 0.4s;
  -moz-transition: -moz-transform 0.4s 0.4s;
  transition: transform 0.4s 0.4s; }
body::before {
  top: 0;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%); }
body::after {
  bottom: 0;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%); }
body.js-page-is-loading::after, body.js-page-is-loading::before {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  z-index: 8;
  -webkit-transition: -webkit-transform 0.4s 0s;
  -moz-transition: -moz-transform 0.4s 0s;
  transition: transform 0.4s 0s; }

.page-loading-bar {
  /* this is the loding bar - visible while switching from one page to the following one */
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 50%;
  height: 2px;
  width: 90%;
  background-color: #4089a6;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
  -moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in;
  transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }
  .page-loading-bar::before {
    /* this is the progress bar inside the loading bar */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #283040;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center; }
  .js-page-is-loading .page-loading-bar {
    visibility: visible;
    -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
    -moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s;
    transition: visibility 0s 0.3s, transform 0.4s 0.4s; }
    .js-page-is-loading .page-loading-bar::before {
      -webkit-transform: scaleX(1);
      -moz-transform: scaleX(1);
      -ms-transform: scaleX(1);
      -o-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transition: -webkit-transform 0.8s 0.8s ease-in;
      -moz-transition: -moz-transform 0.8s 0.8s ease-in;
      transition: transform 0.8s 0.8s ease-in; }

/*# sourceMappingURL=style.css.map */