/* ------------------------------------------------------------ *\
	Map
\* ------------------------------------------------------------ */

.interactive-map { margin: 50px 13%; position: relative; }
.interactive-map .label { max-width: 100px; font-weight: 500; font-size: 20px; line-height: 1; text-transform: uppercase; color: #000; position: absolute; z-index: 98; }
.interactive-map .svg-wrapper { position: relative; width: 100%; padding-bottom: 90%; }
.interactive-map .svg-wrapper svg { position: absolute; top: 0; left: 0; overflow: visible; }
.interactive-map .svg-wrapper path { fill: #00bff3; -webkit-transition: fill .3s; -o-transition: fill .3s; transition: fill .3s; }

.interactive-map .small-state { display: none; border: 2px solid #777; width: 80px; padding-bottom: 80px; position: absolute; right: -50px; bottom: -20px; }
.interactive-map .small-state:before { content: ''; width: 70px; height: 2px; background-color: #777; position: absolute; right: 101%; bottom: 100%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; }

@media (max-width: 767px) {
	.interactive-map .label { font-size: 14px; }
	.interactive-map .small-state { display: block; }

	.interactive-map .small-state #layer1 g:hover path { filter: none; }

	.label-5 { margin-top: 5px; margin-left: -125px; }
	.label-6 { margin-top: 35px; margin-left: -55px; }
}

@media (max-width: 639px) {
	.interactive-map { margin: 50px 30px; }
	.interactive-map .label { max-width: 90px; font-size: 12px; }

	.interactive-map .small-state { width: 70px; padding-bottom: 70px; right: -40px; bottom: -15px; }
}

@media (max-width: 479px) {
	.interactive-map .label { font-size: 10px; }

	.interactive-map { margin-bottom: 70px; }
	.interactive-map .small-state { width: 60px; padding-bottom: 60px; bottom: -30px; }

	.label-1 { margin-top: -20px; margin-left: -10px; }
	.label-2 { margin-top: -5px; }
	.label-5 { margin-top: 5px; margin-left: -75px; }
	.label-6 { margin-top: 25px; margin-left: -55px; }
	.label-8 { margin-top: 5px; margin-left: -5px; }
}