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


/* 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: 100%; min-width: 80px; max-width: 330px; margin: 10px auto; padding: 0; position: relative;height:560px!important;
    /*background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;*/z-index:1;

 }
.quickview-col1 .cycle-slideshow{height:auto!important;}

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

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

#carousel {
    margin-bottom: 8px!important;
}

/* pager */
.cycle-pager {
    text-align: center; width: 100%; z-index: 9; position: absolute; bottom: -40px; overflow: hidden; display:none;
}
.cycle-pager span {
   /* font-family: arial; font-size: 50px; width: 16px; height: 16px;
    display: inline-block; color: #ddd; cursor: pointer; margin-right:5px; margin-left:5px*/
	border-radius: 50%;
	width: 10px;
	height: 10px;
	border:1px solid #c3c3c3;
	margin:0px 4px;
	display:inline-block;
}
.cycle-pager span.cycle-pager-active {
	background-color: #414141;
	border:1px solid #414141;
}
.cycle-pager span:hover {
	background-color: #414141;
	border:1px solid #414141;

}
.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: -55%;
	width: 30%;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 800;
	height: 100%;
	cursor: pointer;
}
.cycle-prev {
	left: 0px;
	background-image: url(/templates/{$templates_dir}/_images/redfish/imagearrow_left.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.cycle-next {
	right: 0;
	background-image: url(/templates/{$templates_dir}/_images/redfish/imagearrow_right.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.cycle-prev:hover {
	background-image: url(/templates/{$templates_dir}/_images/redfish/imagearrow_left_hover.png);
}
.cycle-next:hover {
	background-image: url(/templates/{$templates_dir}/_images/redfish/imagearrow_right_hover.png);
}
.cyclearrows{
position:absolute;
top:45%;
width: 100%;
/*z-index:1;*/
/* display:none; */
}
.cylclearrowleft{
	float:left;
	margin-left:5px;
	z-index: 1;
    position: relative;
}
.cylclearrowright{
	float:right;
	margin-right:5px;
	z-index: 1;
    position: relative;
}
.cylclearrowright a{display: inline-block;font-size: 30px!important;
width: 30px;
height: 30px;font: normal 0/1 'magicarrows';
font-weight: 200;
font-variant: normal;text-decoration:none;}
.cylclearrowright a::before {
	content: "~";font-size: 30px!important;color:#000;text-shadow: none;
font: normal 0/1 'magicarrows';
font-weight: 200;
font-variant: normal;
cursor: pointer;
text-transform: none !important;
text-align: center;

}
.cylclearrowleft a{display: inline-block;font-size: 30px!important;
width: 30px;
height: 30px;font: normal 0/1 'magicarrows';
font-weight: 200;
font-variant: normal;text-decoration:none;}
.cylclearrowleft a::before {
content: "}";font-size: 30px!important;color:#000;text-shadow: none;
font: normal 0/1 'magicarrows';
font-weight: 200;
font-variant: normal;
cursor: pointer;
text-transform: none !important;
text-align: center;

}
@media (max-width: 992px){
.cyclearrows{
	display:block;
}
.cycle-pager{
	display:block;
}
.cycle-slideshow { width: 200px;height:270px!important;}
}


.disabled { opacity: .2; filter:alpha(opacity=20); }


/* 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: 767px), only screen and (max-device-width: 767px) {
    .cycle-slideshow { width: 285px;height:370px!important;}
 }
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .cycle-slideshow { width: 200px;height:270px!important;}
 }

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

video {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.ui-carousel {
	height: 480px;
	margin: 0;
	overflow: auto;
	padding: 0;
	position: relative; /*for ie7 to work e.g in html carousels*/
	width: 75px
}

.ui-carousel > .wrapper {
    margin: 0;
    padding: 0;
    width: 9999px;
	height:550px;
}

.ui-carousel > .wrapper > * {
	border: 0;
	display: block;
	float: left;
	height: 100px;
	overflow: hidden;
	width: 75px;
}


#carousel {
				position: absolute;
			}
			#carousel .mz-thumb {
				border: 1px solid #ddd;
				width:62px;
				margin: 9px 0px 2px;
				margin: 10px 0px 2px 1px;
				margin: 16px 0px 2px 1px
			}

			#ui-carousel-next, #ui-carousel-prev {
	width: 75px;
	height: 20px;
	display: block;
	position: absolute; left: 0; z-index: 100;
	background-color: #fff;
	background-image: url(/templates/{$templates_dir}/_images/redfish/arrow-bottom.png);
	background-repeat: no-repeat;
	background-position: 20px 0px;
			}

			#ui-carousel-next {
	top: 0;
	background-image: url(/templates/{$templates_dir}/_images/redfish/arrow-top.png);
	position: absolute;
			}

			#ui-carousel-prev {
	top: 440px;
	position: absolute;
	margin-bottom:20px;
	padding-bottom:20px;
		top: 586px;
			}

			#ui-carousel-next > span, #ui-carousel-prev > span {
				display: none;
			}
/*
#carousel.mobileBullets {height: 21px !important;
position: inherit !important;margin:20px 0px 30px 0px!important;max-width:initial!important;width:100%;}
#carousel.mobileBullets .cycle-carousel-wrap{text-align:center;position: inherit !important;}
#carousel.mobileBullets .mz-thumb{width:10px;height:10px;radius:50%;border-radius: 50%;background-color:#ddd;display: inline-block !important;margin: 0 3px;text-align: center;}
#carousel.mobileBullets .mz-thumb-selected {background-color:#000;}*/

@media (max-width: 992px){

/*.productpage_mainimage {min-height:initial}	*/
#careicons li{ text-transform:uppercase; width:32%;}
#prodthumbsdiv.versionB {height:55px;}
.versionB #ui-carousel-next, .versionB #ui-carousel-prev {display:none!important;}
.versionB #carousel {height: 25px !important;position: inherit !important;margin:0px;max-width:initial!important;width:100% !important;}
.versionB #carousel .cycle-carousel-wrap{text-align:center;position: inherit !important;}
.versionB #carousel .mz-thumb{width:10px;height:10px;border-radius: 50%;background-color:#ddd;display: inline-block !important;margin: 0 3px;text-align: center;}
.versionB #carousel .mz-thumb-selected {background-color:#000;}
.versionB #carousel a img {display:none}

#prodthumbsdiv.versionA  {height: 102px;margin-top: 15px;}
.versionA #ui-carousel-next {width: 20px; height: 75px; background-position: center; background-image: url(/templates/{$templates_dir}/_images/temp/imagearrow_left.png)}
.versionA #ui-carousel-prev {width: 20px; height: 75px;top: 0px;right: 0px; background-position: center; background-image: url(/templates/{$templates_dir}/_images/temp/imagearrow_right.png)}
.versionA #carousel {height: 100px !important;position: inherit !important;margin:0px auto;max-width:initial!important;width:calc(100% - 60px) !important ;}
.versionA #carousel .cycle-carousel-wrap{text-align:center;position: inherit !important;}
.versionA #carousel .mz-thumb{width:50px;height:75px;display: inline-block !important;margin: 0 3px;text-align: center;}
.versionA #carousel a img {margin-bottom:0px;}
.versionA #carousel > a.mz-thumb {display:none!important;}
}



.mcs-items-container {padding:6px 0px;}