/* ----- Main Responsive Banner CSS Document ----- */
/* ------------------ Section-by-Section --------------- */


/*----------------------*/
/*--Main Container--*/
/*----------------------*/
.main_view {
	float: left;
	position: relative; 
}

/*--------------------------------*/
/*--Window/Masking Styles--*/
/*--------------------------------*/
.window {
	height:510px;	
	width: 748px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
	border:0px solid #eff0f0;
}
.image_reel {
	position: absolute;
	width: 6732px;
	top: 0; 
	left: 0;
}
.image_reel img {
    float: left;
    width: 748px;
    
}

@media (max-width: 1010px) 
{
    .image_reel {
	    position: absolute;
	    width: 5130px;
	    top: 0; 
	    left: 0;
    }
    .image_reel img {
        width: 565px;
    }
    .window {
	    height:410px;	
	    width: 565px;
	    overflow: hidden; /*--Hides anything outside of the set width/height--*/
	    position: relative;
	    border:0px solid #eff0f0;
    }
}
@media (max-width: 767px)
{
    .image_reel {
	    width: 6030px;
    }
    .image_reel img {
        width: 670px;
    }
    .window {
	    height:460px;	
	    width: 670px;
    }
}
@media (max-width: 680px)
{
    .image_reel {
	    width: 6030px;
    }
    .image_reel img {
        width: 540px;
    }
    .window {
	    height:370px;	
	    width: 540px;
    }
}
@media (max-width: 569px)
{
    .image_reel img {
        width: 410px;
    }
    .window {
	    height:330px;	
	    width: 410px;
    }
}

@media (max-width: 459px)
{
    .image_reel img {
        width: 350px;
    }
    .window {
	    height:290px;	
	    width: 350px;
    }
}
@media (max-width: 349px)
{
    .image_reel img {
        width: 320px;
    }
    .window {
	    height:250px;	
	    width: 320px;
    }
}

/*--------------------*/
/*--Paging Styles--*/
/*--------------------*/
.paging {
	position: absolute;
	bottom: 5px; right: 17px;
	width: 748px; 
	height:32px;
	z-index: 10; /*--Assures the paging stays on the top layer--*/
	text-align: right;
	line-height:50px;
	font-size:smaller;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	background-color: #000;
	padding: 4px;
	margin: 1px;
	/*background: url(../../images/master/main_banner/black_square.png) no-repeat;*/
}
.paging a.active {
	background-color: #3B93CB;
	padding: 4px;
	/*background: url(../../images/master/main_banner/blue_square.png) no-repeat;*/
}
.paging a:hover {
    background-color: #AAA;
    /*background: url(../../images/master/main_banner/white_square.png) no-repeat;*/
}
.paging2 {
    position: absolute;
    bottom: 18px; right: 115px;
    width: 85px; 
    height:5px;
    z-index: 10; /*--Assures the paging stays on the top layer--*/
    text-align: left;
    display: show; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging3 {
    position: absolute;
    bottom: 18px; right: 1px;
    width: 50px; 
    height:5px;
    z-index: 10; /*--Assures the paging stays on the top layer--*/
    text-align: left;
    display: show; /*--Hidden by default, will be later shown with jQuery--*/
}

@media (max-width: 1010px) 
{
    .paging {
	    position: absolute;
	    bottom: 5px; right: 17px;
	    width: 570px; 
	    height:32px;
	    z-index: 0; /*--Assures the paging stays behind side panel pop up responsive menu --*/
	    text-align: right;
	    line-height:50px;
	    font-size:smaller;
	    display: none; /*--Hidden by default, will be later shown with jQuery--*/
    }
}
@media (max-width: 767px)
{
    .paging {
	    bottom: 5px; 
	    right: 5px;
	    width: 670px; 
	    height:32px;
	    text-align: center;
    }
}
@media (max-width: 680px)
{
    .paging {
	    bottom: 5px;
	    width: 540px; 
	    height:32px;
    }
}
@media (max-width: 569px)
{
    .paging {
	    bottom: 5px;
	    width: 410px; 
	    height:32px;
    }
}
@media (max-width: 459px)
{
    .paging {
	    bottom: 5px;
	    width: 350px; 
	    height:32px;
    }
}
@media (max-width: 349px)
{
    .paging {
	    bottom: 5px;
	    width: 320px; 
	    height:32px;
    }
}