/* CSS Document */

body {  margin: 0; padding: 0; }

.marquee { height: 400px; max-width: 1200px; margin: 0px auto 35px auto; background-color: #efefe; }

.marquee .marquee_data { display: none; }

/* buttons */
.marquee .btn {
	width: 39px; height: 39px;
	background: rgba(255,255,255,.2) no-repeat;
	background-size: 50px 30px;
	position: absolute; top: 170px;
	cursor: pointer;
	border-radius: 50%; border: 2px solid rgba(255,255,255,.5);
	transition: background-color .4s, border .4s;
	opacity: .5;
}
.marquee .btn:hover { border-color: #fff; background-color: rgba(0,0,0,.4); opacity: 1; }
.marquee .btn.prev { left: 20px; z-index: 104; background-image: url(arrow_left.svg); background-position: -8px 4px; }
.marquee .btn.next { right: 20px; z-index: 105; background-image: url(arrow_right.svg); background-position: -3px 4px; }


/* stage */
.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: center center; background-size: 1200px auto; }


/* panel caption */
.marquee .marquee_panel .panel_caption {
	width: 100%;
	position: absolute; bottom: 0px; left: 0px;
	background-color: rgba(255,255,255,.85);
	text-align: center;
	padding-bottom: 35px;
}
.marquee .marquee_panel .panel_caption .panel_caption_content { margin: 30px 9% 0px 9%; }
.marquee .marquee_panel .panel_caption h3 { margin: 0px 0px 10px 0px; font-weight: 400; font-size: 2em; color:#000; line-height: 30px; }
.marquee .marquee_panel .panel_caption p { margin: 0px 50px 15px 50px; color: #888; font-size: 1.1em; color: rgba(0,0,0,.5); }
.marquee .marquee_panel .panel_caption a.cta { display: inline-block; background-color: rgba(255,255,255,0); text-transform: uppercase; color:#fff; font-size: .9em; padding: 6px 20px; transition: background-color .7s, border .7s; border: 1px solid rgba(255,255,255,.5); border-radius: 5px; text-decoration: none; }

.marquee .marquee_panel .panel_caption a:hover { background-color: rgba(255,255,255,.6); color:#000; border-color: rgba(255,255,255,0); }

/* navigation */
.marquee .marquee_nav { z-index: 103; position: absolute; bottom: 10px; left: 0px; text-align: center; width: 100%; }
.marquee .marquee_nav div {	
	display: inline-block;
	width: 10px; height: 10px;
	border: 2px solid rgba(0,0,0,.2);
	border-radius: 50%;
	margin: 0px 8px 0px 8px;
	cursor: pointer;
	transition: background-color .4s, border .4s;
}
.marquee .marquee_nav div:hover { border-color: rgba(0,0,0,.5); }
.marquee .marquee_nav div.selected { border-color: rgba(0,0,0,.1); background-color: rgba(0,0,0,.3); }


.marquee .marquee_panel .panel_caption_content > a { display: block; width: 1000px; height: 350px; position: absolute; top: 0px; left: 100px; background-color: rgba(255,0,0,.2); margin-top: -275px; opacity: 0; }


/*  small screen */
.marquee .marquee_stage_small { height: inherit; position: relative; overflow: hidden; }
.marquee .marquee_stage_small .marquee_panel { 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: 800px) {
	.marquee { font-size: 14px; height: 325px; background-color: #444; }
	.marquee .btn { width: 29px; height: 29px; background-size: 33px 20px; top: 140px; }
	.marquee .btn.prev { background-position: -4px 4px; }
	.marquee .btn.next { background-position: -1px 4px; }
	.marquee .marquee_panel .panel_caption { width: 80%; margin-left: 10%; }
	.marquee .marquee_panel .panel_caption p { display: none; }
	.marquee .marquee_panel .panel_caption a.cta { margin-top: 10px; padding: 4px 20px; }
	.marquee .marquee_nav div { width: 13px; height: 13px; margin: 0px 12px 0px 12px; }
}
*/

@media screen and (max-width: 1325px) { /* was 1250 */
	.marquee .marquee_panel .panel_caption_content > a { width: 790px; height: 365px; margin-top: -270px; }
}

@media screen and (max-width: 1095px) { /* was 1020 */
	.marquee .marquee_panel .panel_caption_content > a { width: 620px; height: 350px; margin-top: -250px; }
}

@media screen and (max-width: 910px) { /* was 840 */
	.marquee { display: none; }
}