
/*/ April 10 2017 /*/
.SS-items {
position : relative;
margin-top: 20px;
margin-bottom: 20px;
/*/ 
padding:15px;
border:1px solid #E8EEF3;
border-radius:5px;
/*/
}


.highlight {
fill:#09C;
border:1px solid rgba(0, 60, 128, 0.41);}

.SS-item {
position : relative; /* position : absolute; */
top:0;
left:0;
display :none;

/*text-align:center; removed for image map highlight*/
}
.SS-item img{
	 max-width: 100%;
	 /*margin:10px 5px; removed for coordianes */
}
.SS-items .SS-item figcaption {
background:#efefef;
padding:3px;
}
.SS-item:first-child {
display : block;
}


.SS-items .hotspots a{
display: block;
/*/border:1px solid rgba(0, 60, 128, 0.41);/*/
position: absolute;
border-radius: 5px;
}

.SS-items .hotspots a:hover{
  cursor: pointer;
  background-color: rgba(255,255,255,.19);
}
/*/ remove text from hotspot anchor link /*/
.SS-items .hotspots a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }


.my-svg-container{
 display: inline-block;
 position: relative;
 width: 100%;
 padding-bottom: 55%; /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
 height:auto;
 vertical-align: middle; /* top | middle | bottom ... do what you want */
}

.my-svg{ /* svg into : object, img or inline */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height:auto;
  width: 100%; /* only required for <img /> */
}



.SS-description{
padding: 0 15px;
width:100%;
text-align:left;
}
.controls {
margin : 10px 0;
}
.slidestatus{
display: inline-block;
padding-left: 10px;
font-size: 12px;
color: #8d8d8d;
}

/*
#controls li {
    display : inline-block;
    padding : 5px;
    border : 1px solid #ccc;
    background-color : #eee;
    cursor : pointer;
} 
*/

figcaption{margin:15px 5px;}

.a1{
	border: 1px solid #efefef;
	position:absolute;
	display:block;
	    opacity: 0.5;
}
.a1:hover{
background-color:#fff;
    opacity: 0.5;
	border-radius:5px;
}
