/* SVG */
.svg-icon {
	width: 100%;
	margin: 0 auto;
	padding-top: 10px;
}
.svg-small .svg-icon {
	width: 50%;
}
.svg-link {
	padding: 10px;
}
.svg-container {
	padding: 0;
	display: inline-block;
	position: relative;
	width: 100%;
	/* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
	vertical-align: middle;
	text-align: center;
	height: 0;
	padding-bottom: 43.5%;/* top | middle | bottom ... do what you want */
}
.svg-container.svg-west-hedges {	padding-bottom: 45%;} 
.svg-container.svg-west-freshman {
    padding-bottom: 45%;
}
.svg-container svg {
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}
.svg-container path, .svg-container polygon, .svg-container rect {
	display: table-cell;
}
.sm-transition {
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	/* ...and now for the proper property */
	transition: .5s;
}
.sm {
	display: table-cell;
	padding: 0;
	width: 100%;
	margin: 0 auto;
	position: relative;
	float: left;
	margin-bottom: 35px;
}
.sm p {
	clear: both;
	text-align: center;
}
.svg-container path, .svg-container polygon, .svg-container rect {
	cursor: default;
}

.hover-marker { display:none;}

.hover polygon, .hover path {   cursor:pointer;  } 
.hover polygon2 { fill: #003f7f; cursor:pointer; fill-opacity:0.7} 

.hover .hover-marker { display:block;}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
img[src*=".svg"] {
	width: 100%;
}
}
@supports (-ms-accelerator:true) {
 img[src*=".svg"] {
 width: 100%
}
}

/* hover over all campus buildings */

.fancybox-skin {
	padding: 0 !important;
	max-width: 800px;
}
.map-container {
	font-size: 1.1rem;
	line-height: 1.8rem;
}
.map-container .image {
	position: relative;
}
.map-container .heading {
	position: absolute;
	bottom: 0;
	background: rgba(23, 54, 105, 0.69);
	color: #fff;
	width: 100%;
	display: block;
	padding: 20px 35px;
}
.map-container .heading h1 {
	margin: 0;
	color: #fff;
	float: left; 
	padding-right: 15px;
	margin-right: 15px;
	font-weight: 300;
	font-size: 2rem;
}



.map-container .heading ul {
	color: #fff;
	/*float: left;*/
	margin-left: 0;
	padding-left: 0;
	margin-bottom: 0;
	padding-top: 3px;
}
.map-container .heading ul li {
	display: inline;
}
.map-container .heading ul li {
	list-style: none;
	display: inline;
}
.map-container .heading ul li:after {
	content: " \2022";
	padding: 5px;
}
.map-container .heading ul li:last-child:after {
	content: none;
}
.map-container .content {
	padding: 35px 25px;
}
.campus-building {
	padding: 0;
	margin: 0;
}

.campus-building li {
	cursor: pointer;
	border-right: 1px solid #ccc;
	padding: 0 8px;
	float: left;
	list-style:none;
}
.campus-building li:first-child {
	padding-left: 0;
}
.campus-building li:last-child {
	border-right: 0;
}
.campus-building li:hover {
	color: #1a80c9;
}
image.hover-img {
	display: none;
}
.hover-building polygon { cursor: pointer !important;}
.hover-building:hover image.hover-img {
	display: block;
}


.hover { color:#1a80c9 !important; }
li.hover { text-decoration:underline; } 

@media (max-width: 768px) {
.map-container .heading h1 { float:none; border-right:0; }
 
.map-container {
    font-size: 1rem; 
}
.map-container .content { padding: 20px 15px;}
}
@media (max-width: 480px) {
	.map-container .heading {
    position: relative;
    background: #3d5086;
}
.map-container .heading h1 { font-size: 2rem;}
.map-container .content { padding: 15px 35px;}
.campus-building { list-style: disc !important;}
.campus-building li { list-style:disc; display:list-item; float:none; padding:0; border-right:0;    margin-left: 25px;}
	}
	
	h2 {clear:both;}
	
	 
.photodiv img { padding: 20px 0;}
.fancybox-outer #de { display:none;}