/*.bubble {
    @extend %Bubble;
    background-color: #000;
    position: relative;
    font-family: Roboto;
    transition: 350ms cubic-bezier(.25,.75,.5,1.25) 0.4s;
    font-weight: 500;
    // add/edit additional colours here
    &__container {
        position: relative;
        height: 35vw;
    }

    &--pink {
        background-color: $pink !important;
    }

    &--purple {
        background-color: $open-purple !important;
    }

    &--green {
        background-color: $green;
    }

    &--blue {
        background-color: $closed-blue !important;
    }

    &-1 {
        position: absolute;
        top: 10%;
        left: 15%;
    }

    &-2 {
        position: absolute;
        top: 50%;
        left: 20%;
    }

    &-3 {
        position: absolute;
        top: 10%;
        left: 40%;
        width: 12vw !important;
        height: 12vw !important;
    }

    &-4 {
        position: absolute;
        top: 47%;
        right: 25%;
    }

    &-5 {
        position: absolute;
        top: 10%;
        right: 18%;
    }

    &-6 {
        position: absolute;
        top: 60%;
        left: 40%;
    }

    .question, .answer {
        position: absolute;
        font-size: 1.2em;
        color: #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    &--closed {
        width: 10vw !important;
        height: 10vw !important;
        //box-shadow: none !important;
        .question {
            opacity: 1 !important;
            top: 50% !important;
            transition-delay: 0.5s
        }

        .answer {
            @extend %FadeIn;
            transition-delay: 0s !important;
        }
    }

    &--open {
        width: 13vw;
        height: 13vw;
        background-color: $open-purple !important;
        background: radial-gradient( $open-purple, #9198e5) !important;

        .question {
            @extend %FadeOut;
            transition-delay: 0.1s;
        }

        .answer {
            transition-delay: 0.6s;
        }
    }
}*/
@keyframes fadeOutText {
  from {
    opacity: 1;
    top: 50%;
  }
  to {
    opacity: 0;
    top: 45% !important;
  }
}
/* line 164, ../../sass/activities/bubble-reveal-carer.scss */
.template-flex-display {
  display: flex !important;
  justify-content: space-around;
  padding: 2em 0;
}

/* line 171, ../../sass/activities/bubble-reveal-carer.scss */
* {
  margin: 0;
  padding: 0;
}

/* line 176, ../../sass/activities/bubble-reveal-carer.scss */
.bubble__container {
  padding: 1em 0;
}

/* line 180, ../../sass/activities/bubble-reveal-carer.scss */
.bubble {
  background: radial-gradient(#436fd3, #224492);
  font-family: Calibri, Roboto, sans-serif;
  color: #fff;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  padding: 1em;
  margin: 1em 4em;
  cursor: pointer;
}
/* line 192, ../../sass/activities/bubble-reveal-carer.scss */
.bubble:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
/* line 199, ../../sass/activities/bubble-reveal-carer.scss */
.bubble--open {
  background: radial-gradient(#a85ec5, #682e7f);
}

/* line 207, ../../sass/activities/bubble-reveal-carer.scss */
.bubble-content {
  vertical-align: middle;
  display: inline-block;
  font-size: 1.2em;
  font-weight: 500;
  /*transition: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);*/
}

/* line 215, ../../sass/activities/bubble-reveal-carer.scss */
.bubble-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media (min-width: 1000px) {
  /* line 224, ../../sass/activities/bubble-reveal-carer.scss */
  .bubble-wrap {
    flex-direction: row;
  }
}
/* line 232, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid;
  cursor: pointer;
  background: radial-gradient(#436fd3, #224492);
  color: #fff;
}
/* line 242, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble.open {
  background: radial-gradient(#a85ec5, #682e7f);
}

/* line 247, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble-question {
  max-width: 150px;
  text-align: center;
}

/* line 252, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble-answer {
  display: none;
}

/* line 256, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble.u-13 {
  width: 100%;
  max-width: 13em;
  height: 13em;
}

/* line 262, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble.u-14 {
  width: 100%;
  max-width: 14em;
  height: 14em;
}

/* line 268, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble.u-16 {
  width: 100%;
  max-width: 16em;
  height: 16em;
}

/* line 274, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble.u-230 {
  width: 100%;
  max-width: 400px !important;
  height: 400px !important;
  padding: 2em;
  text-align: center;
}

/* line 282, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble-container {
  display: flex;
  justify-content: space-around;
}
@media (max-width: 768px) {
  /* line 282, ../../sass/activities/bubble-reveal-carer.scss */
  .c-bubble-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  /* line 291, ../../sass/activities/bubble-reveal-carer.scss */
  .c-bubble-container .c-bubble {
    margin-bottom: 1em;
  }
}
/* line 296, ../../sass/activities/bubble-reveal-carer.scss */
.c-bubble-container.top {
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 2em;
}