/** bubble-dotted **/

.bubble-dotted {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }
  
  .bubble-dotted .dotted{
    position: absolute;
    border-radius: 50%;
  }
  
  .bubble-dotted .dotted-1{
    width: 11px;
    height: 11px;
    left: 100px;
    top: 50%;
    -webkit-animation: animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 15s linear infinite,sideWays 2s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-2{
    width: 7px;
    height: 7px;
    left: 240px;
    top: 40%;
    -webkit-animation: animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite,sideWays 4s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-3{
    width: 11px;
    height: 11px;
    left: 460px;
    top: 30%;
    -webkit-animation: animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 18s linear infinite,sideWays 2s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-4{
    width: 16px;
    height: 16px;
    left: 430px;
    top: 90%;
    -webkit-animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    -moz-animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-5{
    width: 6px;
    height: 6px;
    left: 50%;
    top: 50%;
    -webkit-animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-6{
    width: 9px;
    height: 9px;
    left: 70%;
    top: 230px;
    -webkit-animation: animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 11s linear infinite,sideWays 2s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-7{
    width: 6px;
    height: 6px;
    left: 65%;
    top: 30%;
    -webkit-animation: animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite,sideWays 2s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-8{
    width: 6px;
    height: 6px;
    left: 85%;
    top: 35%;
    -webkit-animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    -moz-animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite,sideWays 3s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-9{
    width: 13px;
    height: 13px;
    left: 90%;
    top: 40%;
    -webkit-animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    -moz-animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite,sideWays 4s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-10{
    width: 12px;
    height: 12px;
    left: 80%;
    top: 70%;
    -webkit-animation: animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;
    -moz-animation: animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 16s linear infinite,sideWays 2s ease-in-out infinite alternate;
  }
  
  .bubble-dotted .dotted-1{
    background: -webkit-linear-gradient(0deg, #58f106, #23c10e 50%);
  }
  
  .bubble-dotted .dotted-2{
    background: -webkit-linear-gradient(0deg, #862ff1, #163fae 50%);
  }
  
  .bubble-dotted .dotted-3{
    background: -webkit-linear-gradient(0deg, #ff5d06, #ffc806 50%);
  }
  
  .bubble-dotted .dotted-4{
    background: -webkit-linear-gradient(0deg, #d406b7, #fc1a66 50%);
  }
  
  .bubble-dotted .dotted-5{
    background: -webkit-linear-gradient(0deg, #fe5f12, #fec412 50%);
  }
  
  .bubble-dotted .dotted-6{
    background: -webkit-linear-gradient(0deg, #d622bf, #fb196a 50%);
  }
  
  .bubble-dotted .dotted-7{
    background: -webkit-linear-gradient(0deg, #60f112, #30c719 50%);
  }
  
  .bubble-dotted .dotted-8{
    background: -webkit-linear-gradient(0deg, #fe5f12, #fec412 50%);
  }
  
  .bubble-dotted .dotted-9{
    background: -webkit-linear-gradient(0deg, #842af1, #0f40aa 50%);
  }
  
  .bubble-dotted .dotted-10{
    background: -webkit-linear-gradient(0deg, #58f106, #23c10f 50%);
  }
  
  @-webkit-keyframes animateBubble{0%{margin-top:20%}100%{margin-top:-30%}}@-moz-keyframes animateBubble{0%{margin-top:20%}100%{margin-top:-30%}}@keyframes animateBubble{0%{margin-top:20%}100%{margin-top:-30%}}@-webkit-keyframes sideWays{0%{margin-left:0}100%{margin-left:25px}}@-moz-keyframes sideWays{0%{margin-left:0}100%{margin-left:25px}}@keyframes sideWays{0%{margin-left:0}100%{margin-left:25px}}