* {
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
}
.orbit {
	float: left;
	width: 800px;
	/*min-width: 60vw;*/
	min-height: 60vh;
}
.orbit-icon {
	display: block;
}
.orbit-wrap {
}
.orbit-wrap > li {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
/*.orbit-wrap > li:hover ul {
	border-width: 2px;
	border-color: #fff;
}
.orbit-wrap > li:hover ~ li ul {
	border-color: rgba(255, 255, 255, 0.2);
}
.orbit-wrap > li:hover ~ li ul li {
	opacity: 0.4;
}*/
ul[class^=ring] {
	transition: all 300ms ease-in-out;
}
ul[class^=ring] li {
	transition: all 300ms ease-in-out;
}
ul[class^=ring] li a div {
	transition: all 300ms ease-in-out;
}
.ring-0 {
	width: 25em;
	height: 25em;
	-webkit-animation: counterClockwiseRotate 18s linear infinite;
	animation: counterClockwiseRotate 18s linear infinite;
}
.ring-0 i {
	-webkit-animation: counterClockwiseRotate 35s linear infinite;
	animation: counterClockwiseRotate 35s linear infinite;
}
.ring-0 > *:nth-of-type(1) {
	-webkit-transform: rotate(-9.9deg) translate(200px) rotate(9.9deg);
	transform: rotate(-9.9deg) translate(200px) rotate(9.9deg);
}
.ring-1 {
	width: 20em;
	height: 20em;
	-webkit-animation: counterClockwiseRotate 15s linear infinite;
	animation: counterClockwiseRotate 15s linear infinite;
}
.ring-1 i {
	-webkit-animation: clockwiseRotate 15s linear infinite;
	animation: clockwiseRotate 15s linear infinite;
}
.ring-1 > *:nth-of-type(1) {
	-webkit-transform: rotate(188.5deg) translate(240px) rotate(-188.5deg);
	transform: rotate(188.5deg) translate(240px) rotate(-188.5deg);
}
.ring-2 {
	width: 15em;
	height: 15em;
	-webkit-animation: clockwiseRotate 12s linear infinite;
	animation: clockwiseRotate 12s linear infinite;
}
.ring-2 i {
	-webkit-animation: counterClockwiseRotate 12s linear infinite;
	animation: counterClockwiseRotate 12s linear infinite;
}
.ring-2 > *:nth-of-type(1) {
	-webkit-transform: rotate(-15.5deg) translate(130px) rotate(15.5deg);
	transform: rotate(-15.5deg) translate(130px) rotate(15.5deg);
}
.ring-3 {
	width: 10em;
	height: 10em;
	-webkit-animation: clockwiseRotate 20s linear infinite;
	animation: clockwiseRotate 20s linear infinite;
}
.ring-3 i {
	-webkit-animation: counterClockwiseRotate 20s linear infinite;
	animation: counterClockwiseRotate 20s linear infinite;
}
.ring-3 > *:nth-of-type(1) {
	-webkit-transform: rotate(-7deg) translate(275px) rotate(7deg);
	transform: rotate(-7deg) translate(275px) rotate(7deg);
}
.ring-4 {
	width: 2em;
	height: 2em;
	-webkit-animation: clockwiseRotate 8s linear infinite;
	animation: clockwiseRotate 8s linear infinite;
}
.ring-4 i {
	-webkit-animation: counterClockwiseRotate 8s linear infinite;
	animation: counterClockwiseRotate 8s linear infinite;
}
.ring-4 > *:nth-of-type(1) {
	-webkit-transform: rotate(189.6deg) translate(10.6em) rotate(-189.6deg);
	transform: rotate(191.6deg) translate(10.6em) rotate(-191.6deg);
}
.ring-5 {
	width: 2em;
	height: 2em;
	-webkit-animation: counterClockwiseRotate 30s linear infinite;
	animation: counterClockwiseRotate 30s linear infinite;
}
.ring-5 i {
	-webkit-animation: clockwiseRotate 30s linear infinite;
	animation: clockwiseRotate 30s linear infinite;
}
.ring-5 > *:nth-of-type(1) {
	-webkit-transform: rotate(-8deg) translate(255px) rotate(8deg);
	transform: rotate(-8deg) translate(255px) rotate(8deg);
}
.ring-6 {
	width: 2em;
	height: 2em;
	-webkit-animation: clockwiseRotate 25s linear infinite;
	animation: clockwiseRotate 25s linear infinite;
}
.ring-6 i {
	-webkit-animation: counterClockwiseRotate 25s linear infinite;
	animation: counterClockwiseRotate 25s linear infinite;
}
.ring-6 > *:nth-of-type(1) {
	-webkit-transform: rotate(187deg) translate(290px) rotate(-187deg);
	transform: rotate(187deg) translate(290px) rotate(-187deg);
}
.ring-7 {
	width: 2em;
	height: 2em;
	-webkit-animation: counterClockwiseRotate 11s linear infinite;
	animation: counterClockwiseRotate 11s linear infinite;
}
.ring-7 i {
	-webkit-animation: clockwiseRotate 11s linear infinite;
	animation: clockwiseRotate 11s linear infinite;
}
.ring-7 > *:nth-of-type(1) {
	-webkit-transform: rotate(189.4deg) translate(200px) rotate(-189.4deg);
	transform: rotate(189.4deg) translate(200px) rotate(-189.4deg);
}
/*ul[class^=ring] {
	border: solid 1px rgba(33, 150, 243, 0.8);
	position: relative;
	padding: 0;
	border-radius: 50%;
	list-style: none;
	box-sizing: content-box;
}*/
ul[class^=ring] li {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.6em;
	height: 1.6em;
	margin: -0.8em;
}
/*
  center;
*/
.orbit-center {
	width: 201px;
	height: 201px;
	background-image: url(/images/planet/logo.png);
}
.orbit-center:hover .orbit-center__icon {
	-webkit-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
}
.orbit-center__icon {
	-webkit-transform: rotateZ(-360deg);
	transform: rotateZ(-360deg);
	transition: all 300ms ease-in-out;
}
.orbit-wrap > li.orbit-center:hover ~ li > ul {
	width: 0;
	height: 0;
}
.orbit-wrap > li.orbit-center:hover ~ li > ul * {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.orbit-wrap > li.orbit-center:hover ~ li > ul > li > a > div {
	width: 0;
	height: 0;
}

/* 
animations 
*/
@-webkit-keyframes clockwiseRotate {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@keyframes clockwiseRotate {
 from {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@-webkit-keyframes counterClockwiseRotate {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(-360deg);
 transform: rotate(-360deg);
}
}
@keyframes counterClockwiseRotate {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(-360deg);
 transform: rotate(-360deg);
}
}
/* 
icons 
*/
.avtogumi {
	background-color: transparent;
	background-image: url(/images/planet/avtogumi.svg);
	width: 92px;
	height: 92px;
	z-index:-100;
}
.line-avtogumi {
	width: 111px; 
	height: 1px; 
	background-color: #999999; 	
	margin-top: 45px;
	margin-left: -110px;
	transform: rotate(0deg);
	position: absolute;
}
.line-avtogumi:before {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-left: 111px;
	margin-top: -2px;
}
.line-avtogumi:after {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-top: -5px;
	margin-left: -5px;
	opacity: 0.5;
}
.ultralux {
	background-color: transparent;
	background-image: url(/images/planet/ultralux.svg);
	width: 92px;
	height: 92px;
}
.line-ultralux {
	width: 113px; 
	height: 1px; 
	background-color: #999999; 	
	margin-top: 46px;
	margin-left: 92px;
	transform: rotate(180deg);
	position: absolute;
}
.line-ultralux:before {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-left: 113px;
	margin-top: -2px;
}
.line-ultralux:after {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-top: -5px;
	margin-left: -5px;
	opacity: 0.5;
}
.recaro {
	background-color: transparent;
	background-image: url(/images/planet/recaro.svg);
	width: 92px;
	height: 92px;
}
.line-recaro {
	width: 44px; 
	height: 1px; 
	background-color: #999999; 	
	margin-top: 45px;
	margin-left: -39px;
	transform: rotate(0deg);
	position: absolute;
}
.line-recaro:before {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
 	display: block;
	margin-left: 40px;
	margin-top: -2px;
}
.line-recaro:after {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-top: -5px;
	margin-left: -5px;
	opacity: 0.5;
}
.furniture {
	background-color: transparent;
	background-image: url(/images/planet/furniture.svg);
	width: 92px;
	height: 92px;
}
.line-furniture {
	width: 208px; 
	height: 1px; 
	background-color: #999999; 	
	margin-top: 45px;
	margin-left: -207px;
	transform: rotate(0deg);
	position: absolute;
}
.line-furniture:before {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
 	display: block;
	margin-left: 208px;
	margin-top: -2px;
}
.line-furniture:after {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-top: -5px;
	margin-left: -5px;
	opacity: 0.5;
}
.coffee {
	background-color: transparent;
	background-image: url(/images/planet/coffee.svg);
	width: 92px;
	height: 92px;
}
.line-coffee {
	width: 48px; 
	height: 1px; 
	background-color: #999999; 	
	margin-top: 46px;
	margin-left: 92px;
	transform: rotate(180deg);
	position: absolute;
	z-index:-1000;
}
.line-coffee:before {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
 	display: block;
	margin-left: 48px;
	margin-top: -2px;
}
.line-coffee:after {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-top: -5px;
	margin-left: -5px;
	opacity: 0.5;
}
.tv {
	background-color: transparent;
	background-image: url(/images/planet/tv.svg);
	width: 92px;
	height: 92px;
}
.line-tv {
	width: 219px; 
	height: 1px; 
	background-color: #999999; 	
	margin-top: 46px;
	margin-left: -219px;
	transform: rotate(0deg);
	position: absolute;
}
.line-tv:before {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
 	display: block;
	margin-left: 219px;
	margin-top: -2px;
}
.line-tv:after {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-top: -5px;
	margin-left: -5px;
	opacity: 0.5;
}
.seven {
	background-color: transparent;
	background-image: url(/images/planet/seven.svg);
	width: 92px;
	height: 92px;
}
.line-seven {
	width: 170px; 
	height: 1px; 
	background-color: #999999; 	
	margin-top: 46px;
	margin-left: 88px;
	transform: rotate(180deg);
	position: absolute;
}
.line-seven:before {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-left: 166px;
	margin-top: -2px;
}
.line-seven:after {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-top: -5px;
	margin-left: -5px;
	opacity: 0.5;
}
.proekt {
	background-color: transparent;
	background-image: url(/images/planet/proekt.svg);
	width: 92px;
	height: 92px;
}
.line-proekt {
	width: 90px; 
	height: 1px; 
	background-color: #999999; 	
	margin-top: 46px;
	margin-left: 88px;
	transform: rotate(180deg);
	position: absolute;
}
.line-proekt:before {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-left: 87px;
	margin-top: -2px;
}
.line-proekt:after {
	content: '';
	height: 5px;
	width: 5px;
	background-color: #fff;
	border-radius: 50%;
	display: block;
	margin-top: -5px;
	margin-left: -5px;
	opacity: 0.5;
}
.animate-pause {
	-webkit-animation-play-state: paused;
	animation-play-state: paused!important;
}
.animate-run {
	animation-play-state: running;
}


/*********************CLOCK*********************/
.clock {
    position: relative;
    width: 90px;
    height: 90px;
    background-image: url('/images/clock/clockFace.png');
	/*background-size: 70px 70px;*/
}

.clock div {
    position: absolute;
    width: 90px;
    height: 90px;
}

/*.hour img, .minute img, .second img  {
    width: 80px;
    height: 80px;
}*/

/* The magic */
.clock img[src*='second'] {
    -webkit-transition: -webkit-transform 600000s linear;
    -moz-transition: -moz-transform 600000s linear;
    -o-transition: -o-transform 600000s linear;
    -ms-transition: -ms-transform 600000s linear;
    transition: transform 600000s linear;
}

.clock:target img[src*='second'] {
    -webkit-transform: rotate(3600000deg);
    -moz-transform: rotate(3600000deg);
    -o-transform: rotate(3600000deg);
    -ms-transform: rotate(3600000deg);
    transform: rotate(3600000deg);
}

.clock img[src*='minute'] {
    -webkit-transition: -webkit-transform 360000s linear;
    -moz-transition: -moz-transform 360000s linear;
    -o-transition: -o-transform 360000s linear;
    -ms-transition: -ms-transform 360000s linear;
    transition: transform 360000s linear;
}

.clock:target img[src*='minute'] {
    -webkit-transform: rotate(36000deg);
    -moz-transform: rotate(36000deg);
    -o-transform: rotate(36000deg);
    -ms-transform: rotate(36000deg);
    transform: rotate(36000deg);
}

.clock img[src*='hour'] {
    -webkit-transition: -webkit-transform 216000s linear;
    -moz-transition: -moz-transform 216000s linear;
    -o-transition: -o-transform 216000s linear;
    -ms-transition: -ms-transform 216000s linear;
    transition: transform 216000s linear;
}

.clock:target img[src*='hour'] {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

.town-over { float:left; margin-left:100px; margin-top:20px; color:#868686; font-size:13px; }
.town { margin-top: 10px; }
.town, .digital { float: left; width: 90px; }
.country { display:none; padding-top:5px; }
.bad { display:none; }
.over-clock { width:100%; height:auto; padding:0; }
.over-clock-single { width:90px; display:inline-block; margin-right: 33px; }
.over-clock-single:last-child { margin-right: 0; }
.town-over { float:left; margin:0; }
.analogue { float:left; }
.town, .digital { float:none; width:auto; }
.bad { display:block; clear:both; }
#main { display:flex; flex-direction: column-reverse; text-align:center; }