/*
	Colorbox Core Style:
	The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
	User Style:
	Change the following styles to modify the appearance of Colorbox.  They are
	ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{
  background: url(images/overlay-bg.png) repeat;
}
#colorbox{
	outline:0;
}
	#cboxContent{
	 margin-top:32px;
	 overflow:visible;
	 background: none;
	}
	.cboxIframe{
		background:#fff;
	}
		#cboxError{
			padding:50px;
			border:1px solid #ccc;
		}
		#cboxLoadedContent{ 
		 background:#fff;
		 border:none;
		 border-radius: 5px;
		 padding: 15px;
		 position: relative;
		}

			#cboxLoadedContent .close-button {
				overflow: hidden;
				display: inline-block;
				border-radius: 50%;
				width: 30px;
				height: 30px;
				line-height: 30px;
				position: absolute;
				top: 5px;
				right: 5px;
				margin: 0px;
				padding: 0px;
			}

		#cboxLoadingGraphic{
			background:url(images/loading.gif) no-repeat center center;
		}
		#cboxLoadingOverlay{
			background:#000;
		}
		#cboxTitle{
			position:absolute; 
			top:-22px; 
			left:0;
			color:#000;
		}
		#cboxCurrent{
			position:absolute;
			top:-22px;
			right:205px;
			text-indent:-9999px;
		}

		/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */

		#cboxPrevious , #cboxNext , #cboxSlideshow , #cboxClose{
			background: transparent;
			border:0;
			padding:0;
			margin:0;
			position:absolute;
			top: 4px;
		}

		#cboxPrevious span , #cboxNext span , #cboxSlideshow span , #cboxClose span{
			display: inline-block;
			width: 25px;
			height: 25px;
			line-height: 25px;
			border: 1px solid #fff;
			border-radius: 50%;
			padding: 0px;
			box-shadow: none;
		}

		#cboxPrevious span.icon-arrow-left {
			background: url(../../images/sprites.png) 6.5px -168px no-repeat #127EB2;
		}

		#cboxNext span.icon-arrow-right {
			background: url(../../images/sprites.png) -10.5px -168px no-repeat #127EB2;
		}

		#cboxClose span.icon-close {
			background: url(../../images/sprites.png) -30.5px -168px no-repeat #127EB2;
		}


		/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
		#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

		#cboxPrevious{
			right: 74px;
		}
		#cboxNext{
			right: 42px;
		}
		#cboxClose{
				right: 4px;
		}

		.cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
		.cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
		.cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
		.cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
		.cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}


/*
 * Animations
 */
@-webkit-keyframes showColorBox {
  0% {
	transform: scale(0.7);
	-webkit-transform: scale(0.7);
  }
  45% {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
  }
  80% {
	transform: scale(0.95);
	-webkit-tranform: scale(0.95);
  }
  100% {
	transform: scale(1);
	-webkit-transform: scale(1);
  }
}
@keyframes showColorBox {
  0% {
	transform: scale(0.7);
	-webkit-transform: scale(0.7);
  }
  45% {
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
  }
  80% {
	transform: scale(0.95);
	-webkit-tranform: scale(0.95);
  }
  100% {
	transform: scale(1);
	-webkit-transform: scale(1);
  }
}
@-webkit-keyframes hideColorBox {
  0% {
	transform: scale(1);
	-webkit-transform: scale(1);
  }
  100% {
	transform: scale(0.5);
	-webkit-transform: scale(0.5);
  }
}
@keyframes hideColorBox {
  0% {
	transform: scale(1);
	-webkit-transform: scale(1);
  }
  100% {
	transform: scale(0.5);
	-webkit-transform: scale(0.5);
  }
}

#colorbox.showColorBox {
  -webkit-animation: showColorBox 0.3s;
  animation: showColorBox 0.3s;
}

#colorbox.hideColorBox {
  -webkit-animation: hideColorBox 0.2s;
  animation: hideColorBox 0.2s;
}