/*	
 *	AMMPA Member Facility Map - Styles.
 *	
 *	©2018 - Peppermint Narwhal Creative, LLC
*/

#facility-listing-views .item-list ul.tab-nav li.tab{ width: auto; }
#facility-listing-views > .item-list{ border-bottom: 2px solid #969696; padding: 0 2%; margin: 0 0 0.5em; }

.facility-listing-view{ display: none; }
.facility-listing-view.active{ display: block; }

#facility-listing-map{  }

#facility-map-magnifier{
	display: none;
	position: absolute;
	z-index: 1;
}
#facility-map-magnifier .wrapper{
	width: 200px;
	height: 200px;
	border: 2px solid;
	border-radius: 50%;
	overflow: hidden;
	background: white;
}
#facility-map-magnifier img{ width: 100%; height: auto; margin-top: 12.5%; }
#facility-listing-views .pre-load-zoom{ position: absolute; top: 0; left: 0; z-index: -1; visibility: hidden; }

.facility-map-svg{ width: 100%; height: auto; }
.facility-map-svg .image-slice image{ overflow: visible; }
.facility-map-svg .image-slice.over{
	cursor: pointer;
	opacity: 0;	
	transition: all, 0.3s;
}
.facility-map-svg .image-slice.over:hover,
.facility-map-svg .image-slice.over.hover{ opacity: 1; }
body.mobile .facility-map-svg .image-slice.over{ display: none; }

#facility-listing-map .country-listing{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	padding: 3%;
	background-color: rgba(0,0,0,0.65);
	overflow-y: auto;
	text-align: center;
	border-width: 3px;
}
#facility-listing-map .country-listing .bg{ 
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	cursor: pointer;
}
#facility-listing-list .facility-listing{ padding: 0; }
#facility-listing-map .country-listing .facility-listing{
	padding: 0; 
	width: 620px;
	min-width: 360px;
	background: white;
	position: relative;
	z-index: 2;
	text-align: left;
	display: inline-block;
}
@media (max-width: 620px){
	#facility-listing-map .country-listing .facility-listing{ max-width: 96%; min-width: 0px; }
}
#facility-listing-map .country-listing .facility-listing .close{
	float: right;
	color: #969696;
	font-size: 1.5em;
	font-weight: bold;
	padding-right: 1em;
	cursor: pointer;
}

#facility-listing-map #facility-listing-map-view-all .country-listing{
	display: block;
	position: static;
	overflow: inherit;
	height: auto;
	padding: 0.5em 1em;
	background: none;
}
#facility-listing-map #facility-listing-map-view-all .country-listing .bg,
#facility-listing-map #facility-listing-map-view-all .country-listing .close{ display: none; }
#facility-listing-map #facility-listing-map-view-all .country-listing .facility-listing{ width: 100%; max-width: none; }

.member-level-listing + .member-level-listing{ margin-top: 1em; }

.facility-listing h3{
	margin: 0.5em 0;
	padding: 0 1em;
	font-size: 1.5em;
}
.facility-listing .country h4 {
	margin: 0;
  padding: 0.25em 2%;
  background: #A9A9A9;
  color: black;
}
.facility-listing .facility{ padding: 1em 2em; border-top: 1px solid #969696; }
.facility-listing .facility .facility-logo{ float: right; width: 25%; }
.facility-listing .facility .facility-logo img{ max-height: 150px; max-width: 100%; }
.facility-listing .facility .facility-logo + * + .contact-info .description{ width: 73%; }
.facility-listing .facility .facility-logo + * + .contact-info .value{ width: 42%; }
.facility-listing .facility h4,
.facility-listing .facility h5{ margin: 0; }
.facility-listing .contact-info .description{ padding-left: 5%; margin-bottom: 0.5em; }
.facility-listing .contact-info .website + .description{ clear: left; }
.facility-listing .contact-info label{ float: left; width: 31%; margin-right: 2%; text-align: right; }
.facility-listing .contact-info .value{ float: left; width: 66%; }

.member-level-listing.friends-of-the-alliance .contact-info .address,
.member-level-listing.friends-of-the-alliance .contact-info .website label{ display: none; }
.member-level-listing.friends-of-the-alliance .contact-info .website .value{ padding-left: 5%; }

html.stop-scrolling,
body.stop-scrolling{
	height: 100%;
	overflow: hidden;
	width: 100%;
}


@media (max-width: 620px){
	.facility-listing .facility{
		padding: 2%; 
		display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
		-webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	}
	
	.facility-listing .facility .facility-logo{
		-webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
		float: none;
		text-align: center;
		width: 100%;
		padding: 1em 0 0;
	}
	.facility-listing .facility .facility-logo + * + .contact-info .value{ width: 66%; }
	.facility-listing .facility .facility-logo + * + .contact-info .description{ width: auto }
}