/* Layout Stuff */
* {
	box-sizing:border-box;
}

.stripe {
	width:100%;
	padding:64px 32px; 
	position: relative;
	height:50vh;
	min-height: 324px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#light {
	background:#E8E8E8;
}

#dark{
	background:#131313;
}

.container {
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	width:600px;
	margin:0 auto;
	background:#fff;
	border-radius: 10px;
}

.person {
	width:196px;
	height:196px;
	position: relative;
	overflow: hidden;
}

/* Finn */

$color-skin-finn: #965C48;
$color-hair-finn: #33292A;
$color-jacket-finn: #D1A868;

#finn {
		
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:transparent;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 1;
		overflow: hidden;
	}
	
	.body:before {
		content:"";
		position: absolute;
		background:#000102;
		left:50%;
		transform: translateX(-50%);
		width:50%;
		height:100%;
	}
	
	.face {
		position: absolute;
		width:80px;
		height:75px;
		background:$color-skin-finn;
		border-radius:50%;
		top:55px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
	}
	
	.hair {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		top:43px;
		width:80px;
		height:80px;
		background:$color-hair-finn;
		border-radius: 50%;
	}
	
	.ear {
		position: absolute;
		background:$color-skin-finn;
		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-finn, 10%);
		border-radius: 100%;
	}
	
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:darken($color-skin-finn, 10%);
	}
	
	.eyes {
		position: absolute;
		top:30px;
		width:10px;
		height:10px;
		background: darken($color-skin-finn,30%);
		border-radius: 50%;
		left:25%;
		transform: translateX(-50%);
	}
	
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:10px;
		background: darken($color-skin-finn, 30%);
		top:0;
		border-radius: 50%;
		right:-40px;
	}
	
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-skin-finn, 10%);
		top:31px;
		border-radius: 4px;
	}
	
	.mouth {
		position: absolute;
		background: darken($color-skin-finn, 30%);
		width:30px;
		height:4px;
		border-radius: 0 0 5px 5px;
		top:55px;
		left:50%;
		transform: translateX(-50%);
	}
	
	.jacket {
		background: $color-jacket-finn;
		position: absolute;
		top:0;
		width:30%;
		height:100%;
	}
	
	.jacket-left {
		left:0;
	}
	
	.jacket-right {
		right:0;
	}

	.jacket:after {
		content: "";
		width:6px;
		position: absolute;
		top:0;
		height:110%;
		
		background: darken($color-jacket-finn, 20%);
	}
	
	.jacket-left:after {
		left:100%;
		transform: translateX(-2px);
	}
	
	.jacket-right:after {
		right:100%;
		transform: translateX(2px);
	}
	
	.jacket-left:before {
		content:"";
		background:#A61C19;
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:20px;
	}
	
	.jacket-right:before {
		content:"";
		background:#A61C19;
		position: absolute;
		top:20px;
		left:0;
		width:100%;
		height:10px;
	}
	
}

/* Rey */

$color-skin-rey: #F0BEAF;
$color-hair-rey: #363435; 

#rey {
		
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:transparent;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 3;
		overflow: hidden;
	}
	
	.fold-left {
		position: absolute;
		top:0px;
		left:-30px;
		width:100%;
		height:100%;
		background:#BDB5B4;
		transform: rotate(-30deg);
	}
	
	.fold-right {
		position: absolute;
		top:0px;
		right:-30px;
		width:100%;
		height:100%;
		background:#b0a8a7; 
		transform: rotate(30deg);
	}
	
	.face {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-skin-rey;
		border-radius:50%;
		top:50px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
	}
	
	.hair {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		top:40px;
		width:80px;
		height:50px;
		background:$color-hair-rey;
		border-radius: 50% 50% 0 0;
	}
	.hair:before {
		content:"";
		position: absolute;
		width:30px;
		height:30px;
		border-radius: 50%;
		left:50%;
		top:-10px;
		background:$color-hair-rey;
		transform: translateX(-50%);
	}
	
	.bangs {
		position: absolute;
		left:50%;
		top:40px;
		width:60px;
		height:20px;
		background:$color-hair-rey;
		z-index: 4;
		transform: translateX(-50%);
		border-radius: 50% 50% 50% 50%;
	}
	
	.hair-left {
		position: absolute;
		background: $color-hair-rey;
		height:30px;
		width:4px;
		top:66px;
		left:56px;
		z-index: 6;
		border-radius: 0% 0% 5px 5px;
		transform: rotate(8deg);
	}
	
	.hair-right {
		position: absolute;
		background: $color-hair-rey;
		height:30px;
		width:4px;
		top:66px;
		right:56px;
		z-index: 6;
		border-radius: 0% 0% 5px 5px;
		transform: rotate(-8deg);
		
	}
	
	.neck {
		position: absolute;
		z-index: 2;
		width:30px;
		height:60px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:110px;
		background:darken($color-skin-rey, 10%);
	}
	
	.eyes {
		position: absolute;
		top:34px;
		width:10px;
		height:10px;
		background: #424b54;
		border-radius: 50%;
		left:25%;
		transform: translateX(-50%);
	}
	
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:10px;
		background: #424b54;
		top:0;
		border-radius: 50%;
		right:-40px;
	}
	
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:#DB9B99;
		top:36px;
		border-radius: 4px;
	}
	
	.mouth {
		position: absolute;
		background: #424b54;
		width:30px;
		height:8px;
		border-radius: 0 0 100px 100px;
		top:60px;
		left:50%;
		transform: translateX(-50%);
	}
	
	.lightsaber {
		position: absolute;
		bottom:-30px;
		left:30%;
		width:10px;
		height:0;
		background: #4FC3F7;
		z-index: 10;
		border-radius: 4px 4px 0 0;
		transform: rotate(30deg);
		animation-name: saber;
		animation-duration: 6s; 
		animation-timing-function: linear; 
		animation-delay: 1s;
		animation-direction: normal;
		animation-iteration-count: infinite;
		transform-origin: left bottom;
	}
	
	@keyframes saber {
		0% {height: 0;}
		5% {height: 160px;}
		55% {height: 160px;}
		60% {height: 0;}
		100% {height:0;}
	}
	
}

/* Poe */

$color-skin-poe: #E1AE96;
$color-hair-poe: #33292A;
$color-jacket-poe: #EA6B26;
$color-helmet-poe:	#35302D;

#poe {
		
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:$color-jacket-poe;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px;
		z-index: 1;
		overflow: hidden;
	}
	
	.flight-suit {
		position: absolute;
		left:50%;
		width:80px;
		top:130px;
		height:150px;
		transform: translateX(-50%);
		background:#D2D5C2;
		z-index: 2;
		border-radius: 15px 15px 0 0;
		overflow: hidden;
	}
	
	.flight-suit:before {
		content:"";
		position: absolute;
		top:0;
		left:50%;
		transform: translateX(-50%);
		width:36px;
		height:20px;
		background: $color-jacket-poe;
		border-radius: 0 0 6px 6px;
	}
	
	.flight-suit:after {
		content: "";
		position: absolute;
		top:16px;
		left:50%;
		transform: translateX(-50%);
		width:40px;
		height:30px;
		background: lighten(#D2D5C2, 20%);
		border-radius: 2px;
	}
	
	.tube {
		position: absolute;
		background: $color-helmet-poe;
		width:6px;
		height:40px;
		top:30px;
		left:24px;
	}
	
	.buttons {
		position: absolute;
		width:32px;
		height:20px;
		top:20px;
		left:50%;
		transform: translateX(-50%);
		z-index: 10;
	}
	
	.b1 {
		position: absolute;
		top:0;
		left:0;
		width:6px;
		height:6px;
		background:#61A1C5;
	}
	
	.b2 {
		position: absolute;
		top:0;
		left:8px;
		width:14px;
		height:20px;
		background:#454545;
	}
	
	.b3 {
		position: absolute;
		top:0;
		right:0;
		width:8px;
		height:12px;
		background:#61A1C5;
	}
	
	.helmet {
		position: absolute;
		width:80px;
		height:45px;
		background:$color-helmet-poe;
		border-radius: 50% 50% 0 0;
		top:35px;
		left:50%;
		transform: translateX(-50%);
		z-index: 4;	
		overflow: hidden;
	}
	
	.helmet:before {
		content:"";
		position: absolute;
		width:8px;
		height:100%;
		top:0;
		left:26px;
		background:#B9444D;
	}
	.helmet:after {
		content: "";
		position: absolute;
		width:24px;
		height:80%;
		background:#CCC7C4;
		right:10px;
		top:0;
		border-radius: 0 0 12px 12px;
	}
	
	.helmet-triangle {
		position: absolute;
		top:0;
		left:2px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 20px 50px 0;
		border-color: transparent #B9444D transparent transparent;
	}
	
	.helmet-back {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-helmet-poe;
		border-radius: 50% 50% 10px 10px;
		top:35px;
		left:50%;
		transform: translateX(-50%);
		z-index: 2;	
	}
	
	.helmet-back:before {
		content:"";
		position: absolute;
		bottom:16px;
		width:10px;
		height:40px;
		border-radius: 50%;
		background:$color-helmet-poe;
		left:-5px;
	}
	
	.helmet-back:after {
		content:"";
		position: absolute;
		bottom:16px;
		width:10px;
		height:40px;
		border-radius: 50%;
		background:$color-helmet-poe;
		right:-5px;
	}
	
	.helmet-face {
		position: absolute;
		width:70px;
		height:14px;
		left:50%;
		transform: translateX(-50%);
		top:110px;
		z-index: 10;
	}
	
	.helmet-face:before {
		content:"";
		position: absolute;
		left:-3px;
		top:0;
		width:25px;
		height:100%;
		background: $color-helmet-poe;
		border-radius: 0 50% 5px 100%;
		transform: rotate(25deg);
	}
	
	.helmet-face:after {
		content:"";
		position: absolute;
		right:-3px;
		top:0;
		width:25px;
		height:100%;
		background: $color-helmet-poe;
		border-radius: 50% 0 100% 5px;
		transform: rotate(-25deg);
	}
	
	.helmet-ornament {
		position: absolute;
		background: #B9444D;
		width:20px;
		height:20px;
		border-radius: 50%;
		top:14px;
		left:48px;
		z-index: 10;
	}
	.helmet-ornament:before {
		content:"";
		width:16px;
		height:16px;
		position: absolute;
		top:-4px;
		left:50%;
		transform: translateX(-50%);
		background:#CCC7C4;
		border-radius: 50%;
	}
	
	.helmet-ornament:after {
		content:"";
		position: absolute;
		top:2px;
		left:50%;
		transform: translateX(-50%);
		width:4px;
		height:16px;
		background:#B9444D;
		border-radius: 2px;
	}
	
	.face {
		position: absolute;
		width:70px;
		height:75px;
		background:$color-skin-poe;
		border-radius:50%;
		top:55px;
		left:50%;
		transform: translateX(-50%);
		z-index: 4;
		overflow: hidden;
	}
	
	.visor {
		position: absolute;
		width:100%;
		height:22px;
		top:20px;
		background:rgba(#F57C00, 0.3);
	}
	
	
	.neck {
		position: absolute;
		z-index: 3;
		width:30px;
		height:50px;
		border-radius: 12px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:darken($color-skin-poe, 10%);
	}
	
	.eyes {
		position: absolute;
		top:30px;
		width:10px;
		height:10px;
		background: #424b54;
		border-radius: 50%;
		left:25%;
		transform: translateX(-50%);
	}
	
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:10px;
		background: #424b54;
		top:0;
		border-radius: 50%;
		right:-35px;
	}
	
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-skin-poe, 10%);
		top:31px;
		border-radius: 4px;
	}
	
	.mouth {
		position: absolute;
		background: #424b54;
		width:30px;
		height:6px;
		border-radius: 0 0 50% 50%;
		top:55px;
		left:50%;
		transform: translateX(-50%);
	}
	
	.jacket {
		background: $color-jacket-poe;
		position: absolute;
		top:0;
		width:30%;
		height:100%;
	}
	
	.jacket-left {
		left:0;
	}
	
	.jacket-right {
		right:0;
	}

	.jacket:after {
		content: "";
		width:6px;
		position: absolute;
		top:0;
		height:110%;
		background: darken($color-jacket-poe, 20%);
	}
	
	.jacket-left:after {
		left:100%;
		transform: translateX(-2px);
	}
	
	.jacket-right:after {
		right:100%;
		transform: translateX(2px);
	}
	
	.jacket-left:before {
		content:"";
		background:#A61C19;
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:20px;
	}
	
	.jacket-right:before {
		content:"";
		background:#A61C19;
		position: absolute;
		top:20px;
		left:0;
		width:100%;
		height:10px;
	}
	
}

/* Phasma */

$color-armor-phasma: #DCDDDF;
$color-visor-phasma: #191919;

#phasma {
		
	.body {
		position: absolute;
		width:100px;
		height:170px;
		background:$color-armor-phasma;
		top:115px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 20px;
	}
	
	.cape {
		position: absolute;
		top:115px;
		left:70px;
		width:80px;
		height:100px;
		background: #902D2C;
		border-radius: 0 20px 0 100%;
		z-index: 5;
		overflow: hidden;
	}
	
	.cape:before {
		content:"";
		position: absolute;
		top:0;
		left:6px;
		width:100%;
		height:100%;
		background: $color-visor-phasma;
		border-radius: 0 20px 0 100%;
		z-index: 4;
	}
	
	.pauldron {
		position: absolute;
		left:-4px;
		top:0px;
		width:34px;
		height:54px;
		background:darken($color-armor-phasma, 5%);
		border-radius: 50% 0 50% 0;
		border-right:4px solid darken($color-armor-phasma, 50%);
		border-bottom: 4px solid darken($color-armor-phasma, 50%);
	}
	
	.helmet {
		position: absolute;
		top:40px;
		left:50%;
		transform: translateX(-50%);
		width:65px;
		height:60px;
		background: $color-armor-phasma;
		border-radius: 50% 50% 0 0;
		z-index: 15;
	}
	
	.helmet-stripe-holder {
		position: absolute;
		width:100%;
		height:100%;
		overflow: hidden;
		border-radius: 50%;
		z-index: 10;
	}
	
	.helmet-stripe {
		position: absolute;
		top:0;
		left:50%;
		transform: translateX(-50%);
		width:30px;
		height:32px;
		background: darken($color-armor-phasma, 5%);
		border-left: 4px solid darken($color-armor-phasma, 3%);
		border-right: 4px solid darken($color-armor-phasma, 3%);		
	}
	
	.chin {
		position: absolute;
		top:86px;
		left:50%;
		transform: translateX(-50%);
		width:70px;
		height:30px;
		z-index: 14;
	}
	
	.chin:before {
		content:"";
		position: absolute;
		left:-5px;
		top:0;
		width:100%;
		height:100%;
		transform: rotate(-10deg);
		background:$color-armor-phasma;
		border-radius: 10px;
	}
	
	.chin:after {
		content:"";
		position: absolute;
		right:-5px;
		top:0;
		width:100%;
		height:100%;
		transform: rotate(10deg);
		background:$color-armor-phasma;
		border-radius: 10px;
	}

	.eyes {
		position: absolute;
		background: $color-visor-phasma;
		height:10px;
		width:46px;
		top:30px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 10px;
	}
	
	.eyes:before {
		content:"";
		position: absolute;
		left:-2px;
		top:0;
		height:18px;
		width:25px;
		border-radius: 10px 0 100% 50%;
		background:$color-visor-phasma;
	}
	
	.eyes:after {
		content:"";
		position: absolute;
		right:-2px;
		top:0;
		height:18px;
		width:25px;
		border-radius: 0 10px 50% 100%;
		background:$color-visor-phasma;
	}
	
	.brow {
		position: absolute;
		top:28px;
		left:50%;
		transform: translateX(-50%);
		width:50px;
		height:5px;
		border-radius: 50%;
		background:$color-armor-phasma;
	}
	
	.mouth {
		position: absolute;
		top:47px;
		left:50%;
		transform: translateX(-50%);
		width:50px;
		height:22px;
		
	}
	
	.mouth:before {
		content:"";
		position: absolute;
		left:-2px;
		top:0;
		width:100%;
		height:100%;
		background:$color-visor-phasma;
		transform: rotate(-10deg);
		border-radius: 10px;
	}
	
	.mouth:after {
		content:"";
		position: absolute;
		right:-2px;
		top:0;
		width:100%;
		height:100%;
		background:$color-visor-phasma;
		transform: rotate(10deg);
		border-radius: 10px;
	}
	
	
	.mouth-plate {
		position: absolute;
		top:-1px;
		left:50%;
		transform: translateX(-50%);
		width:36px;
		height:18px;
		z-index: 11;
	}
	
	.mouth-plate:before {
		content:"";
		position: absolute;
		left:-2px;
		top:0;
		width:100%;
		height:100%;
		background:$color-armor-phasma;
		transform: rotate(-10deg);
		border-radius: 10px;
	}
	
	.mouth-plate:after {
		content:"";
		position: absolute;
		right:-2px;
		top:0;
		width:100%;
		height:100%;
		background:$color-armor-phasma;
		transform: rotate(10deg);
		border-radius: 10px;
	}
	
}

/* Emo Vader */

$color-clothes-kylo: #4d4d4d;
$color-hood-kylo: #191919;
$color-mask-kylo: #bbbbbb;

#kylo {
		
	.body {
		position: absolute;
		width:80px;
		height:150px;
		background:$color-clothes-kylo;
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px 40px 0 0;
		overflow: hidden;
	}
	
	.hood {
		position: absolute;
		background: $color-hood-kylo;
		top:45px;
		left:50%;
		transform: translateX(-50%);
		width:70px;
		height:80px;	
		border-radius: 200px 200px 30px 30px
	}
	
	.hood:before {
		content:"";
		position: absolute;
		width:80px;
		height:50px;
		border-radius: 50%;
		background:$color-hood-kylo;
		top:30px;
		left:-25px;
		transform: rotate(-70deg);
	}
	
	.hood:after {
		content:"";
		position: absolute;
		width:80px;
		height:50px;
		border-radius: 50%;
		background:$color-hood-kylo;
		top:30px;
		right:-25px;
		transform: rotate(70deg);
	}
	
	.hood-bottom {
		position: absolute;
		bottom:-12px;
		left:50%;
		transform: translateX(-50%);
		width:100%;
		height:20px;
		background:$color-hood-kylo;
		border-radius: 10px;
	}
	
	.cloak-front {
		position: absolute;
		width:100px;
		height:30px;
		background: darken($color-clothes-kylo, 15%);
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 50%;
	}
	
	.cloak {
		position: absolute;
		width:120px;
		height:150px;
		background:darken($color-clothes-kylo, 10%);
		top:130px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 40px 40px 0 0;
		overflow: hidden;
	}
	
	.mask {
		background:transparent;
		position: absolute;
		top:70px;
		left:50%;
		transform: translateX(-50%);
		width:60px;
		height:60px;
	}
	
	.mask-breather {
		position: absolute;
		top:30px;
		left:50%;
		transform: translateX(-50%);
		width:48px;
		height:30px;
		background:#333;
		z-index: 1;
		border-radius: 0px 0px 100px 100px;
	}
	
	.mask-breather:before {
		content:"";
		position: absolute;
		left:0;
		bottom:100%;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 24px 10px 24px;
		border-color: transparent transparent #333 transparent;
	}
	
	
	.mask-1 {
		position: absolute;
		width:60px;
		height:40px;
		background:$color-mask-kylo;
		top:0;
		left:0;
		border-radius: 50% 50% 100% 100%;
	}
	
	.mask-2 {
		position: absolute;
		width:54px;
		height:40px;
		background:$color-mask-kylo;
		border-top:2px solid $color-hood-kylo;
		border-left:2px solid $color-hood-kylo;		
		border-right:2px solid $color-hood-kylo;		
		top:3px;
		left:3px;
		border-radius: 50% 50% 100% 100%;
	}
	
	.eyes {
		position: absolute;
		width:40px;
		height:10px;
		border-radius: 10px;
		background: $color-hood-kylo;
		top:12px;
		left:50%;
		transform: translateX(-50%);
	}
	
	.eyes:before {
		content: "";
		position: absolute;
		left:0;
		top:0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 1px 20px 0 20px;
		border-color: $color-mask-kylo transparent transparent transparent;
	}
	
	.lightsaber {
		position: absolute;
		bottom:-40px;
		right:33%;
		width:10px;
		height:0;
		background: #e53935;
		z-index: 10;
		border-radius: 50% 50% 0 0;
		transform: rotate(-30deg);
		animation-name: saber;
		animation-duration: 6s; 
		animation-timing-function: linear; 
		animation-delay: 1s;
		animation-direction: normal;
		animation-iteration-count: infinite;
		transform-origin: left bottom;
	}
	
	.hilt {
		position: absolute;
		bottom:-40px;
		right:33%;
		width:10px;
		height:55px;
		background: #aaa;
		z-index: 10;
		border-radius: 0;
		transform: rotate(-30deg);
		transform-origin: left bottom;
	}
	
	.hilt:before {
		content: "";
		position: absolute;
		top:4px;
		left:50%;
		transform:  translateX(-50%);
		background:#aaa;
		height:7px;
		width:30px;
		z-index: 2;
	}
	.hilt:after {
		content: "";
		position: absolute;
		top:5px;
		left:50%;
		transform:  translateX(-50%);
		background:#e53935;
		height:5px;
		width:0;
		z-index: 1;
		border-radius: 40%;
		animation-name: crossguard;
		animation-duration: 6s; 
		animation-timing-function: linear; 
		animation-delay: 1s;
		animation-direction: normal;
		animation-iteration-count: infinite;
		transform-origin: left bottom;
	}
	
	@keyframes saber {
		0% {height: 0;}
		5% {height: 200px;}
		55% {height: 200px;}
		60% {height: 0;}
		100% {height:0;}
	}
	
	@keyframes crossguard {
		0% {width: 0;}
		5% {width: 66px;}
		55% {width: 66px;}
		60% {width: 0;}
		100% {width:0;}
	}
	
}

/* Hux */

$color-skin-hux: #EFD5BD;
$color-hair-hux: #E8673F;
$color-clothes-hux: #191919;

#hux {
		
	.body {
		position: absolute;
		width:100px;
		height:150px;
		background:$color-clothes-hux;
		top:135px;
		left:50%;
		transform: translateX(-50%);
		border-radius: 30px;
		z-index: 1;
		overflow: hidden;
	}
	
	.body:after {
		content:"";
		position: absolute;
		bottom:0;
		left:50%;
		transform: translateX(-50%);
		height:100%;
		width:4px;
		background: lighten($color-clothes-hux, 10%);
	}
	
	.patch {
		position: absolute;
		left:100%;
		transform: translateX(-10px);
		top:20px;
		width: 20px; 
		height: 11.55px;
		background-color: #ccc;
		margin: 5.77px 0;
	}
	
	.patch:before,
	.patch:after {
		content: "";
		position: absolute;
		width: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
	}
	
	.patch:before {
		bottom: 100%;
		border-bottom: 5.77px solid #ccc;
	}
	
	.patch:after {
		top: 100%;
		width: 0;
		border-top: 5.77px solid #ccc;
	}
	
	.hair {
		position: absolute;
		width:80px;
		height:80px;
		left:50%;
		transform: translateX(-50%);
		top:45px;
		background:$color-hair-hux;
		border-radius: 50%;
	}
	
	.hair-under {
		position: absolute;
		width:100%;
		height:20px;
		right:-12px;
		top:0;
		border-radius: 50%;
		background: $color-hair-hux;
	}
	
	.hair-under:before {
		content:"";
		position: absolute;
		width:100%;
		height:40px;
		background: $color-skin-hux;
		border-radius:50%;
		top:10px;
		right:10px;
	}
	
	.pouf {
		position: absolute;
		width:44px;
		height:25px;
		border-radius: 100% 100px;
		left:60px;
		top:46px;
		background: lighten($color-hair-hux, 2%);
		z-index: 3;
		transform: rotate(-45deg);
	}
	
	.pouf:after {
		content:"";
		position: absolute;
		left: 44px;
		width: 5px;
		height: 34px;
		background: $color-hair-hux;
		top: 15px;
		transform: rotate(-20deg);
	}
	
	.face {
		position: absolute;
		width:80px;
		height:80px;
		background:$color-skin-hux;
		border-radius:50%;
		top:50px;
		left:50%;
		transform: translateX(-50%);
		z-index: 3;
		overflow: hidden;
	}
	
	
	.ear {
		position: absolute;
		background:$color-skin-hux;
		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-hux, 10%);
		border-radius: 100%;
	}
	
	.neck {
		position: absolute;
		z-index: 2;
		width:40px;
		height:50px;
		left:50%;
		transform: translateX(-50%);
		top:90px;
		background:$color-clothes-hux;
		overflow: hidden;
	}
	
	.neck:before {
		content:"";
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		top:13px;
		width:60px;
		height:30px;
		background: darken($color-skin-hux, 10%);
		border-radius: 50%;		
	}
	
	.eyes {
		position: absolute;
		top:32px;
		width:10px;
		height:8px;
		background: #424b54;
		border-radius: 0 3px 50% 50%;
		left:25%;
		transform: translateX(-50%);
	}
	
	.eyes:after {
		content:"";
		position: absolute;
		width:10px;
		height:8px;
		background: #424b54;
		top:0;
		border-radius: 3px 0 50% 50%;
		right:-40px;
	}
	
	.nose {
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		width:8px;
		height:14px;
		background:darken($color-skin-hux, 10%);
		top:31px;
		border-radius: 4px;
	}
	
	.mouth {
		position: absolute;
		background: #424b54;
		width:30px;
		height:4px;
		border-radius: 5px 5px 0 0;
		top:55px;
		left:50%;
		transform: translateX(-50%);
	}	
	
}