/* Светофор на css анимациях */
.light {
	width: 200px;
	height: 450;

	background-color: #000;
	}

	.circle {
		width: 150px;
		height: 150px;
		margin: auto;

		border-radius: 150px;
		background-color: grey;
		}

		.red { animation: red 4.5s infinite; }
		.orange { animation: orange 4.5s infinite; }
		.green { animation: green 4.5s infinite; }

	@keyframes red {
		0% {
			background-color: red;
		}

		22.2%{
			background-color: red;
		}

		33.3% {
			background-color: grey;
		}
		88.8%{
			background-color: grey;
		}
		100%{
			background-color: red;
		}

	}

	@keyframes orange {
		0%{
			background-color: grey;
		}
		22.2% {
			background-color: grey;
		}
		33.3% {
			background-color: orange;
		}
		55.5% {
			background-color: orange;
		}
		66.6% {
		background-color: grey;
		}
	}


	@keyframes green {
		0% {
		background-color: grey;
		}
		55.5% {
		background-color: grey;
		}
		66.6% {
			background-color: green;
		}
		88.8% {			background-color: green;
		}

		100% {
			background-color: grey;
		}
	}