.bxFrameInfoOverlay {
position:absolute;
width:100%;
left:0px;
top:0px;
z-index:120;
display:none;

}
.bxFrameInfoOverlayInner {
position:relative;
background-color:#fff;
color:#000;
padding:20px;
width:80%;
margin:0 auto;
min-height:150px;
-webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);
box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2);

}
.bxFrameInfoOverlayClose {
position:absolute;
right:3rem;
top:1rem;
color:#000;
z-index:300;
}
.bxFrameInfoOverlayClose:hover, .bxFrameInfoOverlayClose:active, .bxFrameInfoOverlayClose:focus {

}
.bxFrameInfoOverlayContent {
text-align:left;  
}

.bxFrameAniTopicSelector {
	max-width:320px;
	/*margin-bottom:20px;
	margin-left:100px;*/
	position:relative;
	margin-top:-50px;
	z-index:100;
	float:right;
	right:60px;
	clear:after;
}

.bxFrameSubhead {
	background-color:#f4f4f4;
	padding:0.4rem;
	margin-bottom:0.4rem;
}

.bxFrameProdLink {
display:inline-block;
float:left;
color:#000;
background-color:#fff;
border:3px solid #ccc;
padding:1rem;
text-align:center;	
margin:0 1rem 1rem 0;
max-width:90%;
min-height:120px;
line-height:100%;
}
.bxFrameProdLinkSingle {

}
.bxFrameProdLink img {
	width:100%;
	height:auto;
	
}
.bxFrameProdLink span {
min-height:50px;
display:block;	
 hyphens: auto; 
 font-size:90%;
}

.bxFrameProdLink:hover, .bxFrameProdLink:active, .bxFrameProdLink:focus {
border-color:#990000;

}

 
#bxFrameAniimg {
width:100%;
min-width:320px;
height:auto;
}
  
  
.bxFrameAnihotspotsleft, .bxFrameAnihotspotsright {
position:absolute;
width:50px;
background-color:#fff;
opacity:0.5;
z-index:5;  
vertical-align:center;
top:50%;

}
.bxFrameAnihotspotsleft span, .bxFrameAnihotspotsright span {
position:absolute;
top:50%;
margin-top:-25px;
height:100px;
}

.bxFrameAnihotspotsleft span {
left:0px;
}
.bxFrameAnihotspotsright span {
right:0px;
}
.bxFrameAnihotspotsleft {
left:0px;
top:0px;
text-align:left;
}
.bxFrameAnihotspotsright {
right:0px;
top:0px;
text-align:right;
}
.bxFrameAnihotspots {
position:relative;
z-index:100;
width:100%;
}   
  
.bxFrameAnihotspots .bxFrameAnihotspot {
position:absolute;
width:26px;
margin-left:-13px;
height:26px;
margin-top:-20px;
padding-top:0px;
background-color:#cc0000;
border-radius:10% 10%;
color:#fff;
text-align:center;
border:2px solid #fff;
font-weight:bold;    
opacity:0.6;
  -webkit-animation: hsfadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: hsfadein 2s; /* Firefox < 16 */
        -ms-animation: hsfadein 2s; /* Internet Explorer */
         -o-animation: hsfadein 2s; /* Opera < 12.1 */
            animation: hsfadein 2s;
    
}
.bxFrameAnihotspots .bxFrameAnihotspot .fa-2x {
	font-size: 1em;
	padding-top:0.1em;
}

.bxFrameAnihotspots .bxFrameAnihotspot:after, .bxFrameAnihotspots .bxFrameAnihotspot:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.bxFrameAnihotspots .bxFrameAnihotspot:after {
	border-color: rgba(204, 0, 0, 0);
	border-top-color: #cc0000;
	border-width: 10px;
	margin-left: -10px;
}
.bxFrameAnihotspots .bxFrameAnihotspot:before {
	border-color: rgba(255, 131, 99, 0);
	border-top-color: #fff;
	border-width: 13px;
	margin-left: -13px;
}

#bxFrameAniFallback {
	padding-top:1rem;	
	padding-bottom:2rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
	background-color:#f4f4f4;
}



  
  @keyframes hsfadein {
    from { opacity: 0; }
    to   { opacity: 0.6; }
}

/* Firefox < 16 */
@-moz-keyframes hsfadein {
    from { opacity: 0; }
    to   { opacity: 0.6; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes hsfadein {
    from { opacity: 0; }
    to   { opacity: 0.6; }
}

/* Internet Explorer */
@-ms-keyframes hsfadein {
    from { opacity: 0; }
    to   { opacity: 0.6; }
}

/* Opera < 12.1 */
@-o-keyframes hsfadein {
    from { opacity: 0; }
    to   { opacity: 0.6; }
}
  
.aniswingintransform {
  -webkit-animation: aniswingintransform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
          animation: aniswingintransform 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

@-webkit-keyframes aniswingintransform {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}
@keyframes aniswingintransform  {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}

@media (min-width: 468px) {
	.bxFrameProdLink {
		max-width:40%;
		min-height:180px;

	}	
	.bxFrameProdLinkSingle {
		max-width:300px;	
	}
}

@media (max-width: 767px) {
	#bxFrameAniFallback {
		display:block;		
	}
	#bxFrameAni {
		display:none;		
	}
}


@media (min-width: 768px) {
	
	#bxFrameAniFallback {
		display:none;		
	}
	#bxFrameAni {
		display:block;		
	}
	
	.bxFrameProdLink {
		max-width:30%;
		min-height:180px;

	}
	.bxFrameProdLinkSingle {
		max-width:100%;	
	}
	.bxFrameAniTopicSelector {
		
		right:110px;
	}
	
	
	.bxFrameAnihotspotsleft, .bxFrameAnihotspotsright {
		width:100px;
	}
	.bxFrameAnihotspotsleft span {
		left:20px;
	}
	.bxFrameAnihotspotsright span {
		right:20px;
	}

	 .bxFrameInfoOverlay {
		top:10px;
	}
}
@media (min-width: 1024px) {
	
	.bxFrameProdLink {
		max-width:22%;
		min-height:180px;

	}
	.bxFrameProdLinkSingle {
		max-width:100%;	
	}
	.bxFrameAnihotspots .bxFrameAnihotspot {
		width:40px;
		margin-left:-21px;
		height:40px;
		margin-top:-15px;
	}
	.bxFrameAnihotspots .bxFrameAnihotspot .fa-2x {
		font-size: 2em;
	}
	 .bxFrameInfoOverlay {
		top:30px;
	}	
}
@media (min-width: 1280px) {
	.bxFrameInfoOverlayInner {
		width:60%;
	}
}