/* Variables */
 @keyframes ferri-wheel {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(360deg);
	}
}
 @keyframes cabin {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(-360deg);
	}
}

@keyframes spin3 {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}


.spinning {
	animation: spin3 45s linear infinite;
}

 html {
	 font-size: 6px;
}
 @media (min-width: 768px) {
	 html {
		 font-size: 8px;
	}
}
 @media (min-width: 1025px) {
	 html {
		 font-size: 10px;
	}
}
 body {
	 margin: 0;
	 padding: 0;
}
/* Layout */
 .ferris-wrapper {
	 position: relative;
	 width: 58rem;
	 height: 75rem;
	 margin: 0 auto;
}
 .ferris-wrapper:hover {
	/* Pause animation on Hover */
}

 .cabin:hover{
	width: 8.5rem;
	transform: translateY(-10px);
}
/*   .ferris-wrapper:hover .wheel, .ferris-wrapper:hover .cabin, .ferris-wrapper:hover .spinning {
	 animation-play-state: paused;
} */
 .ferri-base {
	 position: absolute;
	 width: 100%;
	 height: 38rem;
	 z-index: 1;
	 bottom: 0;
	 left: 0;
}
 .ferri-base:before, .ferri-base:after {
	 content: "";
	 border: 0.1rem solid #4d4d4d;
	 background-color: #fff;
	 width: 1rem;
	 height: 100%;
	 position: absolute;
	 left: 50%;
	 bottom: -5%;
	 transform-origin: 0% 0%;
}
 .ferri-base:before {
	 transform: rotate(15deg) translate3d(-50%, 0, 0);
}
 .ferri-base:after {
	 transform: rotate(-15deg) translate3d(-50%, 0, 0);
}

 .wheel-wrapper {
	 width: 64rem;
	 height: 64rem;
	 position: absolute;
	 left: 50%;
	 top: 50%;
	 transform: translate3d(-50%, -50%, 0);
	 z-index: 3;
}
 .wheel {
	 position: absolute;
	 left: 0;
	 top: 0;
	 right: 0;
	 bottom: 0;
	 border: 1px solid #c46f3a;
	 border-radius: 50%;
	 animation: ferri-wheel 45s linear infinite;
	 border-style: dashed;
}
/* Cabin */
 .cabin {
	 width: 8rem;
	 height: 10rem;
	 position: absolute;
/* 	 border: 0.1rem solid;
	 background-color: #fff; */
	 transform-origin: 50% 0%;
	 text-align: center;
	 font-size: 2rem;
	 line-height: 10rem;
	 animation: cabin 45s linear infinite;
}
 .cabin:before {
	 content: "";
	 width: 1rem;
	 height: 1rem;
	 position: absolute;
	 left: 50%;
	 top: -1rem;
/* 	 border: 0.1rem solid #4d4d4d;
	 background-color: #fff; */
	 border-radius: 50%;
	 transform: translate3d(-50%, 0, 0);
}
 .cabin:nth-of-type(1) {
	 right: -1.5%;
     top: 67%;
}
 .cabin:nth-of-type(2) {
	 right: 17%;
	 top: 93.5%;
}
 .cabin:nth-of-type(3) {
	 right: 74%;
	 top: 93.5%;
}
 .cabin:nth-of-type(4) {
	 left: -4.5%;
	 top: 34%;
}
 .cabin:nth-of-type(5) {
	 left: 15%;
	 top: 11%;
}
 .cabin:nth-of-type(6) {
	 right: 17%;
	 top: 7%;
}
 .cabin:nth-of-type(7) {
	 right: -4%;
	 top: 36%;
}
 .cabin:nth-of-type(8) {
	 right: 43%;
	 top: 1%;
}
 .cabin:nth-of-type(9) {
	 right: 46%;
	 top: 100%;
}
 .cabin:nth-of-type(10) {
	 right: 92%;
	 top: 67%;
}
 .line {
	 position: absolute;
	 width: 50%;
	 height: 0.1rem;
	 left: 50%;
	 top: 50%;
	 background-color: #4d4d4d;
	 transform-origin: 0% 0%;
}
 .line:nth-of-type(2) {
	 transform: rotate(60deg);
}
 .line:nth-of-type(3) {
	 transform: rotate(120deg);
}
 .line:nth-of-type(4) {
	 transform: rotate(180deg);
}
 .line:nth-of-type(5) {
	 transform: rotate(240deg);
}
 .line:nth-of-type(6) {
	 transform: rotate(300deg);
}