<p class="scroll-down"><a href="#complements" class="animate">More</a></p>

@import "compass/css3";

@mixin m($val) 			 {margin-top:$val; margin-bottom:$val;}		// 'margin'
@mixin p($val) 				{padding-top:$val;padding-bottom:$val;}		// 'margin sides'
@mixin ms($val) 			 {margin-left:$val; margin-right:$val;}		// 'padding'
@mixin ps($val) 			 {padding-left:$val;padding-right:$val;}		// 'padding sides'
@mixin dim($width, $height) {width:$width; height:$height;}				// 'dimensions'

@mixin center($width, $height) {
	position:absolute;
	left:50%;
	top:50%;
	width:$width;
	height:$height;
	margin-left:-($width/2);
	margin-top:-($height/2);
}

@mixin texthide 		{line-height: 0; font-size: 0; color: transparent;}

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

@mixin animation ($name, $duration: 1s, $delay: 0s, $iterations: 1, $direction: normal, $timing: ease, $fillmode: forwards) {
	-webkit-animation: $name $duration $delay $iterations $direction $timing $fillmode ;
	-moz-animation:	$name $duration $delay $iterations $direction $timing $fillmode ;
	-o-animation:      $name $duration $delay $iterations $direction $timing $fillmode ;
	animation:         $name $duration $delay $iterations $direction $timing $fillmode ;
}


@include keyframes(pulse) {
	0%			{ opacity: 0; background-position:center top; @include background-size(0 auto);}
	10%			{opacity: 0; }
	50%	      {opacity: 1; @include background-size(75% auto);}
	90%			{opacity: 0; }
	100%		{ opacity: 0; background-position:center bottom; @include background-size(0 auto);}

}
 

body {
	background-color:#0d74ff
}
  
.scroll-down {
	margin:0;
    border:2px solid #fff;
	@include border-radius (100px);
	@include center(100px,100px);

	a {
		display:block;
		opacity:0;
    	@include border-radius (100px);
@include transition(all .4s ease);
		@include texthide;
		@include ms(auto);
    @include dim(100%,100%);
		@include background-size(0 auto);
		@include animation($name: pulse, $duration: 1.5s, $iterations: infinite);
		background-image: url('https://jamesmuspratt.com/codepen/img/arrow-down.svg');
		background-repeat:no-repeat;
		&:before, &:after {
			content: " ";
			position:absolute;
			top:0;
			left:0;
			display:block;
			@include dim(100%,100%);
			background: url('https://jamesmuspratt.com/codepen/img/arrow-down.svg') no-repeat center top;
			@include background-size(100% auto);
		}
		&:before 	{@include animation($delay: 0.25s, $name: pulse, $duration: 1.5s, $iterations: infinite);}
		&:after 	 {@include animation($delay: 0.50s, $name: pulse, $duration: 1.5s, $iterations: infinite);}
	
    &:hover {
       // @include transform(scale(1));

        background-color:rgba(0,0,0,.3);

    }
  } // a
} // .scroll-down