/*  CSS Document                                               */
/*  Main CSS for the layout and style of the Homepage Marquee  */

.home-top { margin-top: 0px !important; }
.marquee { background-color: #000; margin-top: 30px; height: 44em; }
.marquee * { font-family: Verdana, Geneva, sans-serif; }

.marquee .marquee_data { display: none; }

.marquee .marquee_stage_large { height: inherit; position: relative; overflow: hidden; }

.marquee .marquee_container_1, .marquee .marquee_container_2 { height: inherit; position: absolute; top: 0px; left: 0px; width: 100%; }
.marquee .marquee_container_1 { z-index: 101; }
.marquee .marquee_container_2 { z-index: 102; }


.marquee .marquee_panel { height: inherit; position: absolute; top: 0px; left: 0px; width: 100%; text-align: center; background-repeat: no-repeat; background-position: 45% 0px; background-size: cover; }

.marquee .marquee_panel .panel_caption {
	width: 50%;
	/*background: rgba(0,0,0,.4)!important;*/
	position: absolute; top: 0; left: 0;
	text-align: left;
	padding: 50px;
	/*border: 6px solid rgba(0,0,0,.1);*/
	border-left: none;
}
.marquee .marquee_panel .panel_caption * { color: #ffffff; line-height: 20px; }
.marquee .marquee_panel .panel_caption h4 { font-family: Impact, Charcoal, sans-serif; letter-spacing: 0; margin: 0px 0px 20px 0px; font-weight: 100; font-size: 3.6em; }
.marquee .marquee_panel .panel_caption p { margin: 0px 0px 15px 0px; font-size: 2em; font-weight: 700; text-shadow: 2px 2px 5px #000 !important; line-height: 1; }
.marquee .marquee_panel .panel_caption a, .marquee .marquee_panel .panel_caption a:visited { color: #fff; text-decoration: underline; }
.marquee .marquee_panel .panel_caption a:hover { text-decoration: none; }
/*Nav*/
.marquee .marquee_nav { z-index: 103; position: absolute; bottom: 10px; left: 50px; text-align: left; width: 400px; padding: 0px 0px 0px 23px; }
.marquee .marquee_nav div {
	transition: background-color 1s linear;
	display: inline-block; width: 15px; height: 15px;
	background-color: rgba(255,255,255,.4) !important;
	border: 2px solid rgba(0,220,255,.6);
	border-radius: 50%;
	margin: 0px 10px 0px 0px;
	cursor: pointer;
}

.marquee .marquee_nav div:hover { background-color: rgba(0,200,255,.2); transition: background-color .1s linear; }

.marquee .marquee_nav div.selected { background-color: rgba(0,220,255,.8); }

/*  small screen */
.marquee .marquee_stage_small { height: 200px !important; position: relative; overflow: hidden; }
.marquee .marquee_stage_small .marquee_panel { background-size: cover; height: inherit; position: absolute; top: 0px; left: 0px; width: 100%; }

/*.marquee .marquee_stage_small .marquee_panel .panel_content { display: none; }*/

@media screen and (max-width:1260px){
	.marquee .marquee_panel .panel_caption h4 {
		font-size: 2.8em;
	}
	.marquee .marquee_panel .panel_caption p {
		font-size: ;
	}
	.marquee {
		height: 34em;
	}
}
@media screen and (max-width:960px){
	.marquee {
		height: 26em;
	}
	.marquee .marquee_panel .panel_caption h4 {
		font-size: 2.2em;
	}
	.marquee .marquee_panel .panel_caption p {
		font-size: 1.6em;
	}
}
@media screen and (max-width:788px){
	.marquee {
		height: 18em;
		margin-top: -13px;
	}
	.marquee .marquee_panel .panel_caption h4 {
		font-size: 1.6em;
		margin-bottom: 10px;
	}
	.marquee .marquee_panel .panel_caption p {
		font-size: .9em;
	}
	.marquee .marquee_panel .panel_caption {
		padding: 20px !important;
	}
}
@media screen and (max-width:480px){
	.marquee {
		height: 13em;
		margin-top: -13px;
	}
	.marquee .marquee_panel .panel_caption h4 {
		font-size: 1em;
		margin-bottom: 5px;
	}
	.marquee .marquee_panel .panel_caption p {
		font-size: .6em;
	}
	.marquee .marquee_panel .panel_caption {
		padding: 15px !important;
	}
}