.e5-360-degree-container {
	min-width: 96px;
	max-width: 140px;
}

.e5-360-degree-top-container {
	display: flex;
	justify-content: center;
}

.e5-360-degree-circle {
	position: relative;
	width: 96px;
	height: 96px;
	border: 4px solid var(--primary-color);
	border-radius: 50%;
	color: var(--primary-color);
}

.e5-360-degree-inner-first.animated {
	animation: 2s rotate-first-inner-circle linear 1;
}

.e5-360-degree-inner-second.animated {
	animation: 2s rotate-second-inner-circle linear 1;
}

.e5-360-degree-inner-first {
	position: absolute;
	width: 44px;
	height: 88px; /* height of e5-360-degree-circle minus border-width of e5-360-degree-circle times 2 */
	border: 2px solid var(--primary-color);
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

.e5-360-degree-inner-second {
	position: absolute;
	width: 88px; /* width of e5-360-degree-circle minus border-width of e5-360-degree-circle times 2 */
	height: 44px;
	border: 2px solid var(--primary-color);
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

@keyframes rotate-first-inner-circle {
	0%  {width: 44px;}
	25% {width: 88px;}
	75% {width: 0px;}
	100% {width: 44px;}
}

@keyframes rotate-second-inner-circle {
	0%  {height: 44px;}
	25% {height: 0px;}
	75%  {height: 88px;}
	100% {height: 44px;}
}

@keyframes rotate-first-inner-circle-resp {
	0%  {width: 34px;}
	25% {width: 68px;}
	75% {width: 0px;}
	100% {width: 34px;}
}

@keyframes rotate-second-inner-circle-resp {
	0%  {height: 34px;}
	25% {height: 0px;}
	75%  {height: 68px;}
	100% {height: 34px;}
}

.e5-360-degree-inner-text {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.e5-360-degree-bottom-container {
	display: flex;
	flex-direction: row;
	margin-top: 16px;
	justify-content: center;
}

.e5-360-degree-arrow-container {
	margin-right: 16px;
	margin-left: -16px;
	min-width: 80px;
}

.e5-360-degree-arrow {
	transform: scaleX(-1) rotate(330deg);
	width: 80px;
	margin-top: -16px;
}

.e5-360-degree-text {
	margin-left: -8px;
}

@media screen and (max-width: 549px) {
	.e5-360-degree-container {
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (max-width: 1023px) {
	.e5-360-degree-container {
		min-width: 76px;
	}

	.e5-360-degree-circle {
		width: 76px;
		height: 76px;
	}

	.e5-360-degree-inner-first {
		width: 34px;
		height: 68px; /* height of e5-360-degree-circle minus border-width of e5-360-degree-circle times 2 */
	}

	.e5-360-degree-inner-second {
		width: 68px; /* width of e5-360-degree-circle minus border-width of e5-360-degree-circle times 2 */
		height: 34px;
	}

	.e5-360-degree-inner-text {
		font-size: 11px;
	}

	.e5-360-degree-arrow-container {
		min-width: 56px;
	}

	.e5-360-degree-arrow {
		width: 56px;
	}

	.e5-360-degree-inner-first.animated {
		animation: 2s rotate-first-inner-circle-resp linear 1;
	}

	.e5-360-degree-inner-second.animated {
		animation: 2s rotate-second-inner-circle-resp linear 1;
	}
}

@media screen and (min-width: 1024px) {
	.e5-360-degree-container {
		max-width: 180px;
	}
}

@media screen and (min-width: 550px) and (max-width: 600px) {
	.e5-360-degree-bottom-container {
		margin-right: 15px;
		margin-left: 15px;
	}
}