<svg version="1.1" class="environments-image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 226 226.1" enable-background="new 0 0 226 226.1" xml:space="preserve">
  <circle fill="none" stroke="#E62525" stroke-miterlimit="10" cx="112.1" cy="110.5" r="76.5"/>
  <g class="circle-1">
    <circle fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" cx="43.9" cy="141.9" r="31.4"/>
    <rect x="32.6" y="124" fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" width="22.7" height="36.2"/>
    <rect x="35.4" y="127.4" fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" width="17.1" height="23.5"/>
    <circle fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" cx="43.9" cy="155.7" r="2.6"/>
  </g>
  <g class="circle-2">
    <circle fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" cx="112.1" cy="34" r="31.4"/>
    <rect x="94.6" y="21.3" fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" width="35" height="22"/>
    <rect x="97.8" y="24.6" fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" width="28.6" height="15.3"/>
    <polygon fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" points="115.4,47.7 108.8,47.7 110.6,43.2 113.6,43.2 	"/>
  </g>
  <g class="circle-3">
    <circle fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" cx="182.1" cy="141.9" r="31.4"/>
    <path fill="#FFFFFF" stroke="#E62525" stroke-miterlimit="10" d="M196.3,137.1c-0.7,0-1.5,0.1-2.2,0.3c-1.3-5-5.9-8.7-11.4-8.7
      c-6.1,0-11.1,4.6-11.7,10.6c-0.2,0-0.3,0-0.5,0c-3.9,0-7,3.1-7,7c0,3.9,3.1,7,7,7c0.1,0,0.3,0,0.4,0v0h24.9c0.1,0,0.3,0,0.4,0
      c4.5,0,8.1-3.6,8.1-8.1C204.4,140.7,200.8,137.1,196.3,137.1z"/>
  </g>
</svg>

@import "compass/css3";

@mixin animation ($animation, $duration, $easing, $iterations, $delay) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-iteration-count: $iterations;
    -webkit-animation-timing-function: $easing;
 
    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-iteration-count: $iterations;
    animation-timing-function: $easing;
 
    -o-animation-delay: $delay;
    -o-animation-duration: $duration;
    -o-animation-name: $animation;
    -o-animation-iteration-count: $iterations;
    -o-animation-timing-function: $easing;
 
    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-iteration-count: $iterations;
    animation-timing-function: $easing;
}


.environments-image{
	height: 300px;
	@include animation(rotate, 9s, linear, infinite, 0s);

	.circle-1{
		@include animation(rotateCounter, 9s, linear, infinite, 0s);
		@include transform-origin(43.9px, 141.9px);
	}

	.circle-2{
		@include animation(rotateCounter, 9s, linear, infinite, 0s);
		@include transform-origin(112.1px, 34px);
	}

	.circle-3{
		@include animation(rotateCounter, 9s, linear, infinite, 0s);
		@include transform-origin(182.1px, 141.9px);
	}


}


@include keyframes(rotate) {
  from {
  	@include rotate(0deg);
  }

  to{
  	@include rotate(360deg);
  }
}

@include keyframes(rotateCounter) {
  from {
  	@include rotate(0deg);
  }

  to{
  	@include rotate(-360deg);
  }
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}