// Depth effects
.dpr-shadow-0 {
  @include box-shadow ( none !important );

}
.dpr-shadow-1 {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.dpr-shadow-2 {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.dpr-shadow-3 {
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.dpr-shadow-4 {
  -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
.dpr-shadow-5 {
  -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}
.dpr-shadow-6 {
  -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.dpr-shadow-custom {
  -webkit-box-shadow: 0 2px 2px 0 rgba(134, 83, 219, 0.14), 0 1px 5px 0 rgba(134, 83, 219, 0.12), 0 3px 1px -2px rgba(134, 83, 219, 0.3);
  -moz-box-shadow: 0 2px 2px 0 rgba(134, 83, 219, 0.14), 0 1px 5px 0 rgba(134, 83, 219, 0.12), 0 3px 1px -2px rgba(134, 83, 219, 0.3);
  box-shadow: 0 2px 2px 0 rgba(134, 83, 219, 0.14), 0 1px 5px 0 rgba(134, 83, 219, 0.12), 0 3px 1px -2px rgba(134, 83, 219, 0.3);
}

// Hover depth effects

.dpr-shadow-onhover-0, 
.dpr-shadow-onhover-1, 
.dpr-shadow-onhover-2, 
.dpr-shadow-onhover-3, 
.dpr-shadow-onhover-4, 
.dpr-shadow-onhover-5, 
.dpr-shadow-onhover-6  {
	@include transition( box-shadow .25s );
}

.dpr-shadow-onhover-0:hover {
  @include box-shadow ( none !important );

}
.dpr-shadow-onhover-1:hover {
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.dpr-shadow-onhover-2:hover {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.dpr-shadow-onhover-3:hover{
  -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.dpr-shadow-onhover-4:hover {
  -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
.dpr-shadow-onhover-5:hover {
  -webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}
.dpr-shadow-onhover-6:hover {
  -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}

// Hover scale effects
.dpr-downscale-onhover-1,
.dpr-downscale-onhover-2,
.dpr-upscale-onhover-1, 
.dpr-upscale-onhover-2, 
.dpr-upscale-onhover-3, 
.dpr-upscale-onhover-4  {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
			transform: translateZ(0);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			-moz-osx-font-smoothing: grayscale;
			-webkit-transition-duration: 0.3s;
			-moz-transition-duration: 0.3s;
			-o-transition-duration:0.3s;
			transition-duration: 0.3s;
			-webkit-transition-property: transform;
			transition-property: transform;
}
.dpr-downscale-onhover-1:hover {
		-webkit-transform: scale(0.97);
		-moz-transform: scale(0.97);
		-ms-transform: scale(0.97);
		-o-transform: scale(0.97);
		transform: scale(0.97);
}
.dpr-downscale-onhover-2:hover {
		-webkit-transform: scale(0.94);
		-moz-transform: scale(0.94);
		-ms-transform: scale(0.94);
		-o-transform: scale(0.94);
		transform: scale(0.94);
}

.dpr-upscale-onhover-1:hover {
		-webkit-transform: scale(1.03);
		-moz-transform: scale(1.03);
		-ms-transform: scale(1.03);
		-o-transform: scale(1.03);
		transform: scale(1.03);
}
.dpr-upscale-onhover-2:hover {
		-webkit-transform: scale(1.06);
		-moz-transform: scale(1.06);
		-ms-transform: scale(1.06);
		-o-transform: scale(1.06);
		transform: scale(1.06);
}
.dpr-upscale-onhover-3:hover {
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
		transform: scale(1.1);
}
.dpr-upscale-onhover-4:hover {
		-webkit-transform: scale(1.15);
		-moz-transform: scale(1.15);
		-ms-transform: scale(1.15);
		-o-transform: scale(1.15);
		transform: scale(1.16);
}

//Hover translate effets
.dpr-up-onhover-1,
.dpr-up-onhover-2,
.dpr-up-onhover-3,
.dpr-up-onhover-4,
.dpr-down-onhover-1, 
.dpr-down-onhover-2,
.dpr-down-onhover-3,
.dpr-down-onhover-4,
.dpr-up-left-onhover-1,
.dpr-up-left-onhover-2,
.dpr-up-left-onhover-3,
.dpr-up-left-onhover-4,
.dpr-up-right-onhover-1,
.dpr-up-right-onhover-2,
.dpr-up-right-onhover-3,
.dpr-up-right-onhover-4,
dpr-down-left-onhover-1,
dpr-down-left-onhover-2,
dpr-down-left-onhover-3,
dpr-down-left-onhover-4,
dpr-down-right-onhover-1,
dpr-down-right-onhover-2,
dpr-down-right-onhover-3,
dpr-down-right-onhover-4 {
-webkit-transition: all .3s; 
}

.dpr-up-onhover-1:hover {
	transform: translateY(-5px);
}
.dpr-up-onhover-2:hover {
	transform: translateY(-10px);
}
.dpr-up-onhover-3:hover {
	transform: translateY(-15px);
}
.dpr-up-onhover-4:hover {
	transform: translateY(-20px);
}
.dpr-down-onhover-1:hover {
	transform: translateY(5px);
}
.dpr-down-onhover-2:hover {
	transform: translateY(10px);
}
.dpr-down-onhover-3:hover {
	transform: translateY(15px);
}
.dpr-down-onhover-4:hover {
	transform: translateY(20px);
}
.dpr-up-left-onhover-1:hover {
	transform: translate(-5px, -5px)
}
.dpr-up-left-onhover-2:hover {
	transform: translate(-10px, -10px)
}
.dpr-up-left-onhover-3:hover {
	transform: translate(-15px, -15px)
}
.dpr-up-left-onhover-4:hover {
	transform: translate(-20px, -20px)
}
.dpr-up-right-onhover-1:hover {
	transform: translate(5px, -5px)
}
.dpr-up-right-onhover-2:hover {
	transform: translate(10px, -10px)
}
.dpr-up-right-onhover-3:hover {
	transform: translate(15px, -15px)
}
.dpr-up-right-onhover-4:hover {
	transform: translate(20px, -20px)
}
.dpr-down-left-onhover-1:hover {
	transform: translate(-5px, 5px)
}
.dpr-down-left-onhover-2:hover {
	transform: translate(-10px, 10px)
}
.dpr-down-left-onhover-3:hover {
	transform: translate(-15px, 15px)
}
.dpr-down-left-onhover-4:hover {
	transform: translate(-20px, 20px)
}
.dpr-down-right-onhover-1:hover {
	transform: translate(5px, 5px)
}
.dpr-down-right-onhover-2:hover {
	transform: translate(10px, 10px)
}
.dpr-down-right-onhover-3:hover {
	transform: translate(15px, 15px)
}
.dpr-down-right-onhover-4:hover {
	transform: translate(20px, 20px)
}

@-webkit-keyframes animatedGradient {
  0% {
    background-position: 0% 50%; 
	}
  50% {
    background-position: 100% 50%; 
	}
  100% {
    background-position: 0% 50%; 
	} 
}

@keyframes animatedGradient {
  0% {
    background-position: 0 50%; 
	}
  50% {
    background-position: 100% 50%; 
	}
  100% {
    background-position: 0 50%; 
	} 
}


