@charset "utf-8";

/* REP MAP */
	.rep-map {
		display: grid;
		grid-gap: 2rem;
		}
	.rep-map-map g {
		cursor: pointer;
		}
	.rep-map-headers.header-main {
		margin-top: 0;
		}
	.rep-map-reps {
		display: grid;
		grid-gap: 1rem;
		margin-top: var(--mywp-mg-gap);
		}
	.rep-map-item {
		background-color: var(--mywp-white);
		border-bottom: 0.2rem solid transparent;
		border-radius: var(--mywp-radius);
		font-size: 2rem;
		text-align: center;
		transition: all 250ms ease;
		transition-property: background, color;
		}
	.rep-map-item.rep-map-item-image-yes {
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: 8rem 1fr;
		text-align: left;
		}
	.rep-map-item.rep-map-item-image-yes {
		align-items: center;
		display: grid;
		grid-gap: 0;
		grid-template-columns: 8rem 1fr;
		text-align: left;
		}
	.rep-map-image {
		padding: 1rem;
		}
	.rep-map-image-holder {
		border-radius: var(--mywp-radius);
		overflow: hidden;
		}
	.rep-map-img {
		transition: transform 250ms ease;
		}
	.rep-map-item.hover .rep-map-img {
		transform: scale(1.2);
		}
	@media (hover: hover) and (pointer: coarse), (hover: hover) and (pointer: fine) {
		.rep-map-item:hover,
		.rep-map-item.hover,
		.rep-map-item:hover .highlight,
		.rep-map-item.hover .highlight,
		.rep-map-item:hover a,
		.rep-map-item.hover a {
			color: var(--mywp-white) !important;
			}
		.rep-map-item:hover a:hover,
		.rep-map-item.hover a:hover {
			opacity: 0.8;
			}
		.rep-map-item:hover .rep-map-img {
			transform: scale(1.2);
			}
	}
	.rep-map-info {
		padding: 1rem;
		}
	.rep-map-info > p {
		line-height: 1.2em;
		}
	.rep-map-info > p + p {
		margin-top: 0.2rem;
		}
	.rep-map-territory {
		font-size: 0.8em;
		font-style: italic;
		opacity: 0.8;
		}
	.rep-map-name {
		font-weight: 700;
		transition: color 250ms ease;
		}
	.rep-map-phone,
	.rep-map-email {
		font-size: 0.8em;
		}
	@media (min-width: 40em) {
		.rep-map-reps {
			grid-template-columns: 1fr 1fr;
			}
	}
	@media (min-width: 60em) {
		.rep-map.w {
			align-items: center;
			grid-gap: 4rem;
			grid-template-columns: 1fr 1fr;
			}
	}
	@media (min-width: 80em) {
		.rep-map.w {
			grid-gap: 8rem;
			}
	}
	@media (min-width: 100em) {
		.rep-map.w .rep-map-map {
			margin-left: -8rem;
			}
	}