.parallax {
    clear: both;
    height: 500px; 
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
  }

  .parallax__group {
    position: relative;
    height: 500px;
    height: 90vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .base2 {
    padding-top: 20px;
  }

  .parallax__group2 {
    position: relative;
    height: 500px; 
    height: 60vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax__layer {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer2 {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 10;
  }

  .parallax__layer--deep {
    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-600px) scale(3);
    z-index: 2;
  }

  body, html {
    overflow: hidden;
  }

  body {
    font: 100% / 1.5 Arial;
  }

  * {
    margin:0;
    padding:0;
  }

  /*.parallax {
    font-size: 200%;
  }*/

  .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .balloons1 {
    width: 90%;
  }

.sumome-control.sumome-control-left, .sumome-share-client-wrapper.sumome-share-client-wrapper-left-page {
  display: none;
}
   /*style the groups
  --------------------------------------------- */

  #group1 {
    z-index: 5;
    background: #f9a022; 
  }
  
  #group1 .parallax__layer--base {
    text-align: center;
    overflow: hidden;
    height: 100%;
  }

  #group1 .parallax__layer--base h1 {
    color: #ffffff;
    font-size: 50px;
  }

  #group1 .parallax__layer--base p {
    color: #ffffff;
    font-size: 30px;
    max-width: 1250px;
    text-align: center;
    margin: 0 auto;
  }

  #group1 .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
    text-align: center;
    padding-top: 140px;
    height: 400px;
  }


  #group1 .parallax__layer--fore h1 {
    color: #ffffff;
    font-size: 50px;
  }

  #group1 .parallax__layer--fore p {
    color: #ffffff;
    font-size: 30px;
    max-width: 1250px;
    text-align: center;
    margin: 0 auto;
    padding: 0 10px;
  }

  #group1 .parallax__layer--base .bottomcloud1 {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    z-index: 5;
  }

  #group1 .parallax__layer--base .line {
    position: absolute;
    bottom: 80px;
    right: 50px;
    z-index: 5;
  }

  #group1 .parallax__layer--base .dot0 {
    position: absolute;
    width: 35px;
    bottom: 315px;
    right: 1830px;
    z-index: 6;
  }

  #group1 .parallax__layer--base .blink0 {
    position: absolute;
    -webkit-animation: pulse2 7s infinite;
    animation: pulse2 7s infinite;
    width: 35px;
    bottom: 315px;
    right: 1830px;
    z-index: 5;
    opacity: 0;
  }

  #group1 .parallax__layer--base .dot1 {
    position: absolute;
    width: 35px;
    bottom: 280px;
    right: 1600px;
    z-index: 6;
  }

  #group1 .parallax__layer--base .blink1 {
    position: absolute;
    -webkit-animation: pulse 7s infinite;
    animation: pulse 7s infinite;
    width: 35px;
    bottom: 280px;
    right: 1600px;
    z-index: 5;
    opacity: 0;
  }

  #group1 #headText1 {
    width: 110px;
    height: 180px;  
    text-align: center;
    position: absolute;
    top: 30px;
    left: 45px;
    box-sizing: border-box;
    padding: 10px 5px;
    opacity: 0;
  }

  #group1 #headText2 {
    width: 225px;
    height: 165px;  
    text-align: center;
    position: absolute;
    top: 35px;
    left: 55px;
    box-sizing: border-box;
    padding: 20px 5px;
    opacity: 0;
  }

  #group1 #headText3 {
    width: 290px;
    height: 165px;  
    text-align: center;
    position: absolute;
    top: 30px;
    left: 25px;
    box-sizing: border-box;
    padding: 40px 5px;
    opacity: 0;
  }

  #group1 #headText1 h2 {
    font-size: 23px;
    line-height: 28px;
    color: #00BDDD;
  }

  #group1 #headText2 h2, #group1 #headText3 h2 {
    font-size: 30px;
    color: #00BDDD;
    text-shadow: 1px 1px 1px #252525;
  }

  #group1 #headText1 p, #group1 #headText2 p, #group1 #headText3 p {
   font-size: 18px;
   line-height: normal;
  }

  #group1 .parallax__layer--base .dot2 {
    position: absolute;
    width: 35px;
    bottom: 190px;
    right: 1410px;
    z-index: 6;
  }

  #group1 .parallax__layer--base .blink2 {
    position: absolute;
    -webkit-animation: pulse2 7s infinite;
    animation: pulse2 7s infinite;
    width: 35px;
    bottom: 190px;
    right: 1410px;
    z-index: 5;
    opacity: 0;
  }

  #group1 .parallax__layer--base .dot3 {
    position: absolute;
    width: 35px;
    bottom: 100px;
    right: 1210px;
    z-index: 6;
  }

  #group1 .parallax__layer--base .blink3 {
    position: absolute;
    -webkit-animation: pulse 7s infinite;
    animation: pulse 7s infinite;
    width: 35px;
    bottom: 100px;
    right: 1210px;
    z-index: 5;
    opacity: 0;
  }

  #group1 .parallax__layer--base .dot4 {
    position: absolute;
    width: 35px;
    bottom: 65px;
    right: 980px;
    z-index: 6;
  }

  #group1 .parallax__layer--base .blink4 {
    position: absolute;
    -webkit-animation: pulse2 7s infinite;
    animation: pulse2 7s infinite;
    width: 35px;
    bottom: 65px;
    right: 980px;
    z-index: 5;
    opacity: 0;
  }

  #group1 .parallax__layer--base .dot5 {
    position: absolute;
    width: 35px;
    bottom: 115px;
    right: 700px;
    z-index: 6;
  }

  #group1 .parallax__layer--base .blink5 {
    position: absolute;
    -webkit-animation: pulse 7s infinite;
    animation: pulse 7s infinite;
    width: 35px;
    bottom: 115px;
    right: 700px;
    z-index: 5;
    opacity: 0;
  }

  #group1 .parallax__layer--base .dot6 {
    position: absolute;
     width: 35px;
    bottom: 235px;
    right: 450px;
    z-index: 6;
  }

  #group1 .parallax__layer--base .blink6 {
    position: absolute;
    -webkit-animation: pulse2 7s infinite;
    animation: pulse2 7s infinite;
    width: 35px;
    bottom: 235px;
    right: 450px;
    z-index: 5;
    opacity: 0;
  }

  #group1 .parallax__layer--base .dot7 {
    position: absolute;
    width: 35px;
    bottom: 310px;
    right: 210px;
    z-index: 6;
  }

  #group1 .parallax__layer--base .blink7 {
    position: absolute;
    -webkit-animation: pulse 7s infinite;
    animation: pulse 7s infinite;
    width: 35px;
    bottom: 310px;
    right: 210px;
    z-index: 5;
    opacity: 0;
  }

  #group1 .parallax__layer--base .blink8 {
    position: absolute;
    -webkit-animation: pulse3 3s infinite;
    animation: pulse3 3s infinite;
    width: 35px;
    top: -20px;
    left: 15px;
    z-index: 1;
    opacity: 0;
    display: none;
  }

  #group1 .parallax__layer--base .blink9A {
    position: absolute;
    -webkit-animation: pulse3 3s infinite;
    animation: pulse3 3s infinite;
    width: 35px;
    top: -20px;
    left: 15px;
    z-index: 1;
    opacity: 0;
    display: none;
  }

  #group1 .parallax__layer--base .blink9B {
    position: absolute;
    -webkit-animation: pulse3 3s infinite;
    animation: pulse3 3s infinite;
    width: 35px;
    top: -20px;
    right: 15px;
    z-index: 1;
    opacity: 0;
    display: none;
  }

  #group1 .parallax__layer--base .blink10 {
    position: absolute;
    -webkit-animation: pulse3 3s infinite;
    animation: pulse3 3s infinite;
    width: 35px;
    top: -20px;
    right: -10px;
    z-index: 1;
    opacity: 0;
    display: none;
  }

  @-webkit-keyframes pulse3 {
    0% {
      opacity: 0;
    }
    45% {
      -webkit-transform: scale(1,1);
      opacity: 0;
    }

    55% {
      -webkit-transform: scale(4,4);
      opacity: 0.8;
    }

    65% {
      -webkit-transform: scale(1,1);
      opacity: 0;
    }

    100% {
      -webkit-transform: scale(1,1);
      opacity: 0;
    }
  }

  @keyframes pulse3 {
    0% {
      opacity: 0;
    }
    45% {
      -ms-transform: scale(1,1);
      transform: scale(1,1);
      opacity: 0;
    }
    55% {
      -ms-transform: scale(4,4);
      transform: scale(4,4);
      opacity: 0.6;
    }
    65 % {
      -ms-transform: scale(1,1);
      transform: scale(1,1);
      opacity: 0;
    }
    100% {
      -ms-transform: scale(1,1);
      transform: scale(1,1);
      opacity: 0;
    }
  }

  @-webkit-keyframes pulse {
    0% {
      opacity: 0;
    }
    70% {
      -webkit-transform: scale(1,1);

    }

    80% {
      -webkit-transform: scale(2,2);
      opacity: 0.8;
    }

    100% {
      -webkit-transform: scale(1,1);
      opacity: 0;
    }
  }

  @keyframes pulse {
    0% {
      opacity: 0;
    }
    70% {
      -ms-transform: scale(1,1);
      transform: scale(1,1);
      
    }
    80% {
      -ms-transform: scale(2,2);
      transform: scale(2,2);
      opacity: 0.6;
    }

    100% {
      -ms-transform: scale(1,1);
      transform: scale(1,1);
      opacity: 0;
    }
  }

  @-webkit-keyframes pulse2 {
    0% {
      opacity: 0;
    }
    20% {
     -webkit-transform: scale(1,1);

    }
    30% {
      -webkit-transform: scale(2,2);
      opacity: 0.6;
    }
    40% {
       -webkit-transform: scale(1,1);
       opacity: 0;
    }

    100% {
      -webkit-transform: scale(1,1);
      opacity: 0;
    }
  }

  @keyframes pulse2 {
    0% {
      opacity: 0;
    }
    20% {
      -ms-transform: scale(1,1);
      transform: scale(1,1);

    }
    30% {
      -ms-transform: scale(2,2);
      transform: scale(2,2);
      opacity: 0.6;
    }
    40% {
      -ms-transform: scale(1,1);
      transform: scale(1,1);
      opacity: 0;
    }

    100% {
      -ms-transform: scale(1,1);
      transform: scale(1,1);
      opacity: 0;
    }
  }

  #group1 .parallax__layer--base .plane {
    position: absolute;
    right: 20px;
    bottom: 255px;  
    z-index: 5;
    -webkit-animation: planemove 5s infinite;
    animation: planemove 5s infinite;
  }

  @-webkit-keyframes planemove {
    50% {
      bottom: 265px; }

    100% {
      bottom: 255px; }
  }

  @keyframes planemove {
    50% {
      bottom: 265px; }

    100% {
      bottom: 255px; }
  }

  #group1 .parallax__layer--base .outerWrap {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 20;
    height: 40%;
  }

  #group1 .parallax__layer--base .deviceWrap {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
  }


  /** New Device Effects & Styles **/

  #group1 .parallax__layer--base .outerWrap2 {
    width: 100%;
    position: absolute;
    bottom: 75px;
    left: 0;
    z-index: 20;
    height: 290px;
  }

  #group1 .parallax__layer--base .deviceWrap2 {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top: 0;
  }

  #mobile2 {
    width: 192px;
    height: 470px;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: bottom 0.8s ease;
    transition: bottom 0.8s ease;
    position: relative;
    bottom: 0;
    left: 0;
    margin: 0 10px;
  }

  #mobile2 .gadget {
    position: relative;
    width: 192px;
    height: 470px;
    background: url(../img/header/hand_phone2.svg) no-repeat;
    background-size: 192px 470px;
    display: block;
    z-index: 10;
  }

  #tablet2 {
    width: 336px;
    height: 382px;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: bottom 0.8s ease;
    transition: bottom 0.8s ease;
    position: relative;
    bottom: 0;
    margin: 0 10px;
  }

  #tablet2 .gadget {
    position: relative;
    width: 336px;
    height: 382px;
    background: url(../img/header/hand_tablet2.svg) no-repeat;
    background-size: 336px 382px;
    display: block;
    z-index: 10;
  }

  #desktop2 {
    width: 336px;
    height: 413px;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: bottom 0.8s ease;
    transition: bottom 0.8s ease;
    position: relative;
    bottom: 0;
    right: 0;
    margin: 0 10px;
  }

  #desktop2 .gadget {
    position: relative;
    width: 336px;
    height: 413px;
    background: url(../img/header/hand_desktop2.svg) no-repeat;
    background-size: 336px 413px;
    display: block;
    z-index: 10;
  }
  
  /** Preload Images 
  #mobile2 .gadget:before {
    width: 0;
    height: 0;
    content: url(../img/header/hand_phone_active2.svg) no-repeat;
    visibility: hidden;
  }

  #tablet2 .gadget:before{
    width: 0;
    height: 0;
    content: url(../img/header/hand_tablet_active2.svg) no-repeat;
    visibility: hidden;
  }

  #desktop2 .gadget:before {
    width: 0;
    height: 0;
    content: url(../img/header/hand_desktop_active2.svg) no-repeat;
    visibility: hidden;
  }**/

  /**  End Preload Images **/

  #mobile2:hover {
    bottom: 60px;
  }

  #mobile2:hover .blink8 {
    display: block;
  }

  #mobile2:hover .gadget {
    background: url(../img/header/hand_phone_active2.svg) no-repeat;
    background-size: 192px 470px;
  }

  #tablet2:hover {
    bottom: 90px;
  }

  #tablet2:hover .blink9A, #tablet2:hover .blink9B{
    display: block;
  }

  #tablet2:hover .gadget {
    background: url(../img/header/hand_tablet_active2.svg) no-repeat;
    background-size: 336px 382px;
  }

  #desktop2:hover {
    bottom: 80px;
  }

  #desktop2:hover .gadget {
    background: url(../img/header/hand_desktop_active2.svg) no-repeat;
    background-size: 336px 413px;
  }

  #desktop2:hover .blink10 {
    display: block;
  }

  #mobile2:hover #headText1 {
    opacity: 1;
  }

  #tablet2:hover #headText2 {
    opacity: 1;
  }

  #desktop2:hover #headText3 {
    opacity: 1;
  }

  #group1 .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
  }
  
  #group1 .parallax__layer--fore2 {
    -webkit-transform: translateZ(70px) scale(.7);
    transform: translateZ(70px) scale(.7);
    z-index: 1;
    -webkit-transition: 60s ease 20s;
    -moz-transition: 60s ease 20s;
    transition: 60s ease 20s;
  }

  #group2 {
    z-index: 3;
  }
  #group2 .parallax__layer--back {
    background: rgb(123,210,102);
  }

  #group3 {
    z-index: 4;
  }

  #group3 .parallax__layer--base {
    background: rgb(153,216,101);
  }

  #group4 {
    z-index: 2;
  }

  #group4 .title {
    text-align: center;
    position: absolute;
    left: 50%;
    top: 43%;
    -webkit-transform: translate(-50%, -10%);
    transform: translate(-50%, -10%);
  }

  #group4 .viewClients {
    color: #ff6a2f;
  }

  #group4 .title p {
    font-size: 24px;
    color: #585858;
  }

  #group4 .intro {
    background: #099db7;
    text-align: center;
    padding: 30px 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
  }

  #group4 .parallax__layer--back {
    background: #fef9dc;
    text-align: center;
    z-index: 10;
  }

  #group4 .parallax__layer--base {
    text-align: center;
    position: relative;
    top: 20px;
  }

  #group4 .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(90px) scale(.7);
    z-index: 1;
    top: -200px;
  }

  #group5 {
    z-index: 3;
  }

  #group5 .parallax__layer--base {
    background: rgb(214,229,100);
  }

  #group6 {
    z-index: 2;
  }

  #group6 .parallax__layer--back {
    background: rgb(245,235,100);
  }

  #group7 {
    z-index: 3;
  }

  #group7 .parallax__layer--base {
    background: rgb(255,241,100);
  }