@charset "utf-8";
/* CSS Document */


#banner {position:relative; display:block; margin:15px 0 10px 0; border-bottom:solid #b8b8b8 1px; background-color:#00338e; color:#000; width:100% }	
#banner h2 {margin:10px 0 5px 10px; padding:0;}
#banner p {margin:0 5px 0 0; padding:0 10px 0 0; line-height: 14px; }

/****************    banner  colours***********************/
.caption {color: white; font-size: 1em;	line-height: 20px; text-align: left; border-radius:6px;}
.captionBlack {background: #000; background-color: rgba(0, 0, 0, 0.6);}
.captionBlue  {background: #003087; background-color: rgba(0, 48, 135, 0.8);}
.captionOrange	{background: #b43c01; background-color: rgba(150, 56, 33, 1);}
.captionMarine	{background: #b43c01; background-color: rgba(22, 92, 125, 1);}
.captionPurple	{background: #b43c01; background-color: rgba(131, 0, 101, 1);}
.captionGreen	{background: #b43c01; background-color: rgba(0, 78, 66, 1);}
#slider1_container .caption_body {position:absolute; left:0px; width:100%; top:320px; height:60px; border-radius:0; }
#slider2_container .caption_body {position:absolute; left:0px; width:100%; top:215px; height:55px; border-radius:0; }

@media only screen and (max-width: 400px) {
	.caption_header {font-size:20px; font-weight:bold; color: #EB5100; }
	.caption_body {font-size:14px; font-weight:bold; line-height: 16px;	}
}

@media only screen and (max-width: 550px) {
	#slider2_container, .playlist {display:block}
	#slider1_container, .slides {display:none}
	#banner p {display:block}	
	.caption_header {font-size:18px; font-weight:bold; color: #EB5100; }
	.caption_body {font-size:100%; font-weight: normal; line-height: 100%;	}
}

@media only screen and (min-width: 551px) {
	#slider2_container, .playlist {display:none}
	#slider1_container, .slides {display:block}
	#banner h2 {margin:0 0 5px 0;}
	#banner p {display:block}
	.caption {padding: 14px}		
	.caption_header {font-size:200%; font-weight:bold; padding-bottom:3px }
	.caption_body {font-size:100%; }
}

@media only screen and (min-width: 650px) {
	.caption {padding: 10px}	
	.caption_header {font-size:200%; font-weight:bold; }
	.caption_body {font-size:100%; 	}
}

/* jssor slider bullet navigator skin 03 css */
/*
.jssorb03 div           (normal)
.jssorb03 div:hover     (normal mouseover)
.jssorb03 .av           (active)
.jssorb03 .av:hover     (active mouseover)
.jssorb03 .dn           (mousedown)
*/
.jssorb03 {position: absolute;}
.jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
	 position: absolute;
	 /* size of bullet elment */
	 width: 21px;
	 height: 21px;
	 text-align: center;
	 line-height: 21px;
	 color: white;
	 font-size: 12px;
	 background: url(../images/banner/b03.png) no-repeat;
	 overflow: hidden;
	 cursor: pointer;
}
.jssorb03 div { background-position: -5px -4px;}
.jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px;}
.jssorb03 .av { background-position: -65px -4px;}