/*==========================================================================
# Device Presentation style - begin
========================================================================== */

.edgtf-device-presentation {
	position: relative;
	text-align: center;
	overflow: hidden;

	.edgtf-device-presentation-inner {
		@include edgtfTransform(translateY(27%));
		margin-top: -6.8%;
	}

	%absolute {
		position: absolute;
		top:0;
		left: 0;
		height: 100%;
		width: 100%;
	}

	.edgtf-hero-image-holder {
		display: inline-block;
		position: relative;
		z-index: 1000;
		max-width: 38%; // 725/1920 etc.

		.edgtf-hero-image-holder-inner {
			position: absolute;
			top: 4.2%;
			left: 3.35%;
			height: 71.1%;
			width: 92.7%;
		}
	}

	.edgtf-left-tablet-image-holder {
		position: absolute;
		bottom: 13.5%;
		left: 21%;
		max-width: 18%;
		z-index: 500;
	}

	.edgtf-right-tablet-image-holder {
		position: absolute;
		bottom: 5%;
		right: 21%;
		max-width: 18%;
		z-index: 1500;
	}

	.edgtf-tablet-image-holder-inner {
		position: absolute;
		top: 8.3%;
		left: 6%;
		height: 82%;
		width: 87%;
	}


	.edgtf-phone-image-holder {
		position: absolute;
		bottom: 6%;
		right: 16%;
		max-width: 7%;
		z-index: 2000;

		&.edgtf-x-flip {
			left: 16%;
			right: auto;
			@include edgtfTransform(scaleX(-1));
		}

		.edgtf-phone-image-holder-inner {
			position: absolute;
			top: 15%;
			left: 9.5%;
			height: 76%;
			width: 91.5%;
			@include edgtfTransform(perspective(600px) rotateY(28deg) skewY(17deg));

			&:after {
				content: '';
				@extend %absolute;
				background-color: rgba(255,255,255,.1);
				@include edgtfTransition(opacity .3s $transition-easing);
				opacity: 0;
			}
		}

		a:hover {
			.edgtf-phone-image-holder-inner:after {
				opacity: 1;
			}
		}
	}

	//common
	.edgtf-device-presentation-inner > div > div {
		background-color: #333;
	}

	a:not(.edgtf-phone-link) {
		@extend %absolute;
		z-index: 300;

		&:after {
			content: '';
			@extend %absolute;
			background-color: rgba(255,255,255,.1);
			@include edgtfTransition(opacity .3s $transition-easing);
			opacity: 0;
		}

		&:hover {
			&:after {
				opacity: 1;
			}
		}
	}

	img {
		position: relative;
		z-index: 200;
		transform: translateZ(0); //flicker fix
	}

	.edgtf-device-presentation-image {
		@extend %absolute;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
	}

	&.edgtf-animate-on-appear {
		visibility: hidden;

		.no-touch & {
			visibility: visible;

			.edgtf-hero-image-holder { 
				@include edgtfTransform(translate3d(0, 100%, 0));
				opacity: 0;
			}

			.edgtf-left-tablet-image-holder { 
				@include edgtfTransform(translate3d(70%, 0, 0));
				opacity: 0;
			}

			.edgtf-right-tablet-image-holder { 
				@include edgtfTransform(translate3d(-35%, 0, 0));
				opacity: 0;
			}

			.edgtf-phone-image-holder {
				opacity: 0;

				&:not(.edgtf-x-flip) {
					@include edgtfTransform(translate3d(-80%, 0, 0));
				}

				&.edgtf-x-flip {
					@include edgtfTransform(translate3d(80%, 0, 0) scaleX(-1));
				}
			}

			$opacity-duration: .25s;
			$transform-duration: .6s;
			$prim-delay: .4s;
			$sec-delay: .6s;

			&.edgtf-appeared {
				.edgtf-hero-image-holder {
					@include edgtfTransform(translate3d(0, 0, 0));
					opacity: 1;
					-webkit-transition: opacity $opacity-duration $transition-easing, -webkit-transform $transform-duration $transition-easing;
					transition: opacity $opacity-duration $transition-easing, transform $transform-duration $transition-easing;
				}

				.edgtf-left-tablet-image-holder {
					@include edgtfTransform(translate3d(0, 0, 0));
					opacity: 1;
					-webkit-transition: opacity $opacity-duration $transition-easing $prim-delay, -webkit-transform $transform-duration $transition-easing $prim-delay;
					transition: opacity $opacity-duration $transition-easing $prim-delay, transform $transform-duration $transition-easing $prim-delay;
				}

				.edgtf-right-tablet-image-holder {
					@include edgtfTransform(translate3d(0, 0, 0));
					opacity: 1;
					-webkit-transition: opacity $opacity-duration $transition-easing $prim-delay, -webkit-transform $transform-duration $transition-easing $prim-delay;
					transition: opacity $opacity-duration $transition-easing $prim-delay, transform $transform-duration $transition-easing $prim-delay;
				}

				.edgtf-phone-image-holder{ 
					opacity: 1;
					-webkit-transition: opacity $opacity-duration $transition-easing $sec-delay, -webkit-transform $transform-duration $transition-easing $sec-delay;
					transition: opacity $opacity-duration $transition-easing $sec-delay, transform $transform-duration $transition-easing $sec-delay;

					&:not(.edgtf-x-flip)  {
						@include edgtfTransform(translate3d(0, 0, 0));
					}

					&.edgtf-x-flip {
						@include edgtfTransform(translate3d(0, 0, 0) scaleX(-1));
					}
				}
			}
		}	

		.touch & {
			visibility: visible;
		}	
	}

	&.edgtf-animated {
		.no-touch & {
			.edgtf-device-presentation-inner {
				.edgtf-hero-image-holder,
				.edgtf-left-tablet-image-holder,
				.edgtf-right-tablet-image-holder,
				.edgtf-phone-image-holder { 
					@include edgtfTransition(all .4s $transition-easing);

					&:not(.edgtf-x-flip):hover {
						@include edgtfTransform(translate3d(0, -22px, 0));
					}

					&.edgtf-x-flip:hover {
						@include edgtfTransform(translate3d(0, -22px, 0) scaleX(-1));
					}
				}
			}
		}		
	}
}

/* ==========================================================================
# Device Presentation style - end
==========================================================================*/