* {
  box-sizing: border-box; }

html, div, h1, h2, h3, h4, h5, h6, p, img, dl, dt, dd, ol, ul, li, table, caption, tbody, tfoot, thead, tr, th, td, form, fieldset, embed, object, applet {
  margin: 0;
  padding: 0;
  border: 0; }

html {
  width: 100%;
  height: 100%;
  font-size: 100%;
  /*default for REMMING*/ }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min--moz-device-pixel-ratio: 1.25), only screen and (-o-min-device-pixel-ratio: 1.25 / 1), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 200dpi), only screen and (min-resolution: 1.25dppx) {
    html {
      font-size: 70%;
      /*hd 1:1.25*/ } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.35), only screen and (min--moz-device-pixel-ratio: 1.35), only screen and (-o-min-device-pixel-ratio: 1.35 / 1), only screen and (min-device-pixel-ratio: 1.35), only screen and (min-resolution: 200dpi), only screen and (min-resolution: 1.35dppx) {
    html {
      font-size: 50%;
      /*hd 1:1.25*/ } }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5 / 1), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi), only screen and (min-resolution: 1.5dppx) {
    html {
      font-size: 90%;
      /*hd 1:1.5*/ } }

p {
  line-height: 130%; }

b, strong {
  font-weight: 500; }

a, b, p, span, input, textarea, div, h1, h2, h3, h4, h5, h6, form {
  font-family: 'Mulish', Arial, Helvetica, sans-serif; }

h2 {
  font-size: 3rem;
  text-align: center; }
  @media only screen and (max-width: 768px) {
    h2 {
      font-size: 2rem; } }

body {
  font-family: 'Mulish', Arial, Helvetica, sans-serif;
  font-weight: 200;
  background: #000000;
  color: #ffffff; }
  body h1 {
    font-size: 10rem; }
  body .pages {
    overflow: hidden;
    position: absolute;
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth; }
    body .pages.noanim {
      scroll-behavior: unset; }
    body .pages .page {
      overflow: hidden;
      width: 100vw;
      height: 100%;
      position: relative;
      flex: 0 0 100%; }
      body .pages .page .centre_banner {
        position: absolute;
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center; }
        @media only screen and (max-width: 768px) {
          body .pages .page .centre_banner {
            flex-direction: column;
            top: 0;
            left: 0;
            height: 100%;
            transform: none;
            justify-content: center; } }
        body .pages .page .centre_banner.aligntop {
          align-items: flex-start; }
        body .pages .page .centre_banner .product {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          flex: 0 0 50%; }
          @media only screen and (max-width: 768px) {
            body .pages .page .centre_banner .product {
              margin-top: 1.5rem;
              margin-bottom: 1.5rem;
              /*flex:0 0 100%;*/
              flex: 0;
              width: 100%;
              flex-direction: row; }
              body .pages .page .centre_banner .product .product_info {
                width: 80%; } }
          body .pages .page .centre_banner .product .anim {
            width: 80%; }
            @media only screen and (max-width: 768px) {
              body .pages .page .centre_banner .product .anim {
                height: 25vh;
                width: auto; } }
          body .pages .page .centre_banner .product #anim2 {
            cursor: pointer; }
          body .pages .page .centre_banner .product #anim2x {
            cursor: pointer; }
          body .pages .page .centre_banner .product .product_info {
            font-size: 1.3rem;
            text-align: center;
            width: 70%;
            opacity: 0; }
            body .pages .page .centre_banner .product .product_info.vis {
              transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
              opacity: 1; }
            body .pages .page .centre_banner .product .product_info ul {
              margin: 0;
              padding: 0;
              list-style: none; }
            @media only screen and (max-width: 768px) {
              body .pages .page .centre_banner .product .product_info {
                font-size: 1.1rem;
                width: 40%; } }
        body .pages .page .centre_banner .clients {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 5%;
          flex: 1 1 100%; }
          @media only screen and (max-width: 768px) {
            body .pages .page .centre_banner .clients {
              flex: 0; } }
          body .pages .page .centre_banner .clients .clients_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;
            width: 80%;
            height: calc(100vh - 25rem);
            position: relative; }
            body .pages .page .centre_banner .clients .clients_box .client {
              display: block;
              opacity: 0;
              flex: 0 1 25%;
              padding: 1rem; }
              body .pages .page .centre_banner .clients .clients_box .client.vis {
                opacity: 1;
                transition: opacity 0.2s ease-in-out; }
              @media only screen and (max-width: 768px) {
                body .pages .page .centre_banner .clients .clients_box .client {
                  flex: 0 1 33%; } }
              body .pages .page .centre_banner .clients .clients_box .client .client_inner {
                /*border: 5px solid #333333;
								border-radius: 0.3rem;*/
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%; }
                body .pages .page .centre_banner .clients .clients_box .client .client_inner span {
                  display: none; }
                body .pages .page .centre_banner .clients .clients_box .client .client_inner img {
                  max-width: 100%;
                  max-height: 10vh;
                  width: auto;
                  height: auto; }
                  @media only screen and (max-width: 768px) {
                    body .pages .page .centre_banner .clients .clients_box .client .client_inner img {
                      max-height: 8vh; } }
        body .pages .page .centre_banner .contact {
          display: flex;
          flex-direction: column; }
          body .pages .page .centre_banner .contact form {
            display: flex;
            flex-direction: column;
            align-items: center; }
            body .pages .page .centre_banner .contact form .form_ok {
              display: none;
              margin-top: 2rem;
              min-height: 40vh; }
              body .pages .page .centre_banner .contact form .form_ok.vis {
                display: block; }
            body .pages .page .centre_banner .contact form .form_element {
              margin: 1rem 0; }
              body .pages .page .centre_banner .contact form .form_element input, body .pages .page .centre_banner .contact form .form_element textarea {
                width: 30rem;
                max-width: 70vw;
                padding: 0.8rem;
                border: 0;
                border-radius: 0.3rem; }
              body .pages .page .centre_banner .contact form .form_element textarea {
                height: 12rem; }
                @media only screen and (max-width: 768px) {
                  body .pages .page .centre_banner .contact form .form_element textarea {
                    height: 6rem; } }
              body .pages .page .centre_banner .contact form .form_element input[type="submit"] {
                background: #cccccc; }
                body .pages .page .centre_banner .contact form .form_element input[type="submit"]:hover {
                  background: #cccc00;
                  cursor: pointer; }
              body .pages .page .centre_banner .contact form .form_element.subject {
                display: none; }
              body .pages .page .centre_banner .contact form .form_element.novis {
                display: none; }
          body .pages .page .centre_banner .contact .contact_details .address {
            margin-top: 2rem;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center; }
            body .pages .page .centre_banner .contact .contact_details .address span {
              margin-right: 1rem; }
              body .pages .page .centre_banner .contact .contact_details .address span.c {
                font-weight: 400;
                width: 100%;
                flex: 0 0 100%;
                text-align: center; }
            @media only screen and (max-width: 768px) {
              body .pages .page .centre_banner .contact .contact_details .address {
                flex-direction: column;
                align-items: center; }
                body .pages .page .centre_banner .contact .contact_details .address span {
                  margin-right: 0; } }
          body .pages .page .centre_banner .contact .contact_details .phone {
            margin-top: 1rem;
            font-size: 1.5rem;
            font-weight: 400;
            width: 100%;
            text-align: center; }
          body .pages .page .centre_banner .contact .contact_details .email {
            margin-top: 1rem;
            width: 100%;
            text-align: center; }
            body .pages .page .centre_banner .contact .contact_details .email a {
              color: #ffffff;
              text-decoration: none;
              font-size: 1.5rem;
              font-weight: 400;
              opacity: 0.5; }
              body .pages .page .centre_banner .contact .contact_details .email a:hover {
                opacity: 1; }
  body #intro_caption {
    display: none;
    position: relative;
    justify-content: center;
    text-align: center;
    width: 100%;
    flex: 1; }
    body #intro_caption.vis {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap; }
    body #intro_caption .intro_text {
      font-size: 4rem;
      display: none; }
      body #intro_caption .intro_text.fadebegin {
        display: block; }
        body #intro_caption .intro_text.fadebegin.fadecomplete {
          display: none; }
    @media only screen and (max-width: 768px) {
      body #intro_caption {
        flex-direction: column;
        justify-content: center;
        flex: 0; } }
  body #logo {
    display: none;
    width: 50vw;
    height: auto;
    z-index: 10;
    top: -5vh;
    position: relative; }
    body #logo.vis {
      display: block; }
    @media only screen and (max-width: 768px) {
      body #logo {
        width: 100vw; } }
  body .bottom_nav, body .top_nav {
    display: flex;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 2rem;
    color: #ffffff;
    transform: translateX(-50%);
    z-index: 40;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem; }
    body .bottom_nav.vis, body .top_nav.vis {
      opacity: 1;
      transition: opacity 0.3s ease-in-out; }
    @media only screen and (max-width: 768px) {
      body .bottom_nav, body .top_nav {
        bottom: 1rem;
        justify-content: center;
        transform: none;
        left: 0;
        width: 100%; } }
  body .top_nav {
    top: 2rem;
    bottom: auto; }
    @media only screen and (max-width: 768px) {
      body .top_nav {
        top: 1rem; } }
  body .page_scroll_down,
  body .page_scroll_up {
    display: flex;
    opacity: 0;
    position: absolute;
    left: 50%;
    bottom: 4rem;
    /*transform:translateX(-50%);		*/
    margin-left: -2rem;
    z-index: 20;
    cursor: pointer; }
    @media only screen and (max-width: 768px) {
      body .page_scroll_down,
      body .page_scroll_up {
        bottom: 2.5rem;
        margin-left: -1.4rem; } }
    body .page_scroll_down.vis,
    body .page_scroll_up.vis {
      display: flex;
      opacity: 0.5;
      transition: opacity 0.2s linear; }
      body .page_scroll_down.vis:hover,
      body .page_scroll_up.vis:hover {
        opacity: 1;
        transition: opacity 0.2s linear; }
    body .page_scroll_down .circle,
    body .page_scroll_up .circle {
      color: #ffffff;
      background-image: linear-gradient(to top right, #A35499 0%, #E7376D 25%, #E85C27 45%, #8BBE48 50%, #8BBE48 70%, #1399D6 80%, #23376D 100%);
      border-radius: 50%;
      width: 4rem;
      height: 4rem; }
      @media only screen and (max-width: 768px) {
        body .page_scroll_down .circle,
        body .page_scroll_up .circle {
          width: 3rem;
          height: 3rem; } }
      body .page_scroll_down .circle .inner,
      body .page_scroll_up .circle .inner {
        position: absolute;
        width: calc(100% - 0.5rem);
        height: calc(100% - 0.5rem);
        background: #000;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); }
        body .page_scroll_down .circle .inner i,
        body .page_scroll_up .circle .inner i {
          font-size: 2rem;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
  body .page_scroll_up {
    bottom: auto;
    top: 4rem;
    /*	left:10%;	
		&.vis{
			transition:opacity 1.3s linear;
		}
		.circle{
			width:3.5rem;
			height:3.5rem;
			.inner{
				width:calc(100% - 0.4rem);
				height:calc(100% - 0.4rem);
				i{
					font-size:1.5rem;
				}
			}
		}*/ }
    @media only screen and (max-width: 768px) {
      body .page_scroll_up {
        top: 2.5rem; } }
    body .page_scroll_up.vis {
      /*transition:opacity 0.5s linear 0.8s;*/ }

.bounce {
  animation: bounce 2s infinite; }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-30px); }
  60% {
    transform: translateY(-15px); } }