/**
  *  Static bubbles for small screens
  */

#bubble1 {
    display: none;
    position: relative;
    bottom: -30em;
    right: 10em;
    z-index: 1;
}

#bubble2 {
    display: none;
    position: relative;
    bottom: -22em;
    right: 9em;
    z-index: 1;
}

#bubble3 {
    display: none;
    position: relative;
    bottom: -13em;
    right: 15em;
    z-index: 1;
}

@media (max-width: 1260px) {
    #bubble1 {
        display: inline-block;
    }

    #bubble2 {
        display: inline-block;
    }

    #bubble3 {
        display: inline-block;
    }
}

@media (max-width: 990px) {
    #bubble1 {
        bottom: -11em;
        right: 13em;
    }

    #bubble2 {
        bottom: -4em;
        right: 8em;
    }

    #bubble3 {
        bottom: -3em;
        right: 20em;
    }
}

@media (max-width: 768px) {
    #bubble1 {
        bottom: -4em;
        right: 10em;
    }

    #bubble2 {
        display: none;
    }

    #bubble3 {
        display: none;
    }
}

/**
  *  Bubbles created with css
  */

#css-bubble-1 {
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    left: 18em;
    top: 35em;
    z-index: 3;
}

#css-bubble-1:before {
    content: '';
    position: absolute;
    top: 20%;
    right: 20%;
    width: 0.2em;
    height: 0.2em;
    border-radius: 50%;
    background-color: #ffffff;
}

#css-bubble-2 {
    position: absolute;
    width: 2em;
    height: 2em;
    background-color: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    left: 18em;
    top: 35em;
}

#css-bubble-2:before {
    content: '';
    position: absolute;
    top: 20%;
    right: 20%;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background-color: #ffffff;
}

#css-bubble-3 {
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    background-color: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    left: 18em;
    top: 35em;
}

#css-bubble-3:before {
    content: '';
    position: absolute;
    top: 20%;
    right: 20%;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background-color: #ffffff;
}

#css-bubble-4 {
    position: absolute;
    width: 3em;
    height: 3em;
    background-color: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    left: 18em;
    top: 35em;
}

#css-bubble-4:before {
    content: '';
    position: absolute;
    top: 20%;
    right: 20%;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background-color: #ffffff;
}

#css-bubble-5 {
    position: relative;
    width: 1.2em;
    height: 1.2em;
    background-color: transparent;
    border: 2px solid #ffffff;
    border-radius: 50%;
    left: 18em;
    top: 35em;
}

#css-bubble-5:before {
    content: '';
    position: absolute;
    top: 20%;
    right: 20%;
    width: 0.25em;
    height: 0.25em;
    border-radius: 50%;
    background-color: #ffffff;
}

@media (max-width: 1270px) {
    #css-bubble-1 {
        display: none;
    }

    #css-bubble-2 {
        display: none;
    }

    #css-bubble-3 {
        display: none;
    }

    #css-bubble-4 {
        display: none;
    }

    #css-bubble-5 {
        display: none;
    }
}

/**
  *  Animations
  */

.bubble-1 {
    animation-name: bubble1;
    animation-delay: 1s;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;

    -webkit-animation-name: bubble1;
    -webkit-animation-delay: 1s;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
}

@keyframes bubble1 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 17em;
    }
    50% {
        left: 20em;
    }
    75% {
        left: 19em;
    }
    100% {
        top: 0em;
        left: 18em;
    }
}

@-webkit-keyframes bubble1 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 17em;
    }
    50% {
        left: 20em;
    }
    75% {
        left: 19em;
    }
    100% {
        top: 0em;
        left: 18em;
    }
}

.bubble-2 {
    animation-name: bubble2;
    animation-delay: 3s;
    animation-duration: 13s;
    animation-iteration-count:infinite;
    animation-timing-function: ease;

    -webkit-animation-name:bubble2;
    -webkit-animation-delay: 3s;
    -webkit-animation-duration: 13s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function: ease;
}

@keyframes bubble2 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 15em;
    }
    50% {
        left: 21em;
    }

    100% {
        top: -36em;
        left: -19em;
    }
}

@-webkit-keyframes bubble2 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 15em;
    }
    50% {
        left: 21em;
    }

    100% {
        top: -36em;
        left: -19em;
    }
}

.bubble-3 {
    animation-name: bubble3;
    animation-delay: 5s;
    animation-duration: 10s;
    animation-iteration-count:infinite;
    animation-timing-function: ease;

    -webkit-animation-name: bubble3;
    -webkit-animation-delay: 5s;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function: ease;
}

@keyframes bubble3 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 16em;
    }
    50% {
        left: 14em;
    }
    75% {
        left: 12em;
    }
    100% {
        top: -5em;
        left: 15em;
    }
}

@-webkit-keyframes bubble3 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 16em;
    }
    50% {
        left: 14em;
    }
    75% {
        left: 12em;
    }
    100% {
        top: -5em;
        left: 15em;
    }
}

.bubble-4 {
    animation-name: bubble4;
    animation-delay: 2s;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;

    -webkit-animation-name: bubble4;
    -webkit-animation-delay: 2s;
    -webkit-animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in;
}

@keyframes bubble4 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 16em;
    }
    50% {
        left: 21em;
    }
    75% {
        left: 23em;
    }
    100% {
        top: -45em;
        left: 0em;
    }
}

@-webkit-keyframes bubble4 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 16em;
    }
    50% {
        left: 21em;
    }
    75% {
        left: 23em;
    }
    100% {
        top: -45em;
        left: 0em;
    }
}

.bubble-5 {
    animation-name: bubble5;
    animation-delay: 3s;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;

    -webkit-animation-name: bubble5;
    -webkit-animation-delay: 3s;
    -webkit-animation-duration: 12s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-out;
}

@keyframes bubble5 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 16em;
    }
    50% {
        left: 21em;
    }
    75% {
        left: 17em;
    }
    100% {
        top: -40em;
        left: 19em;
    }
}

@-webkit-keyframes bubble5 {
    0% {
        top: 35em;
        left: 18em;
    }
    25% {
        left: 16em;
    }
    50% {
        left: 21em;
    }
    75% {
        left: 17em;
    }
    100% {
        top: -40em;
        left: 19em;
    }
}