/* start hexagon */
.hexagon {
	width: 30px;
	height: 30px;
	position: relative;
	margin: 8px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	background: transparent;
}

.hexagon .background {
	width: 100%!important;
	height: 55.56%!important;
	background: #19A802;
	position: relative;
}

.additional .background {
    background: #19A802;
}

.hexagon .background:before,
.hexagon .background:after {
	content: '';
	position: absolute;
	width: 100%!important;
	height: 100%!important;
	background: #19A802;
	top: 0;
	left: 0;
}

.hexagon .background:before {
	transform: rotate(60deg);
}

.hexagon .background:after {
	transform: rotate(-60deg);
}

.additional.blue .background ,
.hexagon.blue .background {
	background: #0057FF;
}

.hexagon.blue .background:before,
.hexagon.blue .background:after ,
.additional.blue .background:before,
.additional.blue .background:after {
	background: #0057FF;
}

.hexagon.red .background ,
.additional.red .background {
	background: #FF0000;
}

.hexagon.red .background:before,
.hexagon.red .background:after ,
.hexadditionalagon.red .background:before,
.additional.red .background:after {
	background: #FF0000;
}

.hexagon.expired .background ,
.additional.expired .background {
	background: #6c0d0d;
}

.hexagon.expired .background:before,
.hexagon.expired .background:after ,
.hexadditionalagon.expired .background:before,
.additional.expired .background:after {
	background: #6c0d0d;
}

.hexagon.focus .background ,
.additional.focus .background {
	border-left: 2px #E0AA3E solid;
	border-right: 2px #E0AA3E solid;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.hexagon.focus .background:before,
.hexagon.focus .background:after ,
.additional.focus .background:before,
.additional.focus .background:after {
	border-left: 2px #E0AA3E solid;
	border-right: 2px #E0AA3E solid;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/* end hexagon */

/* start octagon */
.octagon {
	width: 30px;
	height: 30px;
	position: relative;
	margin: 8px;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	background: transparent;
}

.octagon .background {
	width: 100%!important;
	height: 100%!important;
	position: relative;
	background-color: #19A802;
	clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
	-moz-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.octagon.red .background {
	background: #FF0000;
}

.octagon.expired .background {
	background: #6c0d0d;
}

.octagon.blue .background {
	background: #0057FF;
}

.octagon.focus .background {
	border: 2px #E0AA3E solid;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/* end octagon */

main .hexagon,
main .octagon {
	position: absolute;
	text-align: center;
	color: #fff;
	align-items: center;
	justify-content: center;
}

main .hexagon .background {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 22.22%;
}

main .octagon .background {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
}

/* animation */
@keyframes focusBlinker {
	/* from {
		background: #19A802;
		transition: all 0.4s;
	}
	to {
		background: #E0AA3E;
		transition: all 0.4s;
	} */
    from,
    to {
		background: #19A802;
    }
    25%,
    75% {
		background: #E0AA3E;
    }
    50% {
		background: #E0AA3E;
    }
}
@keyframes focusBlinkerRed {
	/* from {
		background: #FF0000;
		transition: all 0.4s;
	}
	to {
		background: #E0AA3E;
		transition: all 0.4s;
	} */
    from,
    to {
		background: #FF0000;
    }
    25%,
    75% {
		background: #E0AA3E;
    }
    50% {
		background: #E0AA3E;
    }
}
@keyframes focusBlinkerBlue {
	/* from {
		background: #0057FF;
		transition: all 0.4s;
	}
	to {
		background: #E0AA3E;
		transition: all 0.4s;
	} */
    from,
    to {
		background: #0057FF;
    }
    25%,
    75% {
		background: #E0AA3E;
    }
    50% {
		background: #E0AA3E;
    }
}

#restoran-map .red.focus .background,
#restoran-map .blue.focus .background,
#restoran-map .focus .background,
#restoran-map .focus .background::after,
#restoran-map .focus .background::before,
.hexagon.focus .background,
.hexagon.focus .background::before,
.hexagon.focus .background::after {
	animation: focusBlinker 1s infinite ease-in-out;
	/* animation-name: focusBlinker;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(1.0,0,0.5,1.0);
	animation-duration: 0.8s; */
}
#restoran-map .red.focus .background,
#restoran-map .red.focus .background::after,
#restoran-map .red.focus .background::before,
.hexagon.red.focus .background,
.hexagon.red.focus .background::before,
.hexagon.red.focus .background::after {
	animation: focusBlinkerRed 1s infinite ease-in-out;
	/* animation-name: focusBlinkerRed; */
}
#restoran-map .blue.focus .background,
#restoran-map .blue.focus .background::after,
#restoran-map .blue.focus .background::before,
.hexagon.blue.focus .background,
.hexagon.blue.focus .background::before,
.hexagon.blue.focus .background::after {
	animation: focusBlinkerBlue 1s infinite ease-in-out;
	/* animation-name: focusBlinkerBlue; */
}
/* end animation */