body {
  font-family:sans-serif;
  background: #BFB691;
}
#overlay {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:998!important;
  background-color:rgba(000,000,000, .95);
}
.popup {
   text-align:center;
	top:-100px;
  width:100px;
	left: 45%;
  margin-left: -150px;
	position: absolute;
	z-index: 999!important;
}
.container {
	width: 25vw;
	height: 5vh;
	transform: scale(0.33);
}
@keyframes move {
	0% {
		transform: rotateZ(50deg);
		opacity: 0.2;
	}
	50% {
		transform: rotateZ(120deg);
		opacity: 0.8;
	}
	from {
		transform: rotateZ(15deg);
		opacity: 1;
	}
}
/* position of each feather ---------------------------------- */
.feather1, .feather2, .feather3, .feather4, .feather5 {
	position: absolute;
	left: -5vmin;
	top: 0vmin;
	transform: rotate(-40deg);
	filter:drop-shadow(-1vmin 0vmin 5vmin rgba(70, 64, 39, 0.5)) ;
	animation: move 3000ms ease-in-out;
}
.middle-feather-line {
	position: absolute;
	top: 25vmin;
	left: 30vmin;
	height: 70vmin;
	width: 0.5vmin;
	background: linear-gradient(270deg, #9E9552 -1%, #433F22 105%);
	transform: rotate(55deg);
}
/* colofrul rounded part -------------------------- */
.blue-circle, .middle-circle {
	position: absolute;
	border-radius: 50%;
}
.blue-circle {
	position: absolute;
	top: 35vmin;
	left: 44vmin;
	width: 16vmin;
	height: 13vmin;
	background: radial-gradient(63.92% 63.92% at 51.46% 36.08%, #102E81 6.65%, #192654 27.14%, #23283C 50.62%, #067FBB 54.4%, #00838C 63.46%, #5AD1D1 93.99%, #074834 100%);
	transform: rotate(46.6deg);
}
.middle-circle {
	top: 20vmin;
	left: 40vmin;
	width: 40vmin;
	height: 33vmin;
	background: radial-gradient(74.24% 73.52% at 36.23% 52.27%, #D7C574 0.19%, #C09557 21.93%, #8A503B 39.7%, #53523A 41.19%, rgba(174, 208, 122, 0.8) 47.03%, rgba(11, 94, 18, 0.8) 49.35%, rgba(27, 38, 19, 0.5) 65%);
	transform: rotate(-23.6deg);
	box-shadow:
			-20vmin 6vmin 6vmin rgba(70, 64, 39, 0.4),
			-35vmin 8vmin 6vmin rgba(170,145,89, 0.3);
}
/* vertical lines on feather -------------------------------------- */
/* round base behind the colorful part -------------- */
.base-feather {
	position: absolute;
	top: 21vmin;
	left: 41vmin;
	width: 40vmin;
	height: 32vmin;
	border-radius: 50%;
	background: transparent;
		background-image: linear-gradient(-180deg, rgba(82, 75, 38, 0.4) 60.59%, #464027 16.94%);
	background-size: 1vmin 0.6vmin;
	transform: rotate(150deg);
	box-shadow: inset -2vmin 0.5vmin 0vmin rgba(70, 64, 39, 0.3),
							5vmin -1vmin 5vmin 0vmin rgba(70, 64, 39, 0.7);
}
/* feather strait lines around the main feather line,
::before is above the line and ::after below --------------------------------*/
.base-feather::before, .base-feather::after {
	content: '';
	position: absolute;
	top: 11vmin;
	left: 38vmin;
	height: 20vmin;
	width: 40vmin;
	background: transparent;
	background-image: linear-gradient(90.2deg, #464027 -0.08%, rgba(196, 196, 196, 0) 3.44%, rgba(112, 98, 57, 0) 15.15%, #464027 17.49%, rgba(112, 98, 57, 0) 17.5%, rgba(112, 98, 57, 0) 30.96%, #464027 33.89%, rgba(112, 98, 57, 0) 33.9%, rgba(112, 98, 57, 0) 58.49%, #464027 62.01%, rgba(112, 98, 57, 0) 62.02%, rgba(112, 98, 57, 0) 81.91%, #464027 81.92%, rgba(112, 98, 57, 0) 84.27%, rgba(112, 98, 57, 0) 95.98%, #464027 100.08%, rgba(112, 98, 57, 0) 105.94%);
	background-size: 6vmin;
	transform: skewX(-56deg) rotate(-8deg);
	box-shadow: -4vmin -2vmin 2vmin rgba(70, 64, 39, 0.9),
				inset 2vmin 1vmin 1vmin rgba(70, 64, 39, 0.9);
}
.base-feather::after {
	top: 0vmin;
	left: 30vmin;
	height: 10vmin;
	width: 50vmin;
	transform: skewX(60deg) rotate(-3deg);
	box-shadow: -8vmin 2vmin 2vmin rgba(70, 64, 39, 0.9),
			inset 0vmin -2vmin 2vmin rgba(70, 64, 39, 0.9);
}
/* rounded feather lines, added for more realistic look ----------------------- */
.line-feather-1, .line-feather-1::before, .line-feather-1::after,
.line-feather-2, .line-feather-2::before, .line-feather-2::after,
.line-feather-3, .line-feather-3::before, .line-feather-3::after {
	position: absolute;
	border-radius: 50%;
	background: transparent;
	box-shadow: 0.2vmin 0 0 0 rgba(70, 64, 39, 0.9);
	transform: rotate(20deg);
	height: 25vmin;
	width: 10vmin;
}
.line-feather-1 {
	top: 33vmin;
	left: 30vmin;
}
.line-feather-2 {
	top: 40vmin;
	left: 20vmin;
}
.line-feather-3 {
	top: 43vmin;
	left: 15vmin;
}
.line-feather-1::before, .line-feather-2::before, .line-feather-3::before {
		content: '';
		top: 15vmin;
		left: 10vmin;
		box-shadow: -0.2vmin -0.2vmin 0 0 rgba(70, 64, 39, 0.9);
		transform: rotate(80deg);
}
.line-feather-1::after, .line-feather-2::after, .line-feather-3::after {
	content: '';
	top: 8vmin;
	left: 16vmin;
	box-shadow: -0.2vmin -0.2vmin 0 0 rgba(70, 64, 39, 0.9);
	transform: rotate(80deg);
}