<p class="title">Listening</p>
<div class="logo">
	<div class="c-shape"></div>
	<div class="c-shape reverse"></div>
</div>
<div class="outer-circle"></div>
<div class="outer-circle-2"></div>

// colors
$bg-color: linear-gradient(to bottom, #01a6ff, #0671ff);
$logo-color: #fff;
$circle-color: #5bc1ff;

// fonts
@import url('https://fonts.googleapis.com/css?family=Roboto');
$roboto-font: 'Roboto', sans-serif;

// mixins
@mixin center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

@mixin pseudo($position: absolute, $content: "") {
    content: $content;
    position: $position;
}

@mixin breakpoint($point) {
    @if $point==tabletmobile {
        @media (max-width: 1024px) and (min-width: 320px) {
            @content ;
        }
    }
    @else if $point==mobile {
        @media (max-width: 480px) and (min-width: 320px) {
            @content ;
        }
    }
}

// keyframes
@keyframes circle{
  50%  {
    transform: scale(1.1);
  }
  75%  {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes outer-circle{
  0%{
    border-color: transparent;
  }
  25%{
    border-color: transparent;
  }
  75%{
    transform: scale(1.2);
    border: 1vmin solid #36c1fa;
  }
  100% {
    transform: scale(1.7);
    border: 1vmin solid #36c1fa;
    border-color: transparent;
  }
}

@keyframes outer-circle-2{
  0%{
    transform: scale(1.3);
    border: 1vmin solid #36c1fa;
  }
  50%{
    transform: scale(1.7);
    border-color: transparent;
  }
  75%{
    border-color: transparent;
  }
  100% {
    border-color: transparent;
  }
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba($circle-color, 0.3),
                0 0 0 0vmin rgba($circle-color, 0.3),
                0 0 0 0vmin rgba($circle-color, 0.3),
                0 0 0 20vmin rgba($circle-color, 0.3);
  }
  25%  {
    box-shadow: 0 0 0 0 rgba($circle-color, 0.3),
                0 0 0 0vmin rgba($circle-color, 0.3),
                0 0 0 15vmin rgba($circle-color, 0.3),
                0 0 0 20vmin rgba($circle-color, 0.3);
  }
  50%  {
    box-shadow: 0 0 0 0 rgba($circle-color, 0.3),
                0 0 0 10vmin rgba($circle-color, 0.3),
                0 0 0 15vmin rgba($circle-color, 0.3),
                0 0 0 20vmin rgba($circle-color, 0.3);
  }
  75%  {
    box-shadow: 0 0 0 4vmin rgba($circle-color, 0.3),
                0 0 0 10vmin rgba($circle-color, 0.3),
                0 0 0 15vmin rgba($circle-color, 0.3),
                0 0 0 20vmin rgba($circle-color, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0vmin rgba($circle-color, 0.3),
                0 0 0 0vmin rgba($circle-color, 0.3),
                0 0 0 0vmin rgba($circle-color, 0.3),
                0 0 0 0vmin rgba($circle-color, 0);
  }
}

html, body{
  width: 100%;
  height: 100%;
}

body{
  background: $bg-color;
  overflow: hidden;
}

.title{
  color: $logo-color;
  text-align: center;
  font-size: 5vmin;
  margin-top: 15vmin;
  font-family: $roboto-font;

  @include breakpoint(mobile)
  {
    margin-top: 55vmin;
  }
}

.logo{
  @include center;
  width: 35vmin;
  height: 35vmin;
  border-radius: 50%;
  background: $circle-color;
  animation: circle 1.5s linear infinite,ripple 0.9s linear infinite;

  .c-shape{
    @include center;
    width: 8vmin;
    height: 6.5vmin;
    top: 1vmin;
    left: -10vmin;
    border: 4vmin solid $logo-color;
    border-top: none;
    background: transparent;
    transform: rotate(45deg);
    border-bottom-left-radius: 8vmin;
    border-bottom-right-radius: 8vmin;

    &:before{
      @include pseudo;
      top: -5.5vmin;
      left: -4vmin;
      width: 4vmin;
      height: 7vmin;
      background: $logo-color;
      border-top-left-radius: 2vmin;
      border-top-right-radius: 2vmin;
    }

    &:after{
      @include pseudo;
      top: -1.8vmin;
      left: 8vmin;
      width: 4vmin;
      height: 4vmin;
      background: $logo-color;
      border-top-left-radius: 2vmin;
      border-top-right-radius: 2vmin;
    }
  }

  .reverse{
    top: -1.5vmin;
    left: 9.6vmin;
    transform: rotate(-135deg);
  }
}

.outer-circle{
  @include center;
  width: 90vmin;
  height: 90vmin;
  background: transparent;
  border-radius: 50%;
  animation: outer-circle 1.5s linear infinite;
}

.outer-circle-2{
  @include center;
  width: 90vmin;
  height: 90vmin;
  background: transparent;
  border-radius: 50%;
  animation: outer-circle-2 1.5s linear infinite;
}