$height: 508px;
$width: $height * 0.47244;
$screenwidth: $width * 0.85;
$screenheight: $height * 0.7126;
$topscreen: $height * 0.1437;
$leftscreen: $width * 0.075;
$screengap: 70px;
$screengap_small: 50px;
$depth: 30px;
$gap: 30px;
/* 
real cornerheight should be ( $gap * sin 45° ) / sin 112.5°
(could be done using Compass)
*/
$cornerheight: 23px;
/* moves the pseudo elements inside */
$cornerpush: 7px;
$radius: 34px;
$fill: #181818;
$time: 0.7s;
$bgcolor: #7c909c;

*, 
*:after, 
*:before { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
}

body {
	color: #fff;
	font-family: 'Lato', Arial, sans-serif;
	background: #d2d1d5;
}

.ms-wrapper {
	position: relative;
	margin: 0 auto 100px;
	width: 100%;
	max-width: 65em;
	padding: 0 1em;
}

.ms-perspective {
	position: relative;
	margin: 0px auto;
	width: $width;
	height: $height;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
	-webkit-perspective-origin: 50% 0%;
	-moz-perspective-origin: 50% 0%;
	perspective-origin: 50% 0%;
}

.ms-device {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform $time ease-in-out;
	-moz-transition: -moz-transform $time ease-in-out;
	transition: transform $time ease-in-out;
	-webkit-transform: rotateY(17deg) rotateX(10deg);
	-moz-transform: rotateY(17deg) rotateX(10deg);
	transform: rotateY(17deg) rotateX(10deg);
}

.ms-device,
.ms-object,
.ms-object > div,
.ms-screens a {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.ms-object {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	transition: transform 0.4s;
}

.ms-object > div {
	position: absolute;
	display: block;
	background: $fill;
}

.ms-front,
.ms-back {
	width: $width;
	height: $height;
	border-radius: $radius;
}

.ms-top,
.ms-bottom {
	width: $depth;
	height: ($width - $gap*2);
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

.ms-left,
.ms-right {
	width: $depth;
	height: ($height - $gap*2);
}

.ms-object .ms-front {
	background: $fill url(../images/iPhone5_front.png) no-repeat top left;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}

.ms-front { 
	-webkit-transform: rotateY(0deg) translateZ($depth/2); 
	-moz-transform: rotateY(0deg) translateZ($depth/2); 
	transform: rotateY(0deg) translateZ($depth/2); 
}
.ms-back { 
	-webkit-transform: rotateX(180deg) translateZ($depth/2);
	-moz-transform: rotateX(180deg) translateZ($depth/2);
	transform: rotateX(180deg) translateZ($depth/2);
}
.ms-right {
	-webkit-transform: translateY($gap) rotateY(90deg) translateZ($width - $depth/2); 
	-moz-transform: translateY($gap) rotateY(90deg) translateZ($width - $depth/2); 
	transform: translateY($gap) rotateY(90deg) translateZ($width - $depth/2); 
}

.ms-left { 
	-webkit-transform: translateY($gap) rotateY(-90deg) translateZ($depth/2);
	-moz-transform: translateY($gap) rotateY(-90deg) translateZ($depth/2);
	transform: translateY($gap) rotateY(-90deg) translateZ($depth/2); 
} 

.ms-top { 
	-webkit-transform: rotateZ(-90deg) translateY($gap - $depth/2) rotateY(90deg);
	-moz-transform: rotateZ(-90deg) translateY($gap - $depth/2) rotateY(90deg);
	transform: rotateZ(-90deg) translateY($gap - $depth/2) rotateY(90deg);
}

.ms-bottom { 
	-webkit-transform: rotateZ(-90deg) translateY($gap - $depth/2) rotateY(-90deg) translateZ($height); 
	-moz-transform: rotateZ(-90deg) translateY($gap - $depth/2) rotateY(-90deg) translateZ($height); 
	transform: rotateZ(-90deg) translateY($gap - $depth/2) rotateY(-90deg) translateZ($height); 
}

.ms-side:before, 
.ms-side:after {
	position: absolute;
	top: -25px;
	left: 0;
	width: $depth;
	height: $cornerheight;
	background: #181818;
	background: -webkitlinear-gradient(bottom, #181818 0%, #333 100%);
	background: -moz-linear-gradient(bottom, #181818 0%, #333 100%);
	background: linear-gradient(to top, #181818 0%, #333 100%);
	content: "";
	-webkit-transform: rotateX(22.5deg) translateZ(-$cornerpush);
	-moz-transform: rotateX(22.5deg) translateZ(-$cornerpush);
	transform: rotateX(22.5deg) translateZ(-$cornerpush);
}

.ms-side:after {
	top: 100%;
	background: -webkit-linear-gradient(top,  #181818 0%,#333 100%);
	background: -moz-linear-gradient(top,  #181818 0%,#333 100%);
	background: linear-gradient(to bottom,  #181818 0%,#333 100%);
	-webkit-transform: rotateX(-22.5deg) translateZ(-$cornerpush);
	-moz-transform: rotateX(-22.5deg) translateZ(-$cornerpush);
	transform: rotateX(-22.5deg) translateZ(-$cornerpush);
}

/* Screens */
.ms-screens a {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ms-screens > a {
	position: absolute;
	width: $screenwidth;
	height: $screenheight;
	top: $topscreen;
	left: $leftscreen;
	outline: none;
	display: block;
	cursor: pointer;
	opacity: 1;
	-webkit-transition: -webkit-transform 0.7s, opacity 0.4s;
	transition: -moz-transform 0.7s, opacity 0.4s;
	transition: transform 0.7s, opacity 0.4s;
	-webkit-transform: translateZ($depth/2 + 1px);
	-moz-transform: translateZ($depth/2 + 1px);
	transform: translateZ($depth/2 + 1px);
}

.ms-screens > a::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.ms-label {
	border: 3px solid #fff;
	color: #fff;
	position: absolute;
	left: 100%;
	margin-left: 18px;
	width: 200px;
	padding: 10px;
	opacity: 0;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transition: opacity $time, -webkit-transform $time;
	-moz-transition: opacity $time, -moz-transform $time;
	transition: opacity $time, transform $time;
}

.ms-screens > a:hover .ms-label {
	border-color: #687fa7;
	color: #687fa7;
}

.ms-label::after {
	right: 100%;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-right-color: #d9382e;
	border-width: 16px;
	top: 50%;
	margin-top: -16px;
}

.ms-label::after, 
.ms-label::before {
	right: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.ms-label::after {
	border-color: transparent;
	border-right-color: #d2d1d5;
	border-width: 12px;
	top: 50%;
	margin-top: -12px;
}

.ms-label::before {
	border-color: transparent;
	border-right-color: #fff;
	border-width: 16px;
	top: 50%;
	margin-top: -16px;
}

.ms-screens > a:hover .ms-label::before {
	border-right-color: #687fa7;
}

.ms-wrapper button {
	background: transparent;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1px;
	padding: 10px 30px;
	border: 3px solid #fff;
	color: #fff;
	position: absolute;
	top: 1em;
	left: 1em;
	text-transform: uppercase;
}

.ms-wrapper button:hover {
	border-color: #687fa7;
	color: #687fa7;
}

// Toggle view (for all effects)
@for $i from 1 through 5 {
	.ms-view-layers .ms-screens .ms-screen-#{$i} { 
		-webkit-transform: translateZ($depth/2 + $screengap_small * $i);
		-moz-transform: translateZ($depth/2 + $screengap_small * $i);
		transform: translateZ($depth/2 + $screengap_small * $i);
		-webkit-transition-delay: ((6-$i) * 0.1s ) + 0.2s;
		-moz-transition-delay: ((6-$i) * 0.1s ) + 0.2s;
		transition-delay: ((6-$i) * 0.1s ) + 0.2s;
		opacity: 0.9;
	}
}

.ms-view-layers .ms-screens > a:hover::after {
	opacity: 1;
}

.ms-view-layers .ms-label {
	opacity: 1;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

@for $i from 1 through 5 {
	.ms-view-layers .ms-screen-#{$i} .ms-label { 
		-webkit-transition-delay: ((6-$i) * 0.1s ) + 0.6s;
		-moz-transition-delay: ((6-$i) * 0.1s ) + 0.6s;
		transition-delay: ((6-$i) * 0.1s ) + 0.6s;
	}
}

// First Effect
.ms-effect-1.ms-view-layers .ms-device {
	-webkit-transform: rotateY(50deg) rotateX(20deg) translateZ(-$depth/2) translateZ(-$height/2 + $depth);
	-moz-transform: rotateY(50deg) rotateX(20deg) translateZ(-$depth/2) translateZ(-$height/2 + $depth);
	transform: rotateY(50deg) rotateX(20deg) translateZ(-$depth/2) translateZ(-$height/2 + $depth);
}

@for $i from 1 through 5 {
	.ms-effect-1 .ms-screens .ms-screen-#{$i} { 
		background: url("../images/screen1_#{$i}.png") no-repeat center center;
	}
}


@for $i from 1 through 5 {
	.ms-effect-1.ms-view-layers .ms-screens .ms-screen-#{$i} { 
		-webkit-transform: translateZ($depth/2 + $screengap * $i);
		-moz-transform: translateZ($depth/2 + $screengap * $i);
		transform: translateZ($depth/2 + $screengap * $i);
	}
}

// Second Effect
.ms-effect-2 .ms-device {
	-webkit-transform: rotateY(-17deg) rotateX(10deg);
	-moz-transform: rotateY(-17deg) rotateX(10deg);
	transform: rotateY(-17deg) rotateX(10deg);
}

.ms-effect-2.ms-view-layers .ms-device {
	-webkit-transform: rotateX(90deg) rotateZ(-140deg) translateZ(-$depth/2) translateZ(-$height/4 + $depth);
	-moz-transform: rotateX(90deg) rotateZ(-140deg) translateZ(-$depth/2) translateZ(-$height/4 + $depth);
	transform: rotateX(90deg) rotateZ(-140deg) translateZ(-$depth/2) translateZ(-$height/4 + $depth);
}

@for $i from 1 through 5 {
	.ms-effect-2 .ms-screens .ms-screen-#{$i} { 
		background: url("../images/screen2_#{$i}.png") no-repeat center center;
	}
}

// Third effect 
.ms-effect-3.ms-view-layers .ms-device {
	-webkit-transform: rotateY(-30deg) rotateX(90deg) translateZ(-$depth/2) translateZ(-$height/4 + $depth);
	-moz-transform: rotateY(-30deg) rotateX(90deg) translateZ(-$depth/2) translateZ(-$height/4 + $depth);
	transform: rotateY(-30deg) rotateX(90deg) translateZ(-$depth/2) translateZ(-$height/4 + $depth);
}


@for $i from 1 through 5 {
	.ms-effect-3 .ms-screens .ms-screen-#{$i} { 
		background: url("../images/screen1_#{$i}.png") no-repeat center center;
	}
}

@media screen and (max-width: 560px) {
	.ms-wrapper button {
		position: relative;
		margin: 0 auto;
		left: auto;
		top: auto;
		display: block;
		margin-bottom: 30px
	}
}
