/* BUBBLES idea by https://codepen.io/keitwirik/pen/VLaPrp */

.bubble__background {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.6;
  -webkit-animation-name: fadeInOpacity;
          animation-name: fadeInOpacity;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	        animation-timing-function: ease-in;
	-webkit-animation-duration: 0.9s;
	        animation-duration: 0.9s;
  background: hsla(184, 99%, 27%, 1) url('../img/sharon-mccutcheon-uk-no6Yv91g-small-min.jpg') no-repeat;
  /* Photo by Sharon McCutcheon https://unsplash.com/@sharonmccutcheon */
  background-position: center center;
  background-size: cover;
}

.bubble__background--transition {  
  p, h1, a, div {
    /* color: $lightgrey-color !important;
    text-shadow: 1px 1px 2px hsla(0, 0%, 1%, 0.8); */
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
        -o-transition: all 0.9s ease-in-out;
            transition: all 0.9s ease-in-out;
  }

  path {
    -webkit-transition: all 0.9s ease-in-out;
       -moz-transition: all 0.9s ease-in-out;
         -o-transition: all 0.9s ease-in-out;
            transition: all 0.9s ease-in-out;   
  }
}

@keyframes fadeInOpacity {
	0% { opacity: 0; }
	100% { opacity: 0.6; }
}

.bubble__parent {
 position: relative;
 width: 100%;
 z-index: 1;
}

.bubble__container {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 60em;
  z-index: 2;
	opacity: 0.75;
  overflow: hidden;
}

.bubble {
  position: absolute;
  width: 100px;
  height: 100px;
  background-clip: padding-box;
  border-radius: 50%;
  top: 100%;
  -webkit-animation-name: bubbleup;
          animation-name: bubbleup;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
  background-color: hsla(181, 98%, 33%, 0.3);
  -webkit-box-shadow: inset -5px -8px 20px hsla(201, 19%, 85%, 0.7), 6px 6px 5px hsla(0, 0%, 25%, 0.07);
          box-shadow: inset -5px -8px 20px hsla(201, 19%, 85%, 0.7), 6px 6px 5px hsla(0, 0%, 25%, 0.07);
  overflow: hidden;
}

.bubble:after {
  position: absolute;
  background-color: hsla(0, 0%, 100%, 0.576);
  -webkit-filter: blur(6px);
          filter: blur(6px);
  border-radius: 50%;
  width: 30px;
  height: 60px;
  -webkit-transform: rotate(55deg);
      -ms-transform: rotate(55deg);
          transform: rotate(55deg);
  left: 25px;
  top: 5px;
  content:'';
}

.one {
  left: 220%;
  -webkit-transform: scale(0.2);
      -ms-transform: scale(0.2);
          transform: scale(0.2);
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
}

.two {
  left: 68%;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-delay: 5s;
          animation-delay: 5s; }

.three {
  left: 60%;
  -webkit-transform: scale(0.6);
      -ms-transform: scale(0.6);
          transform: scale(0.6);
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.four {
  left: 30%;
  -webkit-transform: scale(0.1);
      -ms-transform: scale(0.1);
          transform: scale(0.1);
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.five {
  left: 55%;
  -webkit-transform: scale(0.18);
      -ms-transform: scale(0.18);
          transform: scale(0.18);
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.six {
  left: 0%;
  -webkit-transform: scale(0.3);
      -ms-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.seven {
  left: 33%;
  -webkit-transform: scale(0.74);
      -ms-transform: scale(0.74);
          transform: scale(0.74);
  -webkit-animation-duration: 6.7s;
  animation-duration: 6.7s;
  -webkit-animation-delay: 2.2s;
  animation-delay: 2.2s;
}

.eight {
  left: 15%;
  -webkit-transform: scale(0.4);
      -ms-transform: scale(0.4);
          transform: scale(0.4);
  -webkit-animation-duration: 4.3s;
          animation-duration: 4.3s;
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.nine {
  left: 10%;
  -webkit-transform: scale(0.3);
      -ms-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}

.ten {
  left: 48%;
  -webkit-transform: scale(0.25);
      -ms-transform: scale(0.25);
          transform: scale(0.25);
  -webkit-animation-duration: 4.3s;
          animation-duration: 4.3s;
}

@-webkit-keyframes bubbleup {
  from { top: 100%; }
  to { top: -40%; }
}

@keyframes bubbleup {
  from { top: 100%; }
  to { top: -30%; }
}

@media screen and (min-width: 1400px) {
  .bubble__background {
    background: hsla(184, 99%, 27%, 1) url('../img/sharon-mccutcheon-uk-no6Yv91g-medium-min.jpg') no-repeat;
    background-size: cover;
  }
}

@media screen and (min-width: 1200px) {
  .bubble__background {
    background: hsla(184, 99%, 27%, 1) url('../img/sharon-mccutcheon-uk-no6Yv91g-large-min.jpg') no-repeat;
    background-size: cover;
  }
}