.ap-interactive .contentDocument{
		position: relative;
	    width: 100%;

} 


	.ap-interactive .captionButton{
	    cursor:pointer;
		position: absolute;
		padding: 2%;
		top:5px;
		right:0px;
		width: auto;
		height: auto;
	    opacity: 1;
	    z-index: 9;
}

	.ap-interactive .captionText{
		position: absolute;
		bottom:100px;
		margin-left:3%;
		margin-right:5%;
		padding:12px 12px 12px 12px;
		background: none;
		color: #ffffff;
		font: 20px arial, sans-serif;
		font-weight: regular;
		font-size: .8em;
		text-align: center;
		opacity: 0;		
		height: auto;
	    width: 90%;
	    z-index: 8;
}

    .blackbox {
		position: absolute;
		bottom:90px;
		margin-left:2%;
		margin-right:1%;
		padding:12px 12px 12px 12px;
		width:90%;
		height:20%;
		opacity: 0 !important;
		background-color: none;
		z-index: 7;
}

	    .highlight1 {
	    clear: both;
	    opacity: .3 !important;
	    background-color:black !important;

	}

/* 
		.chart-area {
		Display:block;
	    width: 100%;
	    height: 600px;
	    border:1px solid red;
		}
 */

@media screen and (min-width: 350px) and (max-width:600px) {

	.ap-interactive .captionText{
		position: absolute;
		bottom:60px;
		margin-left:3%;
		margin-right:5%;
		padding:12px 12px 12px 12px;
		background: none;
		color: #ffffff;
		font: 20px arial, sans-serif;
		font-weight: regular;
		font-size: .8em;
		text-align: center;
		opacity: 0;		
		height: auto;
	    width: 90%;
	    z-index: 8;

}
}

@media  screen and (min-width: 450px) and (max-width: 510px) {

    .blackbox {
		height:40%;
		bottom:60px;
     }
}

@media (max-width: 450px) {

    .blackbox {
		height:85%;
		bottom:35px;
     }
     	.ap-interactive .captionText{
		bottom:35px;
}
}