/*

<div class="second-wrapper">
  <div class="circle-loader">
      <div class="circle circle_four"></div>
      <div class="circle circle_three"></div>
      <div class="circle circle_two"></div>
      <div class="circle circle_one"></div>
  </div>
</div>

*/

.circle-loader { position: relative; }

.circle {
  border-radius:      50% 50% 50% 50%;
  position:           absolute;
  border-top:         2px solid #fff;
  border-bottom:      2px solid transparent;
  border-left:        2px solid #fff;
  border-right:       2px solid transparent;
  animation:          animate 2s infinite;	
}
/*
.circle_one {
  left:               75px;
  top:                75px;
  width:              50px;
  height:             50px;
}
              
.circle_two {
  left:               65px;
  top:                65px;
  width:              70px;
  height:             70px;
  animation-delay:    0.2s;
}
    
.circle_three {
  left:               55px;
  top:                55px;
  width:              90px;
  height:             90px;
  animation-delay:    0.4s;
}

.circle_four {
  left:               45px;
  top:                45px;
  width:              110px;
  height:             110px;
  animation-delay:    0.6s;
}
*/





@keyframes animate {
  50% { transform: rotate(360deg) }	
}

@keyframes up {
  50% { transform:  rotate(360deg) translate3d(0,10%,0) scale(0.7); }	
}

@keyframes down {
  50% { transform:  rotate(360deg) translate3d(0,-10%,0) scale(0.7); }	
}

@keyframes lefts {
  50% { transform:  rotate(360deg) translate3d(10%,0,0) scale(0.7); }	
}

@keyframes rights {
  50% { transform:  rotate(360deg) translate3d(-10%,0,0) scale(0.7); }	
}















.dyno_one {
  border-radius:      50% 50% 50% 50%;
  position:           absolute;
  border-top:         2px solid transparent;
  border-bottom:      2px solid black;
  border-left:        2px solid transparent;
  border-right:       2px solid transparent;
  animation:          up 4s infinite;	
}

.dyno_two {
  border-radius:      50% 50% 50% 50%;
  position:           absolute;
  border-top:         2px solid black;
  border-bottom:      2px solid transparent;
  border-left:        2px solid transparent;
  border-right:       2px solid transparent;
  animation:          down 4s infinite;	
}

.dyno_three {
  border-radius:      50% 50% 50% 50%;
  position:           absolute;
  border-top:         2px solid transparent;
  border-bottom:      2px solid transparent;
  border-left:        2px solid transparent;
  border-right:       2px solid black;
  animation:          lefts 4s infinite;
}

.dyno_four {
  border-radius:      50% 50% 50% 50%;
  position:           absolute;
  border-top:         2px solid transparent;
  border-bottom:      2px solid transparent;
  border-left:        2px solid black;
  border-right:       2px solid transparent;
  animation:          rights 4s infinite;	
}



.proto_one {
  left:               30%;
  top:                6px;
  width:              30px;
  height:             30px;
}
              
.proto_two {
  left:               30%;
  top:                6px;
  width:              30px;
  height:             30px;
  /*animation-delay:    0.2s;*/
}
    
.proto_three {
  left:               30%;
  top:                6px;
  width:              30px;
  height:             30px;
  /*animation-delay:    0.4s;*/
}

.proto_four {
  left:               30%;
  top:                6px;
  width:              30px;
  height:             30px;
  /*animation-delay:    0.6s;*/
}