#preloader{
    text-align: center;
    font-size: 1.5rem;
    color: #124472;
    font-family: Roboto, arial, sans-serif;
    font-weight: 900;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;
    width: 300px;
    height: 90px;
    line-height: 90px;
    background: url("../img/bubble.png") no-repeat center center / auto 100%;
}
#preloader>div{
    width: 90px;
    border-radius: 45px;
    margin: 0 auto;
    animation:greenPulse 10s infinite;
    -webkit-animation:greenPulse 10s infinite;
    -moz-animation:greenPulse 10s infinite;
    -o-animation:greenPulse 10s infinite;
}

@keyframes greenPulse {
    0% {box-shadow:0 0 30px #4bbec8}
    50% {box-shadow:0 0 80px #4bbec8}
    100% {box-shadow:0 0 30px #4bbec8}
}
@-webkit-keyframes greenPulse {
    0% {-webkit-box-shadow:0 0 30px #4bbec8}
    50% {-webkit-box-shadow:0 0 80px #4bbec8}
    100% {-webkit-box-shadow:0 0 30px #4bbec8}
}
@-moz-keyframes greenPulse {
    0% {-moz-box-shadow:0 0 30px #4bbec8}
    50% {-moz-box-shadow:0 0 80px #4bbec8}
    100% {-moz-box-shadow:0 0 30px #4bbec8}
}
@-o-keyframes greenPulse {
    0% {-o-box-shadow:0 0 30px #4bbec8}
    50% {-o-box-shadow:0 0 80px #4bbec8}
    100% {-o-box-shadow:0 0 30px #4bbec8}
}

@keyframes bubbleUp {
    0% {bottom:-50px;-webkit-transform:scale(.9);opacity:0}
     5% {bottom:0px;-webkit-transform:scale(.3);opacity:0}
    30% {bottom:110px;-webkit-transform:scale(.8);opacity:1}
    95% {bottom:545px;-webkit-transform:scale(.3);opacity:1}
    99% {bottom:550px;-webkit-transform:scale(3);opacity:0}
    100% {bottom:10px;-webkit-transform:scale(.9);opacity:0}
}
@-webkit-keyframes bubbleUp {
    0% {bottom:-50px;-webkit-transform:scale(.9);opacity:0}
     5% {bottom:0px;-webkit-transform:scale(.3);opacity:0}
    30% {bottom:110px;-webkit-transform:scale(.8);opacity:1}
    95% {bottom:545px;-webkit-transform:scale(.3);opacity:1}
    99% {bottom:550px;-webkit-transform:scale(3);opacity:0}
    100% {bottom:10px;-webkit-transform:scale(.9);opacity:0}
}
@-moz-keyframes bubbleUp {
    0% {bottom:-50px;-moz-transform:scale(.9);opacity:0}
     5% {bottom:0px;-moz-transform:scale(.3);opacity:0}
    30% {bottom:110px;-moz-transform:scale(.8);opacity:1}
    95% {bottom:545px;-moz-transform:scale(.3);opacity:1}
    99% {bottom:550px;-moz-transform:scale(3);opacity:0}
    100% {bottom:10px;-moz-transform:scale(.9);opacity:0}
}
@-o-keyframes bubbleUp {
    0% {bottom:-50px;-o-transform:scale(.9);opacity:0}
     5% {bottom:0px;-o-transform:scale(.3);opacity:0}
    30% {bottom:110px;-o-transform:scale(.8);opacity:1}
    95% {bottom:545px;-o-transform:scale(.3);opacity:1}
    99% {bottom:550px;-o-transform:scale(3);opacity:0}
    100% {bottom:10px;-o-transform:scale(.9);opacity:0}
}

@keyframes bubbleUp1 {
    0% {bottom:10px;transform:scale(.3);opacity:0}
     5% {bottom:80px;transform:scale(.2);opacity:0}
    30% {bottom:90px;transform:scale(.2);opacity:1}
    95% {bottom:500px;transform:scale(.4);opacity:1}
    99% {bottom:550px;transform:scale(.2);opacity:0}
    100% {bottom:20px;transform:scale(.9);opacity:0}
}
@-webkit-keyframes bubbleUp1 {
    0% {bottom:10px;-webkit-transform:scale(.3);opacity:0}
     5% {bottom:80px;-webkit-transform:scale(.2);opacity:0}
    30% {bottom:90px;-webkit-transform:scale(.2);opacity:1}
    95% {bottom:500px;-webkit-transform:scale(.4);opacity:1}
    99% {bottom:550px;-webkit-transform:scale(.2);opacity:0}
    100% {bottom:20px;-webkit-transform:scale(.9);opacity:0}
}
@-moz-keyframes bubbleUp1 {
    0% {bottom:10px;-moz-transform:scale(.3);opacity:0}
     5% {bottom:80px;-moz-transform:scale(.2);opacity:0}
    30% {bottom:90px;-moz-transform:scale(.2);opacity:1}
    95% {bottom:500px;-moz-transform:scale(.4);opacity:1}
    99% {bottom:550px;-moz-transform:scale(.2);opacity:0}
    100% {bottom:20px;-moz-transform:scale(.9);opacity:0}
}
@-o-keyframes bubbleUp1 {
    0% {bottom:10px;-o-transform:scale(.3);opacity:0}
     5% {bottom:80px;-o-transform:scale(.2);opacity:0}
    30% {bottom:90px;-o-transform:scale(.2);opacity:1}
    95% {bottom:500px;-o-transform:scale(.4);opacity:1}
    99% {bottom:550px;-o-transform:scale(.2);opacity:0}
    100% {bottom:20px;-o-transform:scale(.9);opacity:0}
}

@keyframes bubbleUp2 {
    0% {bottom:-50px;transform:scale(1);opacity:0}
     5% {bottom:0px;transform:scale(.3);opacity:0}
    30% {bottom:110px;transform:scale(.9);opacity:1}
    95% {bottom:650px;transform:scale(.3);opacity:1}
    99% {bottom:655px;transform:scale(3);opacity:0}
    100% {bottom:10px;transform:scale(1);opacity:0}
}
@-webkit-keyframes bubbleUp2 {
    0% {bottom:-50px;-webkit-transform:scale(1);opacity:0}
     5% {bottom:0px;-webkit-transform:scale(.3);opacity:0}
    30% {bottom:110px;-webkit-transform:scale(.9);opacity:1}
    95% {bottom:650px;-webkit-transform:scale(.3);opacity:1}
    99% {bottom:655px;-webkit-transform:scale(3);opacity:0}
    100% {bottom:10px;-webkit-transform:scale(1);opacity:0}
}
@-moz-keyframes bubbleUp2 {
    0% {bottom:-50px;-moz-transform:scale(1);opacity:0}
     5% {bottom:0px;-moz-transform:scale(.3);opacity:0}
    30% {bottom:110px;-moz-transform:scale(.9);opacity:1}
    95% {bottom:650px;-moz-transform:scale(.3);opacity:1}
    99% {bottom:655px;-moz-transform:scale(3);opacity:0}
    100% {bottom:10px;-moz-transform:scale(1);opacity:0}
}
@-o-keyframes bubbleUp2 {
    0% {bottom:-50px;-o-transform:scale(1);opacity:0}
     5% {bottom:0px;-o-transform:scale(.3);opacity:0}
    30% {bottom:110px;-o-transform:scale(.9);opacity:1}
    95% {bottom:650px;-o-transform:scale(.3);opacity:1}
    99% {bottom:655px;-o-transform:scale(3);opacity:0}
    100% {bottom:10px;-o-transform:scale(1);opacity:0}
}

@keyframes bubbleUp3 {
    0% {bottom:-50px;transform:scale(1);opacity:0}
     5% {bottom:0px;transform:scale(.3);opacity:0}
    30% {bottom:110px;transform:scale(.9);opacity:1}
    95% {bottom:495px;transform:scale(.3);opacity:1}
    99% {bottom:500px;transform:scale(3);opacity:0}
    100% {bottom:10px;transform:scale(1);opacity:0}
}
@-webkit-keyframes bubbleUp3 {
    0% {bottom:-50px;-webkit-transform:scale(1);opacity:0}
     5% {bottom:0px;-webkit-transform:scale(.3);opacity:0}
    30% {bottom:110px;-webkit-transform:scale(.9);opacity:1}
    95% {bottom:495px;-webkit-transform:scale(.3);opacity:1}
    99% {bottom:500px;-webkit-transform:scale(3);opacity:0}
    100% {bottom:10px;-webkit-transform:scale(1);opacity:0}
}
@-moz-keyframes bubbleUp3 {
    0% {bottom:-50px;-moz-transform:scale(1);opacity:0}
     5% {bottom:0px;-moz-transform:scale(.3);opacity:0}
    30% {bottom:110px;-moz-transform:scale(.9);opacity:1}
    95% {bottom:495px;-moz-transform:scale(.3);opacity:1}
    99% {bottom:500px;-moz-transform:scale(3);opacity:0}
    100% {bottom:10px;-moz-transform:scale(1);opacity:0}
}
@-o-keyframes bubbleUp3 {
    0% {bottom:-50px;-o-transform:scale(1);opacity:0}
     5% {bottom:0px;-o-transform:scale(.3);opacity:0}
    30% {bottom:110px;-o-transform:scale(.9);opacity:1}
    95% {bottom:495px;-o-transform:scale(.3);opacity:1}
    99% {bottom:500px;-o-transform:scale(3);opacity:0}
    100% {bottom:10px;-o-transform:scale(1);opacity:0}
}

@keyframes bubbleUp4 {
    0% {bottom:-50px;transform:scale(1);opacity:0}
     5% {bottom:0px;transform:scale(.3);opacity:0}
    30% {bottom:110px;transform:scale(.9);opacity:1}
    95% {bottom:595px;transform:scale(.3);opacity:1}
    99% {bottom:600px;transform:scale(3);opacity:0}
    100% {bottom:10px;transform:scale(1);opacity:0}
}
@-webkit-keyframes bubbleUp4 {
    0% {bottom:-50px;-webkit-transform:scale(1);opacity:0}
     5% {bottom:0px;-webkit-transform:scale(.3);opacity:0}
    30% {bottom:110px;-webkit-transform:scale(.9);opacity:1}
    95% {bottom:595px;-webkit-transform:scale(.3);opacity:1}
    99% {bottom:600px;-webkit-transform:scale(3);opacity:0}
    100% {bottom:10px;-webkit-transform:scale(1);opacity:0}
}
@-moz-keyframes bubbleUp4 {
    0% {bottom:-50px;-moz-transform:scale(1);opacity:0}
     5% {bottom:0px;-moz-transform:scale(.3);opacity:0}
    30% {bottom:110px;-moz-transform:scale(.9);opacity:1}
    95% {bottom:595px;-moz-transform:scale(.3);opacity:1}
    99% {bottom:600px;-moz-transform:scale(3);opacity:0}
    100% {bottom:10px;-moz-transform:scale(1);opacity:0}
}
@-o-keyframes bubbleUp4 {
    0% {bottom:-50px;-o-transform:scale(1);opacity:0}
     5% {bottom:0px;-o-transform:scale(.3);opacity:0}
    30% {bottom:110px;-o-transform:scale(.9);opacity:1}
    95% {bottom:595px;-o-transform:scale(.3);opacity:1}
    99% {bottom:600px;-o-transform:scale(3);opacity:0}
    100% {bottom:10px;-o-transform:scale(1);opacity:0}
}
div#preloader span.glow {
    width:100%;
    height:100%;background:##222;
    position:relative;
    display:block;
    border-radius:200px;
    animation:greenPulse 2s infinite;
    -webkit-animation:greenPulse 2s infinite;
    -moz-animation:greenPulse 2s infinite;
    -o-animation:greenPulse 2s infinite;
    background: url("../img/bubble.png") no-repeat center center / 100% auto;
}
div#preloader span.bubble {
    background:#fff;
    width:80px;
    height:80px;
    position:absolute;
    display:block;
    left:110px;
    bottom:1px;
    border-radius:100px;
    background:-moz-radial-gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
    background:-webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75,190,200,.2)), to(rgba(255,255,255,.7)));
    background:gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(9,133,167,0.1) 51%, rgba(9,133,167,0.3) 71%, rgba(9,133,167,.7) 100%);
    animation:bubbleUp 2s infinite ease-in-out;
    -webkit-animation:bubbleUp 2s infinite ease-in-out;
    -o-animation:bubbleUp 2s infinite ease-in-out;
    -moz-animation:bubbleUp 2s infinite ease-in-out;
}
div#preloader span.bubble1 {
    background:#fff;
    width:70px;
    height:70px;
    position:absolute;
    display:block;
    left:115px;
    bottom:1px;
    border-radius:80px;
    background:-moz-radial-gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
    background:-webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75,190,200,.2)), to(rgba(255,255,255,.7)));
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(9,133,167,0.1) 51%, rgba(9,133,167,0.3) 71%, rgba(9,133,167,.7) 100%);
    animation:bubbleUp 2.5s infinite;
    -webkit-animation:bubbleUp1 2.5s infinite;
    -o-animation:bubbleUp1 2.5s infinite;
    -moz-animation:bubbleUp1 2.5s infinite;
}
div#preloader span.bubble2 {
    background:#fff;
    width:30px;
    height:30px;
    position:absolute;
    display:block;
    left:110px;
    bottom:1px;
    border-radius:60px;
    background:-moz-radial-gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
    background:-webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75,190,200,.2)), to(rgba(255,255,255,.7)));
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(9,133,167,0.1) 51%, rgba(9,133,167,0.3) 71%, rgba(9,133,167,.7) 100%);
    animation:bubbleUp 3.5s infinite;
    -webkit-animation:bubbleUp2 3.5s infinite;
    -o-animation:bubbleUp2 3.5s infinite;
    -moz-animation:bubbleUp2 3.5s infinite;
}
div#preloader span.bubble3 {
    background:#fff;
    width:50px;
    height:50px;
    position:absolute;
    display:block;
    left:140px;
    bottom:-10px;
    border-radius:100px;
    background:-moz-radial-gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
    background:-webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75,190,200,.2)), to(rgba(255,255,255,.7)));
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(9,133,167,0.1) 51%, rgba(9,133,167,0.3) 71%, rgba(9,133,167,.7) 100%);
    animation:bubbleUp 5s infinite;
    -webkit-animation:bubbleUp3 5s infinite;
    -o-animation:bubbleUp3 5s infinite;
    -moz-animation:bubbleUp3 5s infinite;
}
div#preloader span.bubble4 {
    background:#fff;
    width:40px;
    height:40px;
    position:absolute;
    display:block;
    left:155px;
    bottom:1px;
    border-radius:100px;
    background:-moz-radial-gradient(center 45deg, circle closest-corner, rgba(75,190,200,0), rgba(75,190,200,.1), rgba(75,190,200,.3), rgba(255,255,255,.7));
    background:-webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75,190,200,.2)), to(rgba(255,255,255,.7)));
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(9,133,167,0.1) 51%, rgba(9,133,167,0.3) 71%, rgba(9,133,167,.7) 100%);
    animation:bubbleUp4 5.5s infinite;
    -webkit-animation:bubbleUp4 5.5s infinite;
    -o-animation:bubbleUp4 5.5s infinite;
    -moz-animation:bubbleUp4 5.5s infinite;
}