@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

@font-face {
    font-family: Aeonik-Regular;
    src: url("font/Aeonik-Regular.ttf") format("truetype");
}

@font-face {
  font-family: Aeonik-Medium;
  src: url("font/Aeonik-Medium.ttf") format("truetype");
}

@font-face {
    font-family: Aeonik-Bold;
    src: url("font/Aeonik-Bold.ttf") format("truetype");
}


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

#picon {
  width: 50%;
  margin: 0 0 0 10%;
  display: block;
}

*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body{
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #333;
    /* overflow: hidden; */
    font-family: 'Aeonik-Regular', sans-serif;
}
canvas{
    background-color: #20242c;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 0;
}

header, main {
    z-index: 1;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 0;
    z-index: 700;
    background: #20242c;
}

.container {
  width: 90%;
  margin: 100px auto;
  max-width: 1200px;

}

a {
    position: relative;
}

a::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 0.1rem;
    background-color: currentcolor;
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.32, 0.94, 0.6, 1) 0s;
}

a:hover::before {
    transform-origin: left center;
    transform: scaleX(1);
}

a#logo:hover::before {
    transform: scaleX(0);
}

a#dr:hover::before {
    transform: scaleX(0);
}

#dr {
    width: 50px;
    position: absolute;
    right: 4%;
    top: 0;
}

#dr img {
    width: 100%;

}
.hcontainer {
    padding-left: 2.60417vw;
    padding-right: 2.60417vw;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_col {
    display: flex;
    align-items: flex-end;
}

#logo {
    margin-right: 2.91667vw;
    text-decoration: none;
}

#logo img {
  width: 220px;
}

ul {
    padding: 0;
}

header li {
    display: inline-block;
    margin-right: 1.51042vw;
}

header li a {
    color: #fff;
    text-decoration: none;
}

#hero {
    position: relative;
    z-index: 1;
    height: 100vh;
}

#h1 h6 {
    font-size: 14px;
    font-weight: 100;
    margin: 0 0 2em;
}

.hero__scroll {
    width: 3.4rem;
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 25vh;
    cursor: pointer;
    border: 0;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
}

.hero__scroll:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    transform: scale(0);
}

.hero__scroll svg {
    position: relative;
    width: 0.8rem;
    height: 1.4rem;
    stroke: #20242c;
    /* stroke-dasharray: 20; */
    /* stroke-dashoffset: 20; */
    transition: stroke-dashoffset .6s cubic-bezier(.32,.94,.6,1) 1.8s,stroke .6s cubic-bezier(.32,.94,.6,1);
    z-index: 2;
}

.hero__scroll:hover {
    background: #F3FF03;
}

.hero__scroll:hover svg {
    /* stroke: #fff; */
}

#h1 {
    position: absolute;
   top: 50%;
   left: 50%;
   width: 600px;
   color: #fff;
   text-align: center;
   height: auto;
   margin-top: -200px;
   margin-left: -300px;
}

#h1 h1 {
    font-size: 72px;
    margin: 0;
    font-family: Aeonik-Medium,serif;
    font-weight: 600;
}

#h1 img {
  max-width: 500px;
  margin: 1em 0;
  width: 90%;
}

#h1 h1 span {
  color: #F3FF03;
}

#services {
    /* height: 100vh; */
    position: relative;
    background: #F3FF03;
    padding: 100px 0 ;
}

#serviceleft {
  margin-left: 5%;
  width: 40%;
  display: inline-block;
  vertical-align: top;
  flex: 0 0 44.4445%;
  max-width: 44.4445%;
  margin-right: 5%;
}

#serviceright {
  width: 65%;
  display: inline-block;
  vertical-align: top;
  flex: 27.7778% 0 0;
  max-width: 40.7778%;
}

#services h1 {
    font-size: 65px;
    line-height: 1.1;
}

.servicepoint {
    width: 100%;
    padding: 0 0 100px;
    font-size: 1.2em;
}

#contact form input[type='submit']:hover {
    cursor: pointer;
    background: #72c0e7;
    transition: .2s ease;
    border-color: #72c0e7;
}

#process {
    padding: 100px 0;
    position: relative;
}

#processleft h1 {
    font-size: 120px;
    color: #fff;
    font-weight: 100;
}

#processleft {
    margin-left: 6%;
    display: inline-block;
    vertical-align: middle;
    width: 43%;
    color: #fff;
}

.active {
    transition: .2s ease;
}

#processright {
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    color: #fff;
    margin-left: 5%;
}

#processright h2 {
    font-size: 2.5em;
}

.process {
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.process h3 {
    font-size: 40px;
    opacity: .7;
    font-weight: 100;
    transform-origin: left center;
    cursor: pointer;
    margin-bottom: 20px;
    /* padding-bottom: 20px; */
    transition: transform 0.6s cubic-bezier(0.32, 0.94, 0.6, 1) 0s, color 0.6s cubic-bezier(0.32, 0.94, 0.6, 1) 0s;
}

.process h3:hover {
    opacity: 1;
    transition: .2s ease;
}

.process.active h3 {
    /* font-size: 50px; */
    font-weight: 100;

    opacity: 1;
    transform: scale(1.25);
}

.process span.underline {
    display: block;
    width: 100%;
    background: #72c0e7;
    transform: scaleX(0);
    height: 3px;
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.18, 1) 0s;
}

.process.active span.underline {
    transform: scaleX(1);
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.18, 1) 0s;
}


#blog {
    padding: 100px 0;
    position: relative;
}

#contact {
    padding: 100px 0 30px;
    position: relative;
    background: #F3FF03;
    margin: 100px 0 0;
}

.button__svg {
    display: inline-block;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #F3FF03;
    vertical-align: middle;

}

#thanks {
  display: none;
  margin-left: 10%;
    background: #90EE90;
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
    width: 80%;
}

.button__svg svg {
    width: 0.88542vw;
    height: 0.72917vw;
}

#blog h2 {
    text-align: center;
    color: #fff;
    font-weight: 100;
    font-size: 80px;
}

#contact h2 {
    text-align: left;
    color: #20242c;
    font-weight: 100;
    font-size: 80px;
    margin-left: 10%;
}
.newslist {
    width: 80%;
    margin: 0 auto;
    display: block;
}
.news {
    width: 45%;
    display: inline-block;
    vertical-align: top;
    margin: 50px 0;
}
.news:nth-child(odd) {
    margin-right: 9%;
}

.news h3 {
    color: #fff;
    font-weight: 100;
    font-size: 35px;
}

.newbtn {
    /* width: 150px; */
}

.newbtn a {
    color: #fff;
    margin-bottom: 1em;
    padding-bottom: 5px;
}

.read {
    display: inline-block;
    color: #fff;
    vertical-align: middle;
    text-decoration: none;
}

#contact form {
    width: 80%;
    margin: 0 auto 100px;
}

#contact form input {
    width: 100%;
    display: block;
    background: transparent;
    color: #20242c;
    border: 2px solid #20242c;
    border-radius: 8px;
    text-indent: 20px;
    padding: 10px 0;
    font-size: 20px;
    margin: 30px 0;
    font-family: 'Aeonik-Regular', sans-serif;
}

#contact form input[type="text"] {
    margin-right: 3%;
}

#contact form textarea {
    width: 100%;
    display: block;
    background: transparent;
    color: #20242c;
    border: 2px solid #20242c;
    border-radius: 8px;
    text-indent: 20px;
    padding: 30px 0;
    font-size: 20px;
    margin-top: 40px;
    font-family: 'Aeonik-Regular', sans-serif;

}

/* .process h3 span {
  color: #F3FF03;
} */

#contact form ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #20242c;
    opacity: 1; /* Firefox */
  }

  #contact form input[type='submit'] {
    width: 100%;
    margin: 50px 0;
    display: block;
    background: #20242c;
    text-indent: 0;
    color: #fff;
    font-family: 'Aeonik-Bold', sans-serif;
  }

  .fade-in-from-left {
    opacity: 0;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(-15px);
    -moz-transform: translateX(-15px);
    -o-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    transform: translateX(-15px);
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fade-in-from-left.animated {
    animation-name: fade-from-left;
    animation-duration: 0.5s;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

@keyframes fade-from-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-15px);
        -moz-transform: translateX(-15px);
        -o-transform: translateX(-15px);
        -ms-transform: translateX(-15px);
        transform: translateX(-15px);
    }
    90% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.fade-in-from-bottom {
    opacity: 0;
    animation-timing-function: ease-out;
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -o-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px);
}

.fade-in-from-bottom.animated {
    animation-name: fade-from-bottom;
    animation-duration: 0.5s;
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.footer {
  text-align: right;
  margin-right: 5%;
}

.footer a {
  text-decoration: none;
  color: #000;
}

.contact1 {
  width: 49%;
  display: inline-block;
}

.contact1 img {
  width: 30%;
  display: inline-block;
  margin: 0 5%;
  vertical-align: middle;
}

.contact2 {
  text-align: center;
  vertical-align: top;
  margin-top: 100px;
}

@keyframes fade-from-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(15px);
        -moz-transform: translateY(15px);
        -o-transform: translateY(15px);
        -ms-transform: translateY(15px);
        transform: translateY(15px);
    }
    90% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fade-in-from-right {
    opacity: 0;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(40px);
    -moz-transform: translateX(40px);
    -o-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
}

.fade-in-from-right.animated {
    animation-name: fade-from-right;
    animation-duration: 0.5s;
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

@keyframes fade-from-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(40px);
        -moz-transform: translateX(40px);
        -o-transform: translateX(40px);
        -ms-transform: translateX(40px);
        transform: translateX(40px);
    }
    90% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.main-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .main-canvas {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin-left: 0%;
  }

#Layer_1 {
    width: 90%;
    height: 400px;
}


#redblocks > * {
    transform: translate3d(160px, -93px, 0);
    -webkit-animation: moveblocks 4s 1s ease infinite;
            animation: moveblocks 4s 1s ease infinite;
  }

  @-webkit-keyframes moveblocks {
    0% {
      transform: translate3d(160px, -93px, 0);
    }
    50%, 100% {
      transform: translate(0);
    }
  }

  @keyframes moveblocks {
    0% {
      transform: translate3d(160px, -93px, 0);
    }
    50%, 100% {
      transform: translate(0);
    }
  }
  #firstBlock {
    transform: translate3d(160px, -93px, 0);
    -webkit-animation: firstBlock 4s 1s ease infinite;
            animation: firstBlock 4s 1s ease infinite;
  }

  #blockdis {
    -webkit-animation: blockdis 4s 1s ease infinite;
            animation: blockdis 4s 1s ease infinite;
  }

  @-webkit-keyframes blockdis {
    30% {
      opacity: 1;
    }
    40%, 100% {
      opacity: 0;
      transform: translate3d(-160px, 93px, 0);
    }
  }

  @keyframes blockdis {
    30% {
      opacity: 1;
    }
    40%, 100% {
      opacity: 0;
      transform: translate3d(-160px, 93px, 0);
    }
  }
  @-webkit-keyframes firstBlock {
    0%, 15% {
      opacity: 0;
    }
    40%, 100% {
      opacity: 1;
    }
  }
  @keyframes firstBlock {
    0%, 15% {
      opacity: 0;
    }
    40%, 100% {
      opacity: 1;
    }
  }
  #redblocksparticles g:nth-child(1) polygon {
    opacity: 0.35;
    -webkit-animation: glow 4s 1s ease infinite;
            animation: glow 4s 1s ease infinite;
  }

  #redblocksparticles g:nth-child(2) polygon {
    opacity: 0.35;
    -webkit-animation: glow 4s 1s ease infinite;
            animation: glow 4s 1s ease infinite;
  }

  #redblocksparticles g:nth-child(3) polygon {
    opacity: 0.35;
    -webkit-animation: glow 4s 1s ease infinite;
            animation: glow 4s 1s ease infinite;
  }

  #redblocksparticles g:nth-child(4) polygon {
    opacity: 0.35;
    -webkit-animation: glow 4s 1s ease infinite;
            animation: glow 4s 1s ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(1) {
    -webkit-animation: dots 4s 1050ms ease infinite;
            animation: dots 4s 1050ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(1) {
    -webkit-animation: dots 4s 1050ms ease infinite;
            animation: dots 4s 1050ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(1) {
    -webkit-animation: dots 4s 1050ms ease infinite;
            animation: dots 4s 1050ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(1) {
    -webkit-animation: dots 4s 1050ms ease infinite;
            animation: dots 4s 1050ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(2) {
    -webkit-animation: dots 4s 1100ms ease infinite;
            animation: dots 4s 1100ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(2) {
    -webkit-animation: dots 4s 1100ms ease infinite;
            animation: dots 4s 1100ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(2) {
    -webkit-animation: dots 4s 1100ms ease infinite;
            animation: dots 4s 1100ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(2) {
    -webkit-animation: dots 4s 1100ms ease infinite;
            animation: dots 4s 1100ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(3) {
    -webkit-animation: dots 4s 1150ms ease infinite;
            animation: dots 4s 1150ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(3) {
    -webkit-animation: dots 4s 1150ms ease infinite;
            animation: dots 4s 1150ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(3) {
    -webkit-animation: dots 4s 1150ms ease infinite;
            animation: dots 4s 1150ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(3) {
    -webkit-animation: dots 4s 1150ms ease infinite;
            animation: dots 4s 1150ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(4) {
    -webkit-animation: dots 4s 1200ms ease infinite;
            animation: dots 4s 1200ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(4) {
    -webkit-animation: dots 4s 1200ms ease infinite;
            animation: dots 4s 1200ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(4) {
    -webkit-animation: dots 4s 1200ms ease infinite;
            animation: dots 4s 1200ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(4) {
    -webkit-animation: dots 4s 1200ms ease infinite;
            animation: dots 4s 1200ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(5) {
    -webkit-animation: dots 4s 1250ms ease infinite;
            animation: dots 4s 1250ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(5) {
    -webkit-animation: dots 4s 1250ms ease infinite;
            animation: dots 4s 1250ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(5) {
    -webkit-animation: dots 4s 1250ms ease infinite;
            animation: dots 4s 1250ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(5) {
    -webkit-animation: dots 4s 1250ms ease infinite;
            animation: dots 4s 1250ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(6) {
    -webkit-animation: dots 4s 1300ms ease infinite;
            animation: dots 4s 1300ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(6) {
    -webkit-animation: dots 4s 1300ms ease infinite;
            animation: dots 4s 1300ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(6) {
    -webkit-animation: dots 4s 1300ms ease infinite;
            animation: dots 4s 1300ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(6) {
    -webkit-animation: dots 4s 1300ms ease infinite;
            animation: dots 4s 1300ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(7) {
    -webkit-animation: dots 4s 1350ms ease infinite;
            animation: dots 4s 1350ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(7) {
    -webkit-animation: dots 4s 1350ms ease infinite;
            animation: dots 4s 1350ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(7) {
    -webkit-animation: dots 4s 1350ms ease infinite;
            animation: dots 4s 1350ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(7) {
    -webkit-animation: dots 4s 1350ms ease infinite;
            animation: dots 4s 1350ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(8) {
    -webkit-animation: dots 4s 1400ms ease infinite;
            animation: dots 4s 1400ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(8) {
    -webkit-animation: dots 4s 1400ms ease infinite;
            animation: dots 4s 1400ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(8) {
    -webkit-animation: dots 4s 1400ms ease infinite;
            animation: dots 4s 1400ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(8) {
    -webkit-animation: dots 4s 1400ms ease infinite;
            animation: dots 4s 1400ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(9) {
    -webkit-animation: dots 4s 1450ms ease infinite;
            animation: dots 4s 1450ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(9) {
    -webkit-animation: dots 4s 1450ms ease infinite;
            animation: dots 4s 1450ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(9) {
    -webkit-animation: dots 4s 1450ms ease infinite;
            animation: dots 4s 1450ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(9) {
    -webkit-animation: dots 4s 1450ms ease infinite;
            animation: dots 4s 1450ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(10) {
    -webkit-animation: dots 4s 1500ms ease infinite;
            animation: dots 4s 1500ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(10) {
    -webkit-animation: dots 4s 1500ms ease infinite;
            animation: dots 4s 1500ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(10) {
    -webkit-animation: dots 4s 1500ms ease infinite;
            animation: dots 4s 1500ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(10) {
    -webkit-animation: dots 4s 1500ms ease infinite;
            animation: dots 4s 1500ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(11) {
    -webkit-animation: dots 4s 1550ms ease infinite;
            animation: dots 4s 1550ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(11) {
    -webkit-animation: dots 4s 1550ms ease infinite;
            animation: dots 4s 1550ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(11) {
    -webkit-animation: dots 4s 1550ms ease infinite;
            animation: dots 4s 1550ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(11) {
    -webkit-animation: dots 4s 1550ms ease infinite;
            animation: dots 4s 1550ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(12) {
    -webkit-animation: dots 4s 1600ms ease infinite;
            animation: dots 4s 1600ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(12) {
    -webkit-animation: dots 4s 1600ms ease infinite;
            animation: dots 4s 1600ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(12) {
    -webkit-animation: dots 4s 1600ms ease infinite;
            animation: dots 4s 1600ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(12) {
    -webkit-animation: dots 4s 1600ms ease infinite;
            animation: dots 4s 1600ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(13) {
    -webkit-animation: dots 4s 1650ms ease infinite;
            animation: dots 4s 1650ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(13) {
    -webkit-animation: dots 4s 1650ms ease infinite;
            animation: dots 4s 1650ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(13) {
    -webkit-animation: dots 4s 1650ms ease infinite;
            animation: dots 4s 1650ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(13) {
    -webkit-animation: dots 4s 1650ms ease infinite;
            animation: dots 4s 1650ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(14) {
    -webkit-animation: dots 4s 1700ms ease infinite;
            animation: dots 4s 1700ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(14) {
    -webkit-animation: dots 4s 1700ms ease infinite;
            animation: dots 4s 1700ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(14) {
    -webkit-animation: dots 4s 1700ms ease infinite;
            animation: dots 4s 1700ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(14) {
    -webkit-animation: dots 4s 1700ms ease infinite;
            animation: dots 4s 1700ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(15) {
    -webkit-animation: dots 4s 1750ms ease infinite;
            animation: dots 4s 1750ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(15) {
    -webkit-animation: dots 4s 1750ms ease infinite;
            animation: dots 4s 1750ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(15) {
    -webkit-animation: dots 4s 1750ms ease infinite;
            animation: dots 4s 1750ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(15) {
    -webkit-animation: dots 4s 1750ms ease infinite;
            animation: dots 4s 1750ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(16) {
    -webkit-animation: dots 4s 1800ms ease infinite;
            animation: dots 4s 1800ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(16) {
    -webkit-animation: dots 4s 1800ms ease infinite;
            animation: dots 4s 1800ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(16) {
    -webkit-animation: dots 4s 1800ms ease infinite;
            animation: dots 4s 1800ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(16) {
    -webkit-animation: dots 4s 1800ms ease infinite;
            animation: dots 4s 1800ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(17) {
    -webkit-animation: dots 4s 1850ms ease infinite;
            animation: dots 4s 1850ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(17) {
    -webkit-animation: dots 4s 1850ms ease infinite;
            animation: dots 4s 1850ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(17) {
    -webkit-animation: dots 4s 1850ms ease infinite;
            animation: dots 4s 1850ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(17) {
    -webkit-animation: dots 4s 1850ms ease infinite;
            animation: dots 4s 1850ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(18) {
    -webkit-animation: dots 4s 1900ms ease infinite;
            animation: dots 4s 1900ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(18) {
    -webkit-animation: dots 4s 1900ms ease infinite;
            animation: dots 4s 1900ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(18) {
    -webkit-animation: dots 4s 1900ms ease infinite;
            animation: dots 4s 1900ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(18) {
    -webkit-animation: dots 4s 1900ms ease infinite;
            animation: dots 4s 1900ms ease infinite;
  }

  #redblocksparticles g:nth-child(1) g circle:nth-child(19) {
    -webkit-animation: dots 4s 1950ms ease infinite;
            animation: dots 4s 1950ms ease infinite;
  }

  #redblocksparticles g:nth-child(2) g circle:nth-child(19) {
    -webkit-animation: dots 4s 1950ms ease infinite;
            animation: dots 4s 1950ms ease infinite;
  }

  #redblocksparticles g:nth-child(3) g circle:nth-child(19) {
    -webkit-animation: dots 4s 1950ms ease infinite;
            animation: dots 4s 1950ms ease infinite;
  }

  #redblocksparticles g:nth-child(4) g circle:nth-child(19) {
    -webkit-animation: dots 4s 1950ms ease infinite;
            animation: dots 4s 1950ms ease infinite;
  }

  @-webkit-keyframes glow {
    0%, 45% {
      opacity: 0;
    }
    60%, 100% {
      opacity: 0.35;
    }
  }

  @keyframes glow {
    0%, 45% {
      opacity: 0;
    }
    60%, 100% {
      opacity: 0.35;
    }
  }
  @-webkit-keyframes dots {
    0%, 35% {
      transform: translate(0);
      opacity: 0;
    }
    60%, 80% {
      transform: translate(55px, -35px);
      opacity: 1;
    }
    100% {
      transform: translate(55px, -35px);
      opacity: 0;
    }
  }
  @keyframes dots {
    0%, 35% {
      transform: translate(0);
      opacity: 0;
    }
    60%, 80% {
      transform: translate(55px, -35px);
      opacity: 1;
    }
    100% {
      transform: translate(55px, -35px);
      opacity: 0;
    }
  }
  #purplebg > :nth-child(1) {
    -webkit-animation: up 2s 500ms ease infinite alternate;
            animation: up 2s 500ms ease infinite alternate;
  }

  #purplebg > :nth-child(2) {
    -webkit-animation: up 2s 1000ms ease infinite alternate;
            animation: up 2s 1000ms ease infinite alternate;
  }

  #purplebg > :nth-child(3) {
    -webkit-animation: up 2s 1500ms ease infinite alternate;
            animation: up 2s 1500ms ease infinite alternate;
  }

  #purplebg > :nth-child(4) {
    -webkit-animation: up 2s 2000ms ease infinite alternate;
            animation: up 2s 2000ms ease infinite alternate;
  }

  #purplebg > :nth-child(5) {
    -webkit-animation: up 2s 2500ms ease infinite alternate;
            animation: up 2s 2500ms ease infinite alternate;
  }

  #purplebg > :nth-child(6) {
    -webkit-animation: up 2s 3000ms ease infinite alternate;
            animation: up 2s 3000ms ease infinite alternate;
  }

  #purplebg > :nth-child(7) {
    -webkit-animation: up 2s 3500ms ease infinite alternate;
            animation: up 2s 3500ms ease infinite alternate;
  }

  #purplebg > :nth-child(8) {
    -webkit-animation: up 2s 4000ms ease infinite alternate;
            animation: up 2s 4000ms ease infinite alternate;
  }

  #purplebg > :nth-child(9) {
    -webkit-animation: up 2s 4500ms ease infinite alternate;
            animation: up 2s 4500ms ease infinite alternate;
  }

  #purplebg > :nth-child(10) {
    -webkit-animation: up 2s 5000ms ease infinite alternate;
            animation: up 2s 5000ms ease infinite alternate;
  }

  #purplebg > :nth-child(11) {
    -webkit-animation: up 2s 5500ms ease infinite alternate;
            animation: up 2s 5500ms ease infinite alternate;
  }

  #purplebg > :nth-child(12) {
    -webkit-animation: up 2s 6000ms ease infinite alternate;
            animation: up 2s 6000ms ease infinite alternate;
  }

  #purplebg > :nth-child(13) {
    -webkit-animation: up 2s 6500ms ease infinite alternate;
            animation: up 2s 6500ms ease infinite alternate;
  }

  #purplebg > :nth-child(14) {
    -webkit-animation: up 2s 7000ms ease infinite alternate;
            animation: up 2s 7000ms ease infinite alternate;
  }

  #purplebg > :nth-child(15) {
    -webkit-animation: up 2s 7500ms ease infinite alternate;
            animation: up 2s 7500ms ease infinite alternate;
  }

  #purplebg > :nth-child(16) {
    -webkit-animation: up 2s 8000ms ease infinite alternate;
            animation: up 2s 8000ms ease infinite alternate;
  }

  #purplebg > :nth-child(17) {
    -webkit-animation: up 2s 8500ms ease infinite alternate;
            animation: up 2s 8500ms ease infinite alternate;
  }

  #purplebg > :nth-child(18) {
    -webkit-animation: up 2s 9000ms ease infinite alternate;
            animation: up 2s 9000ms ease infinite alternate;
  }

  #purplebg > :nth-child(19) {
    -webkit-animation: up 2s 9500ms ease infinite alternate;
            animation: up 2s 9500ms ease infinite alternate;
  }

  #purplebg > :nth-child(20) {
    -webkit-animation: up 2s 10000ms ease infinite alternate;
            animation: up 2s 10000ms ease infinite alternate;
  }

  #purplebg > :nth-child(21) {
    -webkit-animation: up 2s 10500ms ease infinite alternate;
            animation: up 2s 10500ms ease infinite alternate;
  }

  @-webkit-keyframes up {
    to {
      transform: translate(0, -25px);
    }
  }

  @keyframes up {
    to {
      transform: translate(0, -25px);
    }
  }
  #bottomparticles > :nth-child(1) {
    -webkit-animation: particles 4s 300ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 300ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(1) {
    -webkit-animation: particles 4s 300ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 300ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(1) {
    -webkit-animation: particles 4s 300ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 300ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(2) {
    -webkit-animation: particles 4s 600ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 600ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(2) {
    -webkit-animation: particles 4s 600ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 600ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(2) {
    -webkit-animation: particles 4s 600ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 600ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(3) {
    -webkit-animation: particles 4s 900ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 900ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(3) {
    -webkit-animation: particles 4s 900ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 900ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(3) {
    -webkit-animation: particles 4s 900ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 900ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(4) {
    -webkit-animation: particles 4s 1200ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 1200ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(4) {
    -webkit-animation: particles 4s 1200ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 1200ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(4) {
    -webkit-animation: particles 4s 1200ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 1200ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(5) {
    -webkit-animation: particles 4s 1500ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 1500ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(5) {
    -webkit-animation: particles 4s 1500ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 1500ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(5) {
    -webkit-animation: particles 4s 1500ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 1500ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(6) {
    -webkit-animation: particles 4s 1800ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 1800ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(6) {
    -webkit-animation: particles 4s 1800ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 1800ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(6) {
    -webkit-animation: particles 4s 1800ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 1800ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(7) {
    -webkit-animation: particles 4s 2100ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 2100ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(7) {
    -webkit-animation: particles 4s 2100ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 2100ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(7) {
    -webkit-animation: particles 4s 2100ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 2100ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(8) {
    -webkit-animation: particles 4s 2400ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 2400ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(8) {
    -webkit-animation: particles 4s 2400ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 2400ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(8) {
    -webkit-animation: particles 4s 2400ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 2400ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(9) {
    -webkit-animation: particles 4s 2700ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 2700ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(9) {
    -webkit-animation: particles 4s 2700ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 2700ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(9) {
    -webkit-animation: particles 4s 2700ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 2700ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(10) {
    -webkit-animation: particles 4s 3000ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 3000ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(10) {
    -webkit-animation: particles 4s 3000ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 3000ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(10) {
    -webkit-animation: particles 4s 3000ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 3000ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(11) {
    -webkit-animation: particles 4s 3300ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 3300ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(11) {
    -webkit-animation: particles 4s 3300ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 3300ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(11) {
    -webkit-animation: particles 4s 3300ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 3300ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles > :nth-child(12) {
    -webkit-animation: particles 4s 3600ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 3600ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #bottomparticles2 > :nth-child(12) {
    -webkit-animation: particles 4s 3600ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 3600ms ease infinite alternate, p 2s ease infinite alternate;
  }

  #redglowparticles > :nth-child(12) {
    -webkit-animation: particles 4s 3600ms ease infinite alternate, p 2s ease infinite alternate;
            animation: particles 4s 3600ms ease infinite alternate, p 2s ease infinite alternate;
  }

  @-webkit-keyframes p {
    85%, 100% {
      opacity: 0;
    }
  }

  @keyframes p {
    85%, 100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes particles {
    0%, 100% {
      transform: translate(0);
    }
    50% {
      transform: translate(10px, 15px);
    }
  }
  @keyframes particles {
    0%, 100% {
      transform: translate(0);
    }
    50% {
      transform: translate(10px, 15px);
    }
  }
  .particlespoly {
    -webkit-animation: p 2s ease infinite alternate;
            animation: p 2s ease infinite alternate;
  }

  #d-app g:nth-child(1) {
    -webkit-animation: updown 2s 200ms ease-in-out infinite alternate;
            animation: updown 2s 200ms ease-in-out infinite alternate;
  }

  #d-app g:nth-child(2) {
    -webkit-animation: updown 2s 400ms ease-in-out infinite alternate;
            animation: updown 2s 400ms ease-in-out infinite alternate;
  }

  #d-app g:nth-child(3) {
    -webkit-animation: updown 2s 600ms ease-in-out infinite alternate;
            animation: updown 2s 600ms ease-in-out infinite alternate;
  }

  #d-apps2 g:nth-child(1) {
    -webkit-animation: updown 2s 200ms ease-in-out infinite alternate;
            animation: updown 2s 200ms ease-in-out infinite alternate;
  }

  #d-apps2 g:nth-child(2) {
    -webkit-animation: updown 2s 400ms ease-in-out infinite alternate;
            animation: updown 2s 400ms ease-in-out infinite alternate;
  }

  #d-apps2 g:nth-child(3) {
    -webkit-animation: updown 2s 600ms ease-in-out infinite alternate;
            animation: updown 2s 600ms ease-in-out infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(1) {
    -webkit-animation: updown 2s 50ms ease infinite alternate;
            animation: updown 2s 50ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(2) {
    -webkit-animation: updown 2s 100ms ease infinite alternate;
            animation: updown 2s 100ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(3) {
    -webkit-animation: updown 2s 150ms ease infinite alternate;
            animation: updown 2s 150ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(4) {
    -webkit-animation: updown 2s 200ms ease infinite alternate;
            animation: updown 2s 200ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(5) {
    -webkit-animation: updown 2s 250ms ease infinite alternate;
            animation: updown 2s 250ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(6) {
    -webkit-animation: updown 2s 300ms ease infinite alternate;
            animation: updown 2s 300ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(7) {
    -webkit-animation: updown 2s 350ms ease infinite alternate;
            animation: updown 2s 350ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(8) {
    -webkit-animation: updown 2s 400ms ease infinite alternate;
            animation: updown 2s 400ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(9) {
    -webkit-animation: updown 2s 450ms ease infinite alternate;
            animation: updown 2s 450ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(10) {
    -webkit-animation: updown 2s 500ms ease infinite alternate;
            animation: updown 2s 500ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(11) {
    -webkit-animation: updown 2s 550ms ease infinite alternate;
            animation: updown 2s 550ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(12) {
    -webkit-animation: updown 2s 600ms ease infinite alternate;
            animation: updown 2s 600ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(13) {
    -webkit-animation: updown 2s 650ms ease infinite alternate;
            animation: updown 2s 650ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(14) {
    -webkit-animation: updown 2s 700ms ease infinite alternate;
            animation: updown 2s 700ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(15) {
    -webkit-animation: updown 2s 750ms ease infinite alternate;
            animation: updown 2s 750ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(16) {
    -webkit-animation: updown 2s 800ms ease infinite alternate;
            animation: updown 2s 800ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(17) {
    -webkit-animation: updown 2s 850ms ease infinite alternate;
            animation: updown 2s 850ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(18) {
    -webkit-animation: updown 2s 900ms ease infinite alternate;
            animation: updown 2s 900ms ease infinite alternate;
  }

  #d-apps2wrapper g:nth-child(3) g > circle:nth-child(19) {
    -webkit-animation: updown 2s 950ms ease infinite alternate;
            animation: updown 2s 950ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(1) {
    -webkit-animation: updown 2s 50ms ease infinite alternate;
            animation: updown 2s 50ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(2) {
    -webkit-animation: updown 2s 100ms ease infinite alternate;
            animation: updown 2s 100ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(3) {
    -webkit-animation: updown 2s 150ms ease infinite alternate;
            animation: updown 2s 150ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(4) {
    -webkit-animation: updown 2s 200ms ease infinite alternate;
            animation: updown 2s 200ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(5) {
    -webkit-animation: updown 2s 250ms ease infinite alternate;
            animation: updown 2s 250ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(6) {
    -webkit-animation: updown 2s 300ms ease infinite alternate;
            animation: updown 2s 300ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(7) {
    -webkit-animation: updown 2s 350ms ease infinite alternate;
            animation: updown 2s 350ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(8) {
    -webkit-animation: updown 2s 400ms ease infinite alternate;
            animation: updown 2s 400ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(9) {
    -webkit-animation: updown 2s 450ms ease infinite alternate;
            animation: updown 2s 450ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(10) {
    -webkit-animation: updown 2s 500ms ease infinite alternate;
            animation: updown 2s 500ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(11) {
    -webkit-animation: updown 2s 550ms ease infinite alternate;
            animation: updown 2s 550ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(12) {
    -webkit-animation: updown 2s 600ms ease infinite alternate;
            animation: updown 2s 600ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(13) {
    -webkit-animation: updown 2s 650ms ease infinite alternate;
            animation: updown 2s 650ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(14) {
    -webkit-animation: updown 2s 700ms ease infinite alternate;
            animation: updown 2s 700ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(15) {
    -webkit-animation: updown 2s 750ms ease infinite alternate;
            animation: updown 2s 750ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(16) {
    -webkit-animation: updown 2s 800ms ease infinite alternate;
            animation: updown 2s 800ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(17) {
    -webkit-animation: updown 2s 850ms ease infinite alternate;
            animation: updown 2s 850ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(18) {
    -webkit-animation: updown 2s 900ms ease infinite alternate;
            animation: updown 2s 900ms ease infinite alternate;
  }

  #d-appswrapper g:nth-child(2) g > circle:nth-child(19) {
    -webkit-animation: updown 2s 950ms ease infinite alternate;
            animation: updown 2s 950ms ease infinite alternate;
  }

  @-webkit-keyframes updown {
    100% {
      transform: translate(0, -20px);
    }
  }

  @keyframes updown {
    100% {
      transform: translate(0, -20px);
    }
  }
  #Layer_1 > g:nth-child(2) > g:nth-child(18) > g:nth-child(12) {
    -webkit-animation: arrows 1s ease-in-out infinite alternate, p 2s ease infinite alternate;
            animation: arrows 1s ease-in-out infinite alternate, p 2s ease infinite alternate;
  }

  @-webkit-keyframes arrows {
    to {
      transform: translate(25px, 25px);
    }
  }

  @keyframes arrows {
    to {
      transform: translate(25px, 25px);
    }
  }
  #Layer_1 > g:nth-child(2) > g:nth-child(17) > g:nth-child(13) {
    -webkit-animation: arrows2 1s ease-in-out infinite alternate, p 2s ease infinite alternate;
            animation: arrows2 1s ease-in-out infinite alternate, p 2s ease infinite alternate;
  }

  @-webkit-keyframes arrows2 {
    to {
      transform: translate(-25px, -25px);
    }
  }

  @keyframes arrows2 {
    to {
      transform: translate(-25px, -25px);
    }
  }
  #Layer_1 > g:nth-child(2) > g:nth-child(17) > g:nth-child(12) {
    -webkit-animation: arrows 1s ease-in-out infinite alternate, p 2s ease infinite alternate;
            animation: arrows 1s ease-in-out infinite alternate, p 2s ease infinite alternate;
  }





  @media screen and (max-width: 850px){
    .contact1 {
      width: 100%;
      display: inline-block;
    }
    #contact h2 {
      margin-left: 5%;
    }
    #contact form {
      width: 90%;
      margin: 0 auto 100px;
    }
    #serviceleft {
      margin-left: 5%;
      width: 90%;
      flex: 0;
      max-width: 100%;
    }
    #serviceright {
      width: 90%;
      max-width: 90%;
      margin-left: 5%;
    }
    .servicepoint {
      width: 100%;
      padding: 50px 0 0;
      font-size: 1.2em;
  }
  #processleft h1 {
    font-size: 70px;
  }
  .process h3 {
    font-size: 30px;
  }
  #processleft {
    margin-left: 5%;
    width: 90%;
    overflow: scroll;
}
.process {
  display: inline-block;
  margin-right: 30px;
}
.process:first-child {
  width: 250px;
}
.process:nth-child(2) {
  width: 170px;
 }
.process.active h3 {
  transform: scale(1);
}
.process:nth-child(3) {
  width: 178px;
}

.process:nth-child(4) {
  width: 325px;
}

.process:nth-child(5) {
  width: 165px;
}
.processes {
  width: 1350px;
}
#processright {
  width: 90%;
}
.footer {
  text-align: left;
  margin-left: 5%;
  width: 90%;
}
#contact form input[type='submit'] {
  width: 250px;
  margin: 50px auto;
  -webkit-appearance: none;
}
.contact2 {
  text-align: left;
  margin-left: 5%;
  width: 90%;
}
.contact1 img {
  width: 30%;
  margin: 0 5% 0 0;
}

  }

  @media screen and (max-width:600px) {
    header nav {
      display: none;
    }
    #h1 {
      width: 370px;
      margin-left: -185px;
    }
    #h1 h1 {
      font-size: 50px;
      margin: 0;
    }
    #contact h2 {
      font-size: 70px;
    }
    #processright h2 {
      font-size: 1.5em;
    }

  }


  @media screen and (max-width: 400px) {
    #logo {
      margin-right: 0;
      margin-left: 2%;
  }
  }