main{
    /*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
}

main.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:				0px

}

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

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

.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;
    }
}