/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/



.imageWrapper {
    width: 100%;
    overflow: hidden;
}

.inactive {
   border: 1px solid #fff;
    display: inline-block;
    margin-right: 3px;
    padding: 4px;
    cursor: pointer;
}

.center {
    bottom: 25px;
    left: 16px;
    position: relative;
    z-index: 850;
}	
.inactive.cycle-pager-active {
    background-color: #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 { /*width: 45%;*/ /*min-width: 200px; max-width: 500px;*/
		margin: 0;
		padding: 0;
		position: relative;
		/*background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;*/
		width: 960px;
		height: 330px;
		margin-bottom: 15px;
		overflow:hidden;
	}

		/* 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;
			max-width: 100%;
			padding: 0;
			display: block;
		}

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

	/* pager */
		.cycle-pager {
			padding-left: 10px;
			position: absolute;
			text-align: left;
			top: 223px;
			width: 100%;
			z-index: 500;
		}

		.cycle-pager span {
			font-family: arial;
			font-size: 50px;
			width: 16px;
			height: 16px;
			display: inline-block;
			color: #ddd;
			cursor: pointer;
		}

			.cycle-pager span.cycle-pager-active {
				color: #3294ec;
			}

		.cycle-pager > * {
			cursor: pointer;
		}


	/* caption */
	.cycle-caption {
		position: absolute;
		color: white;
		bottom: 15px;
		right: 15px;
		z-index: 700;
	}


	/* overlay */
	.cycle-overlay {
		font-family: tahoma, arial;
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: 600;
		background: black;
		color: white;
		padding: 15px;
		opacity: .5;
	}


	/* prev / next links */
	.cycle-prev, .cycle-next {
		position: absolute;
		top: 0;
		width: 75px;
		opacity: 0;
		filter: alpha(opacity=0);
		z-index: 800;
		height: 100%;
		cursor: pointer;
	}	

	.cycle-prev {
		left: 0;
		opacity: .7;
        background-image: url(/templates/homepage/1/images/bg_leftarrow.png);
		background-position:50% 50%;
		background-repeat:no-repeat;
	}

	.cycle-next {
		right: 0;
		opacity: .7;
        background-image: url(/templates/homepage/1/images/bg_rightarrow.png);
		background-position:50% 50%;
		background-repeat:no-repeat;
   
	}
	/*.cycle-prev:hover{
		background: url(/templates/homepage/1/images/bg_leftarrow.png) 50% 50% no-repeat;
	}

	.cycle-next:hover {
		background: url(/templates/homepage/1/images/bg_rightarrow.png) 50% 50% no-repeat;
	}*/
		.cycle-prev:hover, .cycle-next:hover {
			opacity: .7;
			filter: alpha(opacity=70);
		}

	.disabled {
		opacity: .5;
		filter: alpha(opacity=50);
	}


	/* display paused text on top of paused slideshow */
	.cycle-paused:after {
		content: 'Paused';
		color: white;
		background: black;
		padding: 10px;
		z-index: 500;
		position: absolute;
		top: 10px;
		right: 10px;
		border-radius: 10px;
		opacity: .5;
		filter: alpha(opacity=50);
	}

	/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/

	@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
		/*.cycle-slideshow { width: 200px;}*/
		.cycle-overlay {
			padding: 4px;
		}

		.cycle-caption {
			bottom: 4px;
			right: 4px;
		}
	}