// ---------------------
//! Colors
// ---------------------
$color-dark: #424b54;
$color-skin: #F0BEAF;
$color-skin-dark: #8b4513;
$color-blue: #2196F3;
$color-gold: #FDD835;
$color-magneto-prime: #EE3152;
$color-magneto-accent: #795998;
$color-magnetism: #90CAF9;
$color-hair-iceman: #B3695B;
$color-elf: #0D47A1;
$color-bamf: #CE93D8;
$color-hair-storm: #ddd;
$color-hair-cyclops: #9b651d;
$color-hair-jean: #DC5846;

// ---------------------
//! GENERAL
// ---------------------

html {
	height: 100%;
	background:#fff;
}

body {
	position: relative;
	min-height: 100%;
}


.stripe {
	width:100%;
	position: relative;
	height:392px;
	padding:96px 32px;
}

.container {
	width:200px;
	height:200px;
	border-radius: 50%;
	position: relative;
	margin:0 auto;
	overflow: hidden;
	z-index: 10;
}


// ---------
//! Cyclops
// ---------
#cyclops {
	background: $color-blue;
	
	.container {
		background:#fff;
		border:2px solid darken($color-blue, 10%);
	}
	
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:$color-blue;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 1;
		overflow: hidden;
	}
		
	.jacket {
		position: absolute;
		background:#ccc;
		width:20px;
		left:50%;
		height:160px;
		top:-4px;
		transform: translateX(-50%) rotate(8deg);
		z-index: 1;
	}
		
	.jacket:before {
		content:"";
		position: absolute;
		background:#ccc;
		width:20px;
		left:-50%;
		height:160px;
		top:0;
		transform: translateX(50%) rotate(-16deg);
		z-index: 1;
	}
		
	.face {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-blue;
		border-radius:100px;
		top:50px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
	}
		
	.skin {
		position: absolute;
		width:50px;
		height:59px;
		top:12px;
		left:50%;
		transform: translateX(-50%);
		background: $color-skin;
		border-radius: 10px;
	}	
	
	.visor {
		position: absolute;
		height:20px;
		width:80px;
		border-radius: 4px;
		background: $color-gold;
		left:0;
		top:16px;
	}
	
	.visor:after {
		content:"";
		height:10px;
		width:72px;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		background:#c62828;
		border-radius: 4px;
		animation: lasereyes 4s infinite;
	}
	
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:$color-blue;
	}
	
		
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-skin, 15%);
		top:36px;
		border-radius: 4px;
	}
		
	.mouth {
		position: absolute;
		background: $color-dark;
		width:30px;
		height:10px;
		border-radius: 0 0 100px 100px;
		top:56px;
		left:50%;
		transform: translateX(-50%);
	}
		
	.hair {
		position: absolute;
		width:70px;
		height:55px;
		background:$color-hair-cyclops;
		border-radius: 50%;
		top:36px;
		left:62px;
	}
	
	.pouf {
		position: absolute;
		width:30px;
		height:20px;
		border-radius: 50%;
		left:60px;
		top:46px;
		background:$color-hair-cyclops; 
		transform: rotate(-53deg);
		z-index: 10;
	}
	
	.pomp {
		position: absolute;
		width:51px;
		height:23px;
		border-radius: 100% 0 100% 100%;
		left:80px;
		top:44px;
		background:$color-hair-cyclops; 
		z-index: 10;
	}
	
	.pomp:after {
		content:"";
		position: absolute;
		width:47px; 
		height:20px;
		border-radius: 100% 0 100% 100%;
		left:-4px;
		top:-6px;
		background:$color-hair-cyclops; 
		z-index: 12;
		transform: rotate(-15deg);
	}
	
	.strap {
		position: absolute;
		top:-10px;
		height:200px;
		background: $color-gold;
		width:20px;
		right:14px;
	}
	
	.cross-strap {
		position: absolute;
		top:10px;
		height:20px;
		background: $color-gold;
		width:90px;
		left:-6px;
		transform: rotate(15deg);
	}
	
	.badge {
		position: absolute;
		width:30px;
		height:30px;
		top:12px;
		right:10px;
		background:#2196F3;
		border-radius: 100%;
		border:4px solid $color-gold;
	}
	
	.badge:before,
	.badge:after {
		content:"";
		position: absolute;
		width:30px;
		height:4px;
		top:50%;
		left:50%;
		background:$color-gold;
	}
	.badge:before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.badge:after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	
	@keyframes lasereyes {
		0% {
			background: #c62828;
		}
		25% {
			background: #c62828;
		}
		30% {
			background: #f44336;
		}
		35% {
			background: #c62828;
		}
		40% {
			background: #f44336;
		}
		45% {
			background: #c62828;
		}
		50% {
			background: #f44336;
		}
		55% {
			background: #c62828;
		}
		60% {
			background: #f44336;
		}
		65% {
			background: #c62828;
		}
		70% {
			background: #f44336;
		}
		75% {
			background: #c62828;
		}
		100% {
			background: #c62828;
		}
	}
	
}

// ---------
//! Professor X
// ---------
#professor {
	background:#E8E8E8;
	
	.container {
		background:#fff;
		border:2px solid darken(#e8e8e8, 10%);
	}
	
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:$color-dark;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 1;
		overflow: hidden;
	}
		
	.jacket {
		position: absolute;
		background:#ccc;
		width:20px;
		left:50%;
		height:160px;
		top:-4px;
		transform: translateX(-50%) rotate(8deg);
		z-index: 1;
	}
		
	.jacket:before {
		content:"";
		position: absolute;
		background:#ccc;
		width:20px;
		left:-50%;
		height:160px;
		top:0;
		transform: translateX(50%) rotate(-16deg);
		z-index: 1;
	}
		
	.face {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-skin;
		border-radius:100px;
		top:50px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
	}
		
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:$color-skin;
	}
		
	.eyes {
		position: absolute;
		top:34px;
		width:10px;
		height:10px;
		background: $color-dark;
		border-radius: 50%;
		left:25%;
		transform: translateX(-50%);
	}
		
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:10px;
		background: $color-dark;
		top:0;
		border-radius: 50%;
		right:-40px;
	}
		
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-skin, 15%);
		top:36px;
		border-radius: 4px;
	}
		
	.mouth {
		position: absolute;
		background: $color-dark;
		width:30px;
		height:4px;
		border-radius: 0 0 100px 100px;
		top:60px;
		left:50%;
		transform: translateX(-50%);
	}
		
	.ear {
		position: absolute;
		background:$color-skin;
		width:26px;
		height:26px;
		border-radius: 100%;
		left:50px;
		top:76px;
	}
	
	.ear.right {
		left:120px;
	}
	
	.ear:before {
		content:"";
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		width:16px;
		height:16px;
		background: darken($color-skin, 10%);
		border-radius: 100%;
	}
	
	.badge {
		position: absolute;
		width:20px;
		height:20px;
		top:20px;
		right:10px;
		background:#2196F3;
		border-radius: 100%;
		border:2px solid #FDD835;
	}
	
	.badge:before,
	.badge:after {
		content:"";
		position: absolute;
		width:20px;
		height:2px;
		top:50%;
		left:50%;
		background:#FDD835;
	}
	.badge:before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.badge:after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
		
	.telepathy {
		position: absolute;
		width:260px;
		height:260px;
		border: solid 2px #9acaf9;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		opacity: 0;
		border-radius: 50%;
	}
	
	.telepathy.one {
		animation: telepath 4s 1s infinite;
	}
	
	.telepathy.two {
		animation: telepath 4s 1.5s infinite;
	}
	
	.telepathy.three {
		animation: telepath 4s 2s infinite;
	}		

	@keyframes telepath {
		0% {
			transform: translate(-50%, -50%) scale(0.0);
			opacity: 0;
		}
		100% {
			transform: translate(-50%, -50%) scale(1.0);
			opacity: 1;
		}
	}

	
}

// ---------
//! Jean Grey
// ---------
#jeangrey {
	background: $color-hair-jean;
	
	.container {
		background:#fff;
		border:2px solid darken($color-hair-jean, 10%);
	}
	
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:#61AE71;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 1;
		overflow: hidden;
	}
	
	.body:before {
		content: "";
		position: absolute;
		top:-3px;
		left:50%;
		transform: translateX(-50%);
		background: $color-skin;
		width:100%;
		height:20px;
		border-radius: 100%;
	}
	
	.face {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-skin;
		border-radius:100px;
		top:50px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
	}
		
	.hair {
		position: absolute;
		width:110px;
		height:130px;
		top:30px;
		left:50%;
		transform: translateX(-50%);
		background: $color-hair-jean;
		border-radius: 50% 50% 0 0;
	}

	.hair-front {
		position: absolute;
		left:60px;
		top:37px;
		width:60px;
		height:40px;
		border-radius: 50%;
		background: $color-hair-jean;
		z-index: 20;
	}
	
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:$color-skin;
	}
	
	.eyes {
		position: absolute;
		top:34px;
		width:10px;
		height:10px;
		background: $color-dark;
		border-radius: 50%;
		left:25%;
		transform: translateX(-50%);
		animation-name: eyes;
		animation-duration: 8s; 
		animation-timing-function: linear; 
		animation-delay: 0s;
		animation-direction: normal;
		animation-iteration-count: infinite; 
	}
		
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:10px;
		background: $color-dark;
		top:0;
		border-radius: 50%;
		right:-40px;
		animation-name: eyes;
		animation-duration: 8s; 
		animation-timing-function: linear; 
		animation-delay: 0s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}

	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-skin, 15%);
		top:36px;
		border-radius: 4px;
	}
		
	.mouth {
		position: absolute;
		background: $color-dark;
		width:30px;
		height:6px;
		border-radius: 0 0 100px 100px;
		top:56px;
		left:50%;
		transform: translateX(-50%);
	}
	
	.emblem {
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 20px 20px 0 20px;
		border-color: $color-gold transparent transparent transparent;
		top:25px;
		left:50%;
		transform: translateX(-50%);
	}
	
	.fire {
		position: absolute;
		width:100%;
		height:100px;
		bottom:-160px;
		left:0;
		background:#FB8C00;
		z-index: 0;
		animation-name: fire;
		animation-duration: 8s; 
		animation-timing-function: linear; 
		animation-delay: 0s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	
	.flame {
		position: absolute;
		bottom:100%;
		width:5%;
		height:40px;
		border-radius: 10px 10px 0 0;
		background: #FB8C00;
	}
	
	.flame:after {
		content: "";
		position: absolute;
		left:100%;
		background:#fff;
		border-radius: 0 0 10px 10px;
		top:100%;
		width:100%;
		height:80%;
	}
	
	.flame:nth-child(1) {
		left:0;
		height:40px;
	}
	.flame:nth-child(2) {
		left:10%;
		height:20px;
	}
	.flame:nth-child(3) {
		left:20%;
		height:60px;
	}
	.flame:nth-child(4) {
		left:30%;
		height:10px;
	}
	.flame:nth-child(5) {
		left:40%;
		height:30px;
	}
	.flame:nth-child(6) {
		left:50%;
		height:40px;
	}
	.flame:nth-child(7) {
		left:60%;
		height:20px;
	}
	.flame:nth-child(8) {
		left:70%;
		height:30px;
	}
	.flame:nth-child(9) {
		left:80%;
		height:40px;
	}
	.flame:nth-child(10) {
		left:90%;
		height:20px;
	}
	
	
	@keyframes fire {
		0% {
			bottom:-160px;
		}
		
		20% {
			bottom:-160px;
		}
		30% {
			bottom:-10px;
		}
		40% {
			bottom:0;
		}
		50% {
			bottom:-10px;
		}
		60% {
			bottom:0;
		}
		70% {
			bottom:-10px;
		}
		80% {
			bottom:0;
		}
		100% {
			bottom:-160px;
		}
	}
			
	@keyframes eyes {
		0% {
			background: $color-dark;
		}
		20% {
			background: $color-dark;
		}
		40% {
			background:#FB8C00;
		}
		60% {
			background:#FB8C00;
		}
		70% {
			background:#FB8C00;
		}
		
		100% {
			background: $color-dark;
		
		}
	}
	
	
}

// ---------
//! Wolverine
// ---------
#wolverine {
	background:$color-gold;
	
	.container {
		background:#fff;
		border:2px solid darken($color-gold, 15%);
	}
	
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:$color-gold;
		top:140px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 0;
		z-index: 1;
		overflow: hidden;
	}
	
	.face {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-skin;
		border-radius:100px;
		top:60px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
		overflow: hidden;
	}
	
	.fin {
		position: absolute;
		width:50px;
		height:40px;
		background: $color-dark;
		z-index: 20;
		top:71px;
	}
	
	.fin.one{
		border-radius: 0 0 2px 90%;
		left:40px;
		transform: rotate(25deg);
	}
	
	.fin.two{
		border-radius: 0 0 90% 2px;
		right:40px;
		transform: rotate(-25deg);
	}
	.fin-bridge {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		background: $color-dark;
		height:30px;
		width:34px;
		top:80px;
		z-index: 20;
	}
	
	.mask {
		position: absolute;
		height:50px;
		left:-10px;
		right:-10px;
		background: $color-gold;
	}

	
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:100px;
		background:$color-skin;
	}
	
	.eye{
		position: absolute;
		top:92px;
		width:10px;
		height:8px;
		background: #fff;
		border-radius: 50%;
		z-index: 100;
	}
	
	.eye.one {
		left:76px;
		transform: rotate(45deg);
	}
	.eye.two {
		right:76px;
		transform: rotate(-45deg);
	}	
		
	.mouth {
		position: absolute;
		background: $color-dark;
		width:30px;
		height:10px;
		border-radius: 0 0 100px 100px;
		top:56px;
		left:50%;
		transform: translateX(-50%) rotate(180deg);
	}
	
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:8px;
		background:$color-gold;
		top:102px;
		border-radius: 4px 4px 0 0;
		z-index: 30;
	}
	
	.stripes {
		position: absolute;
		border-style: solid;
		width:0;
		height:0;
		top:40px;
	}
	
	.stripes.left {
		border-width: 10px 0 10px 40px;
		border-color: transparent transparent transparent $color-dark;
		left:0;

	}
	
	.stripes.right {
		border-width: 10px 40px 10px 0;
		border-color: transparent $color-dark transparent transparent;
		right:0;

	}
	
	
	.shoulder {
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
		z-index: 30;
		top:140px;
	}
	
	.shoulder.left {
		left:30px;
		border-width: 0 30px 80px 0;
		border-color: transparent $color-blue transparent transparent;
	}
	
	.shoulder.right {
		right:30px;
		border-width: 80px 30px 0 0;
		border-color:  $color-blue transparent transparent transparent;
	}
	
	.arm {
		position: absolute;
		z-index: 100;
		background: $color-skin;
		width:28px;
		height:46px;
		bottom:0;
		border-radius: 4px;
	}
	
	.arm.left {
		left:40px; 
		transform: rotate(5deg);
	}
	
	.arm.right{
		right:40px;
		transform: rotate(-5deg);
	}
	
	.claw {
		position: absolute;
		bottom:36px;
		height:0;
		width:4px;
		background: #CFD8DC;
		animation-name: snikt;
		animation-duration: 4s; 
		animation-timing-function: ease-in; 
		animation-delay: 0s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	.claw:nth-child(1){
		left:4px;
	}
	
	.claw:nth-child(2){
		left:50%;
		margin-left:-2px;
	}
	
	.claw:nth-child(3){
		right:4px;
	}
	
	.arm.left .claw{
		border-radius: 80% 0 0 0;
	}
	
	.arm.right .claw {
		border-radius: 0 80% 0 0;
	}
	
	@keyframes snikt {
		0% {
			height:0;
		}
		10% {
			height: 40px;
		}
		60% {
			height:40px;
		}
		70% {
			height:40px;
		}
		80% {
			height:0px;
		}
		100% {
			height: 0;
		}
	}
	
	
}

// ---------
//! Storm
// ---------
#storm {
	background:$color-hair-storm;
	
	.container {
		background:#fff;
		border:2px solid darken($color-hair-storm, 20%);
	}
	
	.body {
		position: absolute;
		width:80px;
		height:150px;
		background:#eee;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 1;
		overflow: hidden;
	}
	
	.body:before {
		content: "";
		position: absolute;
		top:-3px;
		left:50%;
		transform: translateX(-50%);
		background: $color-skin-dark;
		width:70%;
		height:20px;
		border-radius: 100%;
	}
	.cape {
		position: absolute;
		background: $color-dark;
		width:140px;
		height:150px;
		top:124px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 50%;
	}

	.badge {
		position: absolute;
		width:30px;
		height:30px;
		top:140px;
		left:50%;
		transform: translateX(-50%);
		background:red;
		border-radius: 100%;
		border:4px solid darken($color-dark, 10%);
		z-index: 10;
	}
	
	.badge:before,
	.badge:after {
		content:"";
		position: absolute;
		width:30px;
		height:4px;
		top:50%;
		left:50%;
		background:darken($color-dark, 10%);
	}
	
	.badge:before {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.badge:after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
		
	.face {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-skin-dark;
		border-radius:100px;
		top:50px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
	}
		
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:$color-skin-dark;
	}
		
	.eyes {
		position: absolute;
		top:34px;
		width:10px;
		height:10px;
		background: #ddd;
		border-radius: 50%;
		left:25%;
		transform: translateX(-50%);
	}
		
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:10px;
		background: #ddd;
		top:0;
		border-radius: 50%;
		right:-40px;
	}
		
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-skin-dark, 10%);
		top:36px;
		border-radius: 4px;
	}
		
	.mouth {
		position: absolute;
		background: #5e2f0d;
		width:30px;
		height:8px;
		border-radius: 0 0 100px 100px;
		top:60px;
		left:50%;
		transform: translateX(-50%);
	}
		
	.ear {
		position: absolute;
		background:$color-skin-dark;
		width:26px;
		height:26px;
		border-radius: 100%;
		left:50px;
		top:76px;
	}
	
	.ear.right {
		left:120px;
	}
	
	.ear:before {
		content:"";
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		width:16px;
		height:16px;
		background: darken($color-skin-dark, 10%);
		border-radius: 100%;
	}
	
	.hair {
		position: absolute;
		background: $color-hair-storm;
		width:30px;
		height:40px;
		border-radius: 50% 0 50% 0;
		left:86px;
		top:34px;
		z-index: 20;
		transform: rotate(-20deg);
	}
	
	.hair:before {
		content: "";
		position: absolute;
		background: $color-hair-storm;
		width:30px;
		height:40px;
		border-radius: 50% 0 50% 0;
		left:-3px;
		top:-6px;
		z-index: 20;
		transform: rotate(-20deg);
	}
		
	.cloud {
		position: absolute;
		background: #ccc;
		width:80px;
		height:40px;
		border-radius: 20px;
		animation-name: clouds;
		animation-duration: 10s; 
		animation-timing-function: ease-in-out; 
		animation-delay: 0s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	.cloud:after {
		content: "";
		position: absolute;
		width:30px;
		height:30px;
		left:10px;
		top:-10px;
		border-radius: 50%;
		background:#ccc;
	}
	
	.cloud:before {
		content: "";
		position: absolute;
		width:40px;
		height:40px;
		right:8px;
		top:-15px;
		border-radius: 50%;
		background:#ccc;
	}

	.cloud.one {
		top:30px;
		left:5px;
	}
	
	.cloud.two {
		top:40px;
		right:0px;
	}
	
	.rain {
		position: absolute;
		width:80px;
		animation-name: clouds;
		animation-duration: 10s; 
		animation-timing-function: ease-in-out; 
		animation-delay: 0s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	
	.rain.left {
		left:5px;
		top:60px;
	}
	
	.rain.right {
		right:0px;
		top:70px;
	}
	
	.drop {
		position: absolute;
		background:#64B5F6;
		height:6px;
		width:2px;
		left:20px;
		top:0;
	}

	.drop:before,
	.drop:after {
		content: "";
		position: absolute;
		width:2px;
		height:6px;
		background:#64B5F6;
	}
	
	.drop:before {
		left:20px;
		top:4px;
	}
	
	.drop:after {
		left:38px;
		top:0px;
	}
	
	.drop.one {
		animation-name: raindrops;
		animation-duration: 1s; 
		animation-timing-function: linear; 
		animation-delay: 0s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	
	.drop.two {
		animation-name: raindrops;
		animation-duration: 1s; 
		animation-timing-function: linear; 
		animation-delay: .2s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	
	.drop.three {
		animation-name: raindrops;
		animation-duration: 1s; 
		animation-timing-function: linear; 
		animation-delay: .4s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	
	.drop.four {
		animation-name: raindrops;
		animation-duration: 1s; 
		animation-timing-function: linear; 
		animation-delay: .6s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	
	.drop.five {
		animation-name: raindrops;
		animation-duration: 1s; 
		animation-timing-function: linear; 
		animation-delay: .8s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
			
	@keyframes clouds {
		0% {
			opacity:0;			
		}
		20% {
			opacity: 0;
			transform: scale(0.5);
		}
		30% {
			opacity: 1;
			transform: scale(1);
		}
		70% {
			opacity: 1;
		}
		80% {
			opacity: 0;
		}
		100% {
			opacity: 0;
		}
	}
	
	@keyframes raindrops {
		0% {
			transform: translateY(0);			
		}
		100% {
			transform: translateY(150px);
		}
	}
	
}

// ---------
//! Nightcrawler
// ---------
#nightcrawler {
	background:$color-elf;
	
	.container {
		background:#fff;
		border:2px solid darken($color-elf, 10%);
	}
	.kurt {
		animation-name: bamf;
		animation-duration: 10s; 
		animation-timing-function: ease-in-out; 
		animation-delay: 3s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:$color-dark;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 1;
		overflow: hidden;
	}
		
	.shoulders {
		position: absolute;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 200px 50px 0 50px;
		border-color: #b71c1c transparent transparent transparent;
		z-index: 1;
		border-radius: 15px;
	}
	.shoulders:after {
		content: "";
		position: absolute;
		bottom:0;
		left:50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 200px 20px 0 20px;
		border-color: $color-dark transparent transparent transparent;
	}
		
	.face {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-elf;
		border-radius:100px;
		top:50px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
	}
		
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:$color-elf;
	}
		
	.eyes {
		position: absolute;
		top:34px;
		width:10px;
		height:10px;
		background: $color-gold;
		border-radius: 50%;
		left:25%;
		transform: translateX(-50%);
	}
		
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:10px;
		background: $color-gold;
		top:0;
		border-radius: 50%;
		right:-40px;
	}
		
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-elf, 15%);
		top:36px;
		border-radius: 4px;
	}
		
	.mouth {
		position: absolute;
		background: #ccc;
		width:30px;
		height:10px;
		border-radius: 0 0 100px 100px;
		top:60px;
		left:50%;
		transform: translateX(-50%);
	}
		
	.ear {
		position: absolute;
		background:$color-elf;
		width:26px;
		height:26px;
		left:50px;
		top:76px;
		z-index: 1;
	}
	
	.ear.left {
		border-radius: 0% 100% 20% 100%;
	}
	.ear.right {
		left:120px;
		border-radius: 100% 0 100% 20%;
	}
	
	.ear:before {
		content:"";
		position: absolute;
		top:3px;
		left:50%;
		transform: translateX(-50%);
		width:16px;
		height:16px;
		background: darken($color-elf, 10%);
		border-radius: 100%;
	}
	
	.hair {
		position: absolute;
		width:70px;
		height:40px;
		background:darken($color-elf, 20%);
		border-radius: 50%;
		top:43px;
		left:62px;
		z-index: 1;
	}
	
	.pouf {
		position: absolute;
		width:30px;
		height:20px;
		border-radius: 50%;
		left:60px;
		top:46px;
		background:darken($color-elf, 20%); 
		transform: rotate(-53deg);
		z-index: 10;
	}
	
	.pomp {
		position: absolute;
		width:51px;
		height:23px;
		border-radius: 100% 0 100% 100%;
		left:80px;
		top:44px;
		background:darken($color-elf, 20%); 
		z-index: 10;
	}
	
	.pomp:after {
		content:"";
		position: absolute;
		width:47px; 
		height:20px;
		border-radius: 100% 0 100% 100%;
		left:-4px;
		top:-6px;
		background:darken($color-elf, 20%); 
		z-index: 12;
		transform: rotate(-15deg);
	}
	
	.pomp:before {
		content:"";
		position: absolute;
		width:30px; 
		height:20px;
		border-radius: 100% 20% 100% 100%;
		left:-4px;
		top:-6px;
		background:darken($color-elf, 20%); 
		z-index: 12;
		transform: rotate(-50deg);
	}
	
	.bamf {
		position: absolute;
		top:50%;
		left:50%;
		margin-left:-50px;
		margin-top:-50px;
		width:100px;
		height:100px;
		background:$color-bamf;
		border-radius: 50%;
		opacity: 0;
		animation-name: brimstone;
		animation-duration: 10s; 
		animation-timing-function: ease-in-out; 
		animation-delay: 3s;
		animation-direction: normal;
		animation-iteration-count: infinite;
	}
	
	.bamf:before {
		content: "";
		position: absolute;
		top:-10px;
		left:-10px;
		width:40px;
		height:40px;
		background:lighten($color-bamf, 5%);
		border-radius: 50%;
	}
	
	.bamf:after {
		content: "";
		position: absolute;
		bottom:-10px;
		right:-10px;
		width:50px;
		height:50px;
		background:lighten($color-bamf, 10%);
		border-radius: 50%;
	}
	
	.bamf-cloud {
		position: absolute;
		bottom:-20px;
		left:-20px;
		width:60px;
		height:60px;
		background:lighten($color-bamf, 10%);
		border-radius: 50%;
	}
	
	.bamf-cloud:before {
		content:"";
		position: absolute;
		top:-70px;
		left:70px;
		width:60px;
		height:60px;
		background:lighten($color-bamf, 5%);
		border-radius: 50%;
	}
	
	.bamf-cloud:after {
		content:"";
		position: absolute;
		top:-70px;
		left:60px;
		width:20px;
		height:20px;
		background:lighten($color-bamf, 10%);
		border-radius: 50%;
	}
	
	
	
	@keyframes bamf {
		0% {
			opacity: 1;
		}
		5% {
			opacity:0;
		}
		20% {
			opacity:0;
		}
		25% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}

	}
			
	@keyframes brimstone {
		0% {
			transform: scale(0.2);
			opacity: 0;
		}
		5% {
			transform: scale(1);
			opacity:1;
		}
		15% {
			transform: scale(1);
			opacity:1;
		}
		20% {
			transform: scale(0.2);
			opacity: 0;
		}
		100% {
			transform: scale(0.2);
			opacity: 0;
		}
	}
	
}

// ---------
//! Iceman
// ---------
#iceman {
	background:darken(#BBDEFB, 10%);
	
	.container {
		background:#fff;
		border:2px solid darken(#BBDEFB, 20%);
	}
	
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:$color-blue;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 1;
		overflow: hidden;
		animation: freezeBody 5s 1s infinite backwards alternate;
	}

	.stripes {
		position: absolute;
		background:$color-gold;
		width:20px;
		left:50%;
		height:160px;
		top:-40px;
		transform: translateX(-50%) rotate(55deg);
		z-index: 1;
		animation: freezeGold 5s 1s infinite backwards alternate;
	}
		
	.stripes:before {
		content:"";
		position: absolute;
		background:$color-gold;
		width:20px;
		left:-50%;
		height:160px;
		top:0;
		transform: translateX(50%) rotate(-110deg);
		z-index: 1;
		animation: freezeGold 5s 1s infinite backwards alternate;
	}
	
	.face {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-skin;
		border-radius:100px;
		top:50px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
		animation: freezeSkin 5s 1s infinite backwards alternate;
	}
		
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:$color-skin;
		animation: freezeSkin 5s 1s infinite backwards alternate;
	}
		
	.eyes {
		position: absolute;
		top:34px;
		width:10px;
		height:10px;
		background: $color-dark;
		border-radius: 50%;
		left:25%;
		transform: translateX(-50%);
		animation: freezeDarker 5s 1s infinite backwards alternate;
		
	}
		
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:10px;
		background: $color-dark;
		top:0;
		border-radius: 50%;
		right:-40px;
		animation: freezeDarker 5s 1s infinite backwards alternate;
	}
		
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-skin, 15%);
		top:36px;
		border-radius: 4px;
		animation: freezeDarkerSkin 5s 1s infinite backwards alternate;
	}
		
	.mouth {
		position: absolute;
		background: $color-dark;
		width:30px;
		height:14px;
		border-radius: 0 0 100px 100px;
		top:56px;
		left:50%;
		transform: translateX(-50%);
		animation: freezeDarker 5s 1s infinite backwards alternate;
	}
		
	.ear {
		position: absolute;
		background:$color-skin;
		width:26px;
		height:26px;
		border-radius: 100%;
		left:50px;
		top:76px;
		animation: freezeSkin 5s 1s infinite backwards alternate;
	}
	
	.ear.right {
		left:120px;
	}
	
	.ear:before {
		content:"";
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		width:16px;
		height:16px;
		background: darken($color-skin, 10%);
		border-radius: 100%;
		animation: freezeDarkerSkin 5s 1s infinite backwards alternate;
	}
	
	.hair {
		position: absolute;
		width:70px;
		height:50px;
		background:$color-hair-iceman;
		border-radius: 50%;
		top:40px;
		left:62px;
		z-index: 1;
		animation: freezeHair 5s 1s infinite backwards alternate;
	}
	
	.pouf {
		position: absolute;
		width:50px;
		height:30px;
		border-radius: 100px 100% 100px 100%;
		left:60px;
		top:46px;
		background:$color-hair-iceman;
		z-index: 10;
		animation: freezeHair 5s 1s infinite backwards alternate;
	}
			
	@keyframes freezeBody {
		0% {
			background-color:$color-blue;
		}
		10% {
			background-color: $color-blue;
		}
		20% {
			background-color:#BBDEFB;
		}
		70% {
			background-color:#BBDEFB;
		}
		80% {
			background-color: $color-blue;
		}
		100% {
			background-color: $color-blue;
		}
	}
	
	@keyframes freezeSkin {
		0% {
			background-color:$color-skin;
		}
		10% {
			background-color: $color-skin;
		}
		20% {
			background-color:#BBDEFB;
		}
		70% {
			background-color:#BBDEFB;
		}
		80% {
			background-color: $color-skin;
		}
		100% {
			background-color: $color-skin;
		}
	}
	
	@keyframes freezeHair {
		0% {
			background-color:$color-hair-iceman;
		}
		10% {
			background-color: $color-hair-iceman;
		}
		20% {
			background-color:darken(#BBDEFB, 5%);
		}
		70% {
			background-color:darken(#BBDEFB, 5%);
		}
		80% {
			background-color: $color-hair-iceman;
		}
		100% {
			background-color: $color-hair-iceman;
		}
	}
	
	@keyframes freezeGold {
		0% {
			background-color:$color-gold;
		}
		10% {
			background-color: $color-gold;
		}
		20% {
			background-color:darken(#BBDEFB, 5%);
		}
		70% {
			background-color:darken(#BBDEFB, 5%);
		}
		80% {
			background-color: $color-gold;
		}
		100% {
			background-color: $color-gold;
		}
	}
	
	@keyframes freezeDarkerSkin {
		0% {
			background-color:darken($color-skin, 10%);
		}
		10% {
			background-color: darken($color-skin, 10%);
		}
		20% {
			background-color:darken(#BBDEFB, 5%);
		}
		70% {
			background-color:darken(#BBDEFB, 5%);
		}
		80% {
			background-color: darken($color-skin, 10%);
		}
		100% {
			background-color: darken($color-skin, 10%);
		}
	}
	
	@keyframes freezeDarker {
		0% {
			background-color:$color-dark;
		}
		10% {
			background-color:$color-dark;
		}
		20% {
			background-color:darken(#BBDEFB, 20%);
		}
		70% {
			background-color:darken(#BBDEFB, 20%);
		}
		80% {
			background-color:$color-dark;
		}
		100% {
			background-color: $color-dark;
		}
	}
	
}

// ---------
//! Magneto
// ---------
#magneto {
	background:#E8E8E8;
	
	.container {
		background:#fff;
		border:2px solid darken(#e8e8e8, 10%);
	}
	
	.body {
		position: absolute;
		width:80px;
		height:150px;
		background:$color-magneto-prime;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 1;
		overflow: hidden;
	}
	
	.body:before {
		content: "";
		position: absolute;
		top:-3px;
		left:50%;
		transform: translateX(-50%);
		background: $color-magneto-accent;
		width:80%;
		height:30px;
		border-radius: 100%;
	}
	
	.helmet {
		position: absolute;
		width:100px;
		height:100px;
		top:30px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px 40px 0 0;
		background-color:$color-magneto-prime;
		background-clip: padding-box;		
		z-index: 5;
		border-top:10px solid rgba($color-magnetism, 0);
		border-left:10px solid rgba($color-magnetism, 0);
		border-right:10px solid rgba($color-magnetism, 0);
		animation-name: magnet;
		animation-duration: 10s; 
		animation-timing-function: ease-in-out; 
		animation-delay: 0s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}
	
	.opening {
		position: absolute;
		width:38px;
		height:30px;
		bottom:0px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 0;
		background:$color-skin;
		z-index: 5;
		border-left:4px solid $color-magneto-accent;
		border-right:4px solid $color-magneto-accent;
	}
	
	.opening:before {
		content:"";
		width:38px;
		height:38px;
		border-radius: 50% 0 0 50%;
		position: absolute;
		left:-19px;
		top:-30px;
		background: $color-skin;
		border:4px solid $color-magneto-accent;
	}
	
	.opening:after {
		content:"";
		width:38px;
		height:38px;
		border-radius: 0 50% 50% 0;
		position: absolute;
		right:-19px;
		top:-30px;
		background: $color-skin;
		border:4px solid $color-magneto-accent;
	}
	
	.face {
		position: absolute;
		width:30px;
		height:56px;
		background:$color-skin;
		top:74px;
		left:50%;
		transform: translateX(-50%);
		z-index: 7;
	}
	
	.face:before {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		top:-5px;
		left:50%;
		margin-left:-10px;
		border-style: solid;
		border-width: 8px 10px 0 10px;
		border-color: $color-magneto-prime transparent transparent transparent;
		z-index: 10;

	}
	
	.face:after {
		content: "";
		width: 0;
		height: 0;
		position: absolute;
		top:0;
		left:50%;
		margin-left:-10px;
		border-style: solid;
		border-width: 10px 10px 0 10px;
		border-color: $color-magneto-accent transparent transparent transparent;

	}
		
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:$color-magneto-accent;
	}
		
	.eye{
		position: absolute;
		top:10px;
		width:10px;
		height:8px;
		background: $color-dark;
		border-radius: 50%;
		z-index: 100;
	}
	
	.eye.one {
		left:-6px;
		transform: rotate(25deg);
	}
	
	.eye.two {
		right:-6px;
		transform: rotate(-25deg);
	}		
		
	.eyes {
		position: absolute;
		top:10px;
		width:10px;
		height:10px;
		background: $color-dark;
		border-radius: 50%;
		left:-6px;
	}
		
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:10px;
		background: $color-dark;
		top:0;
		border-radius: 50%;
		right:-33px;
	}
		
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-skin, 15%);
		top:16px;
		border-radius: 4px;
	}
		
	.mouth {
		position: absolute;
		background: $color-dark;
		width:26px;
		height:4px;
		border-radius: 0 0 2px 2px;
		top:40px;
		left:50%;
		transform: translateX(-50%) rotate(180deg);
	}
		
	.cape {
		position: absolute;
		background-color: $color-magneto-accent;
		width:162px;
		height:162px;
		top:112px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 50%;
		background-clip: padding-box;
		border-left:10px solid rgba($color-magnetism, 0);
		border-right:10px solid rgba($color-magnetism, 0);
		border-top:10px solid rgba($color-magnetism, 0);
		animation-name: magnet;
		animation-duration: 10s; 
		animation-timing-function: ease-in-out; 
		animation-delay: 0s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}	
	
	@keyframes magnet {
		0% {
			border-top-color: rgba($color-magnetism, 0);
			border-left-color: rgba($color-magnetism, 0);
			border-right-color: rgba($color-magnetism, 0);
		}
		10% {
			border-top-color: rgba($color-magnetism, .5);
			border-left-color: rgba($color-magnetism, .5);
			border-right-color: rgba($color-magnetism, .5);
		}
		20% {
			border-top-color: rgba($color-magnetism, 0);
			border-left-color: rgba($color-magnetism, 0);
			border-right-color: rgba($color-magnetism, 0);
		}
		40% {
			border-top-color: rgba($color-magnetism, .75);
			border-left-color: rgba($color-magnetism, .75);
			border-right-color: rgba($color-magnetism, .75);
		}
		60% {
			border-top-color: rgba($color-magnetism, 0);
			border-left-color: rgba($color-magnetism, 0);
			border-right-color: rgba($color-magnetism, 0);
		}
		70% {
			border-top-color: rgba($color-magnetism, .5);
			border-left-color: rgba($color-magnetism, .5);
			border-right-color: rgba($color-magnetism, .5);
		}
		80% {
			border-top-color: rgba($color-magnetism, 0);
			border-left-color: rgba($color-magnetism, 0);
			border-right-color: rgba($color-magnetism, 0);
		}
		100% {
			border-top-color: rgba($color-magnetism, 1);
			border-left-color: rgba($color-magnetism, 1);
			border-right-color: rgba($color-magnetism, 1);
		}

	}

	
}