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

#slideshow_con{
	width:100%;
	/*min-height:300px;*/ /*Uncomment to resolve any height issues*/
	margin-left: auto;
	margin-right: auto;
	margin-bottom:15px;
	border:solid 1px #aabbcc;
	padding:10px 0 50px 0;
	clear:both;
	position:relative;
	background:#fff
	}

/************************/
/* 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 10px 2px 10px;
	overflow:auto;
}
.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;
	display: block;
	box-shadow:1px 1px 2px 0px rgba(0, 0, 0, 0.5);
	z-index:0;
	}

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

/* pager */
.pager { 
    text-align: center; width: 100%; z-index: 10; position: absolute; bottom: 10px; overflow: hidden;
}
.pager span{
	width:15px;
	height:15px;
	border-radius:8px;
	display:inline-block;
	margin: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 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 a:hover,
.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;
}
/*Specail classes for john*/
.col-half{
	width:50%;
	float:left;
	box-sizing: border-box;	
	
}
@media (max-width: 700px) {
#slideshow_con{display:none;}/*hides slide show*/

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