.title {
	margin: 0 auto;
	margin-top:20px;

	
	text-align:center;
}

.title h2 {
	font-family: 'Montserrat', sans-serif;
	font-size:40px;
	color:#8C8CD9;
}

.title small {
	font-family: 'Montserrat', sans-serif;
	font-size:15px;
	margin-top:-30px;
	display:block;
	color:#8C8CD9;
	
}

.con {
	margin: 0 auto;
	margin-top:300px;
	width:10px;
	
	height:10px;
	//animation:rot 3s linear infinite;
}

@keyframes rot {
	0% {
		transform:rotate(0);
	}
	
	100% {
		transform:rotate(-360deg);
	}
}

@for $i from 1 through 69 {
	.line:nth-child(#{$i}) {
		width:1em;
		height:1em;
		//border:1px solid black;
		position:absolute;
		
		border-radius:50%;
		
		$r: $i / 11;
		
		margin-left: sin($r) * 200 + px;
		margin-top: cos($r)  * 200+ px;
		
		animation:en-#{$i} 1s ease-out infinite;
		animation-delay: $i*0.027s;
		
		transform:rotate($i*(360/50) + deg);
		
		background:hsl($i*5, 50%, 70%);
	
	}
	
	@keyframes en-#{$i} {
	0% {
		width:1em;
		height:1em;
	}
	
	50% {
		width:2em;
		height:2em;
		transform:rotate($i*(360/50) + deg);
	}
	
	100% {
		width:1em;
		height:1em;
	}
}
}


// Extra trogonemty functions since not included in SCSS/CSS
@function pi() {
  @return 3.141592653590;
}

@function rad($angle) {
  $unit: unit($angle);
  $unitless: $angle / ($angle * 0 + 1);
  // If the angle has 'deg' as unit, convert to radians.
  @if $unit == deg {
    $unitless: $unitless / 180 * pi();
  }
  @return $unitless;
}

@function sin($angle) {
  $sin: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
  }
  @return $sin;
}

@function cos($angle) {
  $cos: 0;
  $angle: rad($angle);
  // Iterate a bunch of times.
  @for $i from 0 through 10 {
    $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
  }
  @return $cos;
}

@function x($t) {
	@return sin($t / 10) * 100;
}

@function y($t) {
	@return cos($t / 10) * 100;
}