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

#slideshow_con{
	width:75%;
	max-width:735px;
	float:right;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	position:relative;
	box-sizing:border-box;
	}
@media (max-width: 400px){
#slideshow_con{
	display:none;
}
}
/************************/
/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box;
}

.cycle-slideshow { 
	overflow:auto;
 }
.cycle-slide{
width: 100%;
padding: 0;
}


.main-slideshow-slide {
	/* overflow-y:hidden; */
}

.cycle-slide div{
	box-sizing: border-box;
}
/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	margin:0 0 0 0;
	display: block;
	/*box-shadow:4px 4px 8px 0px rgba(0, 0, 0, 0.75);*/
	z-index:98;
	height:auto !important;
	max-width:100% !important;
	}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* pager */
.pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 10px; overflow: hidden;
}
.pager span{
	width:15px;
	height:15px;
	border-radius:8px;
	display:inline-block;
	margin:0 5px;
	background:#ccc;
	cursor:pointer;
	color:transparent;
	background: rgba(52, 60, 70, 0.6);
	border:solid 1px #000;
}
.pager span.cycle-pager-active,
.pager span:hover{
	background:#0a3063;	
}
/*slider content*/
.cycle-slideshow p{
	padding-left:10px;
	padding-right:10px;
}
.cycle-slideshow a{
}
.cycle-slideshow a:hover{
	text-decoration:underline;
}
.cycle-slideshow h1, .cycle-slideshow h2, .cycle-slideshow h3, .cycle-slideshow h4, .cycle-slideshow h5,
.cycle-slideshow h1 a, .cycle-slideshow h2 a, .cycle-slideshow h3 a, .cycle-slideshow h4 a, .cycle-slideshow h5 a{
text-decoration: none;
}
.cycle-slideshow h1 a:hover, .cycle-slideshow h2 a:hover, .cycle-slideshow h3 a:hover, .cycle-slideshow h4 a:hover, .cycle-slideshow h5 a:hover
{
text-decoration: underline;
}


.col-full {
	width:100%;
	box-sizing: border-box !important;	
}

.col-quarter {
	width:25%;
	float:left;
	box-sizing: border-box !important;	
}

/*Specail classes for john*/
.col-half{
	width:50%;
	float:left;
	box-sizing: border-box !important;	
	
}
@media (max-width: 700px) {
.main-slideshow-slide {
	height:auto;
}

.col-half{
	width:100%;
	margin:0 auto;
	float:none;
	padding-bottom:10px;
}
.cycle-slideshow img{
	margin:0 auto;
}
.col-quarter {
	width:100%;
	margin:0 auto;
	float:none;
	padding-bottom:10px;
}
}

.promotion_slide h1,
.promotion_slide h1 a,
.promotion_slide h2,
.promotion_slide h2 a, 
.promotion_slide h3,
.promotion_slide h3 a {
	color: #252525;
}

.promotion_slide h1 a:hover,
.promotion_slide h2 a:hover, 
.promotion_slide h3 a:hover {
	color: #0C3C7E;
}