/* пульсирующий круг */
.circle {
  background: white;
  //background-color: #11ffeeff;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  
  -webkit-box-shadow: 0px 0px 5px 0px rgba(34, 60, 80, 0.3);
	-moz-box-shadow: 0px 0px 0px 2px rgba(34, 60, 80, 0.3);
	box-shadow: 0px 0px 5px 0px rgba(34, 60, 80, 0.3);
	
  -webkit-animation: pulsing 2s infinite;
  animation: pulsing 2s infinite;
}

@-webkit-keyframes pulsing {
  0% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5)
  }
  50% {
    -webkit-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
  100% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
  }
}

@keyframes pulsing {
  0% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5)
  }
  50% {
    -webkit-transform: scale(1.0, 1.0);
    transform: scale(1.0, 1.0);
  }
  100% {
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5);
  }
}

/* 2 пульсирующих круга */
.spinner-bounce-circle
{
    width: 20px;
    height: 20px;
	
    position: absolute;
    margin: 0 auto;
}

.spinner-bounce-circle div
{
    width: 100%;
    height: 100%;
    border-radius: 50%;
	border: 1px solid #fff; 
	
	
    background-color: #fff;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
	
	-webkit-box-shadow: 0px 0px 3px 0px rgba(34, 60, 80, 0.3);
	-moz-box-shadow: 0px 0px 3px 0px rgba(34, 60, 80, 0.3);
	box-shadow: 0px 0px 3px 0px rgba(34, 60, 80, 0.3);



    -webkit-animation: circlebounce 2.0s infinite ease-in-out;
    animation: circlebounce 2.0s infinite ease-in-out;
}

.spinner-bounce-circle div:nth-child(1) {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes circlebounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes circlebounce {
    0%, 100% { transform: scale(0.0); }
    50% { transform: scale(1.0); }
}


/* 2 раскрывающиеся круга */
.dws {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.pulse, .bloc  {
 position: absolute;
 width: 10px;
 height: 10px;
 color: #fff;
 border-radius: 50%;
}
.bloc {
 cursor: pointer;
 z-index: 1;
 overflow: hidden;
}
.pulse {
 background: #fff;
 position: relative;
 transition: .5s;
}
  
.pulse {
 background: #ffe500;
}
.pulse i {
 transition: .5s ease-in-out;
 transform: scale(0);
}
.pulse {
 transform: scaleX(1);
 transition: .5s ease-in-out;
 opacity: 1;
}
.pulse::before,
.pulse::after {
 content: '';
 position: absolute;
 border: 2px solid #ffe500;
 left: -5px;
 right: -5px;
 top: -5px;
 bottom: -5px;
 border-radius: 50%;
 animation: pulse 1.8s linear infinite;
 opacity: 0;
}
.pulse::after {
 animation-delay: .5s;
}

 
@keyframes pulse {
 0% {
  transform: scale(0.5);
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  transform: scale(1.5);
  opacity: 0;
 }
}