.mainContainer{
	/*filter: 				blur(0px);
	-webkit-filter:		blur(0px);
	-moz-filter:			blur(0px);
	-o-filter:			blur(0px);
	-ms-filter:			blur(0px);*/
	moz-transition: 		all 0.5s ease-out;
	-webkit-transition:	all 0.5s ease-out;
	-o-transition: 		all 0.5s ease-out;
	-ms-transition:		all 0.5s ease-out;
	transition:			all 0.5s ease-out
}

.mainContainer.covered{
	/*filter: 				blur(5px);
	-webkit-filter:		blur(5px);
	-moz-filter:			blur(5px);
	-o-filter:			blur(5px);
	-ms-filter:			blur(5px);*/
}

/*
 *===========================================================
 *												   BACKGROUND
 *===========================================================
 */
 
.pdboxOverlay{
	display: 			none;
	width: 				100%;
	height: 				100%;
	opacity: 			0;
	background-color: 	#000;
	position: 			fixed;
	z-index: 			1000;
	top:					0;
	overflow:			hidden;
}

.pdboxContent{
	display: 			block;
	width: 				100%;
	opacity: 			0;
	position: 			absolute;
	z-index: 			1100;
	top:					0;
	text-align:			center
}

.pdboxContent.fixed{
	position:			fixed
}

.outerContainer.transparent{
	-webkit-box-shadow:	none;
	-moz-box-shadow:	none;
	box-shadow:			none;
	background-color:	transparent;
	padding:				0
}


/*
 *===========================================================
 *												   	  CONTENT
 *===========================================================
 */
 
.outerContainer{
	position:			relative;
	display:				inline-block;
	opacity:				0;
	margin:				0 auto;
	background-color:	#FFFFFF;
	-webkit-box-shadow: 0px 0px 44px 0px rgba(0,0,0,1);
	-moz-box-shadow:	0px 0px 44px 0px rgba(0,0,0,1);
	box-shadow:			0px 0px 44px 0px rgba(0,0,0,1);
	padding:				10px;
	border-radius:		15px
		
}

/*
 *==================================
 *					   IMAGE CONTENT
 *==================================
 */
.outerContainer.image{
	font-size:			0;
	padding:				0
}

.outerContainer #pdBoxImage{
	overflow:			hidden;
	border-radius:		10px
}

/*
 *==================================
 *					  IFRAME CONTENT
 *==================================
 */
.outerContainer.iframe{
	padding:				20px
}

.outerContainer.iframe iframe{
	border:				0
}


/*
 *===========================================================
 *												  	   LOADER
 *===========================================================
 */
 
#preloader{
	position: 		absolute;
	top: 			calc(50% - 25px);
	left: 			calc(50% - 25px);
}

/*
 *===========================================================
 *												  	  	TITLE
 *===========================================================
 */

.outerContainer > .pdTitle{
	position:			absolute;
	top:					-40px;
	left:				0px;
	height:				22px;
	line-height:			22px;
	color:				#ffffff;
	font-size:			22px;
	border-radius:		15px;
	padding:				8px 15px
}



/*
 *===========================================================
 *												  	  BUTTONS
 *===========================================================
 */

#closePdBox{
	width:				25px;
	height:				25px;
	display:				block;
	position:			absolute;
	top:					-35px;
	right:				-35px;
	background-image:	url(/img/modules/pdbox/close.svg);
	background-size:	100%;
	opacity:				0.5;
	moz-transition: 		all 0.3s ease-out;
	-webkit-transition:	all 0.3s ease-out;
	-o-transition: 		all 0.3s ease-out;
	-ms-transition:		all 0.3s ease-out;
	transition:			all 0.3s ease-out
}

#closePdBox:hover{
	opacity:				1
}

/* PREV BUTTON */
#prevPdBox{
	display:				block;
	position:			absolute;
	height:				100%;
	width:				30%;
	top:					0;
	left:				0;
	cursor:				pointer;
	moz-transition: 		all 0.3s ease-out;
	-webkit-transition:	all 0.3s ease-out;
	-o-transition: 		all 0.3s ease-out;
	-ms-transition:		all 0.3s ease-out;
	transition:			all 0.3s ease-out;
	background: 			-moz-linear-gradient(left,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 70%);
	background: 			-webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(70%,rgba(0,0,0,0)));
	background: 			-webkit-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 70%);
	background: 			-o-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 70%);
	background: 			-ms-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 70%);
	background: 			linear-gradient(to right,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 70%);
	filter: 				progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=1 );
	opacity:				0
}

#prevPdBox::after{
	content:				'';
	display:				block;
	height:				100%;
	width:				30%;
	max-width:			45px;
	background-image:	url(/img/modules/pdbox/prev.svg);
	background-repeat:	no-repeat;
	background-size:	100% auto;
	background-position:center;
	position:			absolute;
	left:				10%;
	top:					0
}

#prevPdBox:hover{
	opacity:				1
}

/* NEXT BUTTON */
#nextPdBox{
	display:				block;
	position:			absolute;
	height:				100%;
	width:				30%;
	top:					0;
	right:				0;
	cursor:				pointer;
	moz-transition: 		all 0.3s ease-out;
	-webkit-transition:	all 0.3s ease-out;
	-o-transition: 		all 0.3s ease-out;
	-ms-transition:		all 0.3s ease-out;
	transition:			all 0.3s ease-out;
	background:			-moz-linear-gradient(left,  rgba(0,0,0,0) 30%, rgba(0,0,0,0.3) 100%);
	background: 			-webkit-gradient(linear, left top, right top, color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.3)));
	background: 			-webkit-linear-gradient(left,  rgba(0,0,0,0) 30%,rgba(0,0,0,0.3) 100%);
	background: 			-o-linear-gradient(left,  rgba(0,0,0,0) 30%,rgba(0,0,0,0.3) 100%);
	background: 			-ms-linear-gradient(left,  rgba(0,0,0,0) 30%,rgba(0,0,0,0.3) 100%);
	background: 			linear-gradient(to right,  rgba(0,0,0,0) 30%,rgba(0,0,0,0.3) 100%);
	filter: 				progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
	opacity:				0
}

#nextPdBox::after{
	content:				'';
	display:				block;
	height:				100%;
	width:				30%;
	max-width:			45px;
	background-image:	url(/img/modules/pdbox/next.svg);
	background-repeat:	no-repeat;
	background-size:	100% auto;
	background-position:center;
	position:			absolute;
	right:				10%;
	top:					0
}

#nextPdBox:hover{
	opacity:				1
}




/*
 *===========================================================
 *												  	   LOADER
 *===========================================================
 */
 
#preloader{
	position: 		absolute;
	top: 			calc(50% - 25px);
	left: 			calc(50% - 25px);
}




/*
 *===========================================================
 *												   THUMBS BAR
 *===========================================================
 */

.pdboxThumbsBar{
	display:				none;
	opacity:				0;
	position:			fixed;
	width:				calc(100% - 20px);
	height:				120px;
	padding:				10px;
	bottom:				0;
	left:				0;
	background-color:	#FFFFFF;
	z-index:				1000;
	overflow:			hidden;
	text-align:			center
}

.pdboxThumbsBar .pdboxSlider{
	display:				block;
	position:			absolute;
	height:				100%;
	white-space:			nowrap;
	left:				0;
	moz-transition:		all 0.3s ease-out;
	-webkit-transition:	all 0.3s ease-out;
	-o-transition:		all 0.3s ease-out;
	-ms-transition:		all 0.3s ease-out;
	transition:			all 0.3s ease-out;
}

.pdboxThumbsBar .pdboxSlider a{
	display:				inline-block;
	vertical-align:		middle;
	height:				120px;
	margin-right:		10px;
	position:			relative;
	overflow:			hidden
}

.pdboxThumbsBar .pdboxSlider a:last-child{
	margin-right:		0px
}

.pdboxThumbsBar .pdboxSlider a img{
	display:				block;
	height:				100%
}

.pdboxThumbsBar .pdboxSlider a:not(.current):after{
	content:				'';
	display:				block;
	width:				100%;
	height:				100%;
	top:					0;
	left:				0;
	position:			absolute;
	background-color:	rgba(0,0,0,0.5);
	background-image:	url(/img/modules/pdbox/zoom.svg);
	background-repeat:	no-repeat;
	background-size:	30%;
	background-position:center;
	opacity:				0;
	moz-transition:		all 0.3s ease-out;
	-webkit-transition:	all 0.3s ease-out;
	-o-transition:		all 0.3s ease-out;
	-ms-transition:		all 0.3s ease-out;
	transition:			all 0.3s ease-out;
}

.pdboxThumbsBar .pdboxSlider a:hover:after{
	opacity:				1
}

.pdboxThumbsBar .pdboxSlider a.current:after{
	content:				'';
	display:				block;
	width:				100%;
	height:				100%;
	top:					0;
	left:				0;
	position:			absolute;
	background-color:	rgba(0,0,0,0.5);
	background-image:	url(/img/modules/pdbox/current.svg);
	background-repeat:	no-repeat;
	background-size:	30%;
	background-position:center;
	opacity:				1
}

/*
 *===========================================================
 *										   THUMBS BAR BUTTONS
 *===========================================================
 */

.pdboxSlideBtn{
	display:				block;
	position:			absolute;
	width:				70px;
	height:				100%;
	left:				0;
	top:					0;
	background-color:	rgba(255,255,255,1);
	background-image:	url(/img/modules/pdbox/prevBlack.svg);
	background-position:center;
	background-repeat:	no-repeat;
	background-size:	30px auto;
	z-index:				1000;
	opacity:				0.6
}

.pdboxSlideBtn:hover{
	opacity:				1
}

#pdboxSlideRight{
	background-image:	url(/img/modules/pdbox/nextBlack.svg);
	left:				auto;
	right:				0
}


/*
 *====================================================================
 *													   SHOW ANIMATIONS
 *====================================================================
 */
 
.showPdBox {
  	-webkit-animation: 		showPdBox 0.7s;
  	-moz-animation: 			showPdBox 0.7s;
  	animation:				showPdBox 0.7s;
	opacity:					1
}

@-webkit-keyframes showPdBox {
	0% {
		opacity:				0;
		transform: 			scale(0.6);
    	-webkit-transform: 	scale(0.6)
	}
  	45% {
		opacity:				0.45;
    	transform: 			scale(1.1);
    	-webkit-transform: 	scale(1.1)
	}
  	100% {
		opacity:				1;
    	transform: 			scale(1);
    	-webkit-transform: 	scale(1)
	}
}

@-moz-keyframes showPdBox {
	0% {
		opacity:				0;
		transform: 			scale(0.6);
		-webkit-transform: 	scale(0.6)
	}
	45% {
		opacity:				0.45;
		transform: 			scale(1.1);
		-webkit-transform: 	scale(1.1)
	}
	100% {
		opacity:				1;
		transform: 			scale(1);
		-webkit-transform: 	scale(1)
	}
}

@keyframes showPdBox {
	0% {
		opacity:				0;
		transform: 			scale(0.6);
		-webkit-transform: 	scale(0.6)
	}
	45% {
		opacity:				0.45;
		transform: 			scale(1.1);
		-webkit-transform: 	scale(1.1)
	}
	100% {
		opacity:				1;
		transform: 			scale(1);
		-webkit-transform: 	scale(1)
	}
}

/*
 *====================================================================
 *													  	HIDE ANIMATION
 *====================================================================
 */

.hidePdBox {
  	-webkit-animation: 		hidePdBox 0.5s;
  	-moz-animation: 			hidePdBox 0.5s;
  	animation:				hidePdBox 0.5s
}

@-webkit-keyframes hidePdBox {
 	0% {
    	transform: 			scale(1);
    	-webkit-transform: 	scale(1);
		opacity:				1
	}
  	100% {
    	transform:			scale(0.5);
    	-webkit-transform: 	scale(0.5); 
		opacity:				0
	}
}

@-moz-keyframes hidePdBox {
  	0% {
    	transform: 			scale(1);
    	-webkit-transform: 	scale(1);
		opacity:				1
	}
  	100% {
    	transform: 			scale(0.5);
    	-webkit-transform: 	scale(0.5);
		opacity:				0
	}
}

@keyframes hidePdBox {
  	0% {
    	transform: 			scale(1);
    	-webkit-transform: 	scale(1);
		opacity:				1
	}
  	100% {
    	transform: 			scale(0.5);
    	-webkit-transform: 	scale(0.5);
		opacity:				0
	}
}

/*
 *====================================================================
 *													FADE OUT ANIMATION
 *====================================================================
 */

.fadeOutPdBox {
  	-webkit-animation: 		fadeOutPdBox 0.5s;
  	-moz-animation: 			fadeOutPdBox 0.5s;
  	animation:				fadeOutPdBox 0.5s
}

@-webkit-keyframes fadeOutPdBox {
 	0% {
    	transform: 			scale(1);
    	-webkit-transform: 	scale(1);
		opacity:				1
	}
  	100% {
    	transform:			scale(1.3);
    	-webkit-transform: 	scale(1.3); 
		opacity:				0
	}
}

@-moz-keyframes fadeOutPdBox {
  	0% {
    	transform: 			scale(1);
    	-webkit-transform: 	scale(1);
		opacity:				1
	}
  	100% {
    	transform: 			scale(1.3);
    	-webkit-transform: 	scale(1.3);
		opacity:				0
	}
}

@keyframes fadeOutPdBox {
  	0% {
    	transform: 			scale(1);
    	-webkit-transform: 	scale(1);
		opacity:				1
	}
  	100% {
    	transform: 			scale(1.3);
    	-webkit-transform: 	scale(1.3);
		opacity:				0
	}
}

/*
 *====================================================================
 *													FADE IN ANIMATION
 *====================================================================
 */

.fadeInPdBox {
  	-webkit-animation: 		fadeInPdBox 0.5s;
  	-moz-animation: 			fadeInPdBox 0.5s;
  	animation:				fadeInPdBox 0.5s;
	opacity:					1
}

@-webkit-keyframes fadeInPdBox {
 	0% {
    	transform: 			scale(0.5);
    	-webkit-transform: 	scale(0.5);
		opacity:				0
	}
  	100% {
    	transform:			scale(1);
    	-webkit-transform: 	scale(1); 
		opacity:				1
	}
}

@-moz-keyframes fadeInPdBox {
  	0% {
    	transform: 			scale(0.5);
    	-webkit-transform: 	scale(0.5);
		opacity:				0
	}
  	100% {
    	transform: 			scale(1);
    	-webkit-transform: 	scale(1);
		opacity:				1
	}
}

@keyframes fadeInPdBox {
  	0% {
    	transform: 			scale(0.5);
    	-webkit-transform: 	scale(0.5);
		opacity:				0
	}
  	100% {
    	transform: 			scale(1);
    	-webkit-transform: 	scale(1);
		opacity:				1
	}
}

/*
 *====================================================================
 *													SHOW THUMB BAR
 *====================================================================
 */

.fadeInThumbBar {
  	-webkit-animation: 		fadeInThumbBar 0.5s;
  	-moz-animation: 			fadeInThumbBar 0.5s;
  	animation:				fadeInThumbBar 0.5s;
	opacity:					1
}

@-webkit-keyframes fadeInThumbBar {
 	0% {
		opacity:				0;
		bottom:				-150px
	}
  	100% {
		opacity:				1;
		bottom:				0;
	}
}

@-moz-keyframes fadeInThumbBar {
  	0% {
    	opacity:				0;
		bottom:				-150px
	}
  	100% {
    	opacity:				1;
		bottom:				0;
	}
}

@keyframes fadeInThumbBar {
  	0% {
    	opacity:				0;
		bottom:				-150px
	}
  	100% {
    	opacity:				1;
		bottom:				0;
	}
}

/*
 *====================================================================
 *														HIDE THUMB BAR
 *====================================================================
 */

.fadeOutThumbBar {
  	-webkit-animation: 		fadeOutThumbBar 0.5s;
  	-moz-animation: 			fadeOutThumbBar 0.5s;
  	animation:				fadeOutThumbBar 0.5s;
	opacity:					0;
	bottom:					-150px;
}

@-webkit-keyframes fadeOutThumbBar {
 	0% {
		opacity:				1;
		bottom:				0px
	}
  	100% {
		opacity:				0;
		bottom:				-150px;
	}
}

@-moz-keyframes fadeOutThumbBar {
  	0% {
    	opacity:				1;
		bottom:				0px
	}
  	100% {
    	opacity:				0;
		bottom:				-150px;
	}
}

@keyframes fadeOutThumbBar {
  	0% {
    	opacity:				1;
		bottom:				0px
	}
  	100% {
    	opacity:				0;
		bottom:				-150px;
	}
}