/*
 *	HTML5 Device Mockups
 *
 *	By:
 *		Tomi Hiltunen
 *		tomi@mitakuuluu.fi
 *		http://fi.linkedin.com/in/tomihiltunen/
 *
 *		Angelos Arnis
 *		http://fi.linkedin.com/in/angelosarnis/
 *
 *	Inluded in this package:
 *		- iPhone5 (black/white, portrait/landscape)
 *		- iPad2 (black/white, portrait/landscape)
 *		- iMac
 *		- MacBook Pro (retina model)
 *		- Nexus 7
 *		- Lumia 920
 *		- Microsoft Surface
 *		- Galaxy S3
 *
 *  Added by ben182 (@beno182):
 *		- iPhone 6
 *  	- iPhone 6 Plus
 *		- iPhone SE
 *		- iPad Air
 *		- iPad Air 2
 *		- iPad Pro
 *		- Macbook 2015
 *
 *
 */

 /* GENERAL STYLE */

.device-mockup {
	position: relative;
	width: 100%;
	padding-bottom: 61.775701%;
}

	.device-mockup > .device {
		position: absolute;
		top: 0; bottom: 0; left: 0; right: 0;
		width: 100%; height: 100%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url("macbook/macbook.png");
	}

		.device-mockup > .device > .screen {
			position: absolute;
			top:    11.0438729%;
			bottom: 14.6747352%;
			left:   13.364486%;
			right:  13.364486%;
			overflow: hidden;
		}

		.device-mockup > .device > .button {
			position: absolute;
			top: 0; left: 0;
			display: none;
			overflow: hidden;
			border-radius: 100%;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			cursor: pointer;
		}

/* DEVICES */

/* iPhone 6 Plus*/
.device-mockup.iphone6_plus,
.device-mockup.iphone6_plus.portrait {
	padding-bottom: 201.76%;
}

.device-mockup.iphone6_plus.landscape {
	padding-bottom: 49.56%;
}

.device-mockup.iphone6_plus > .device,
.device-mockup.iphone6_plus.black > .device,
.device-mockup.iphone6_plus.portrait.black > .device {
	background-image: url("iphone_6_plus/iphone_6_plus_black_port.png");
}

.device-mockup.iphone6_plus.landscape > .device,
.device-mockup.iphone6_plus.landscape.black > .device {
	background-image: url("iphone_6_plus/iphone_6_plus_black_land.png");
}

.device-mockup.iphone6_plus.white > .device,
.device-mockup.iphone6_plus.portrait.white > .device {
	background-image: url("iphone_6_plus/iphone_6_plus_white_port.png");
}

.device-mockup.iphone6_plus.landscape.white > .device {
	background-image: url("iphone_6_plus/iphone_6_plus_white_land.png");
}

.device-mockup.iphone6_plus.gold > .device,
.device-mockup.iphone6_plus.portrait.gold > .device {
	background-image: url("iphone_6_plus/iphone_6_plus_gold_port.png");
}

.device-mockup.iphone6_plus.landscape.gold > .device {
	background-image: url("iphone_6_plus/iphone_6_plus_gold_land.png");
}

.device-mockup.iphone6_plus > .device > .screen,
.device-mockup.iphone6_plus.portrait > .device > .screen {
    top: 11.58%; bottom: 11.58%; left: 5.97%; right: 5.97%;
}

.device-mockup.iphone6_plus.landscape > .device > .screen {
    top: 5.97%; bottom: 5.97%; left: 11.38%; right: 11.58%;
}

.device-mockup.iphone6_plus > .device > .button,
.device-mockup.iphone6_plus.portrait > .device > .button {
	display: block;
    top: 89.9%; bottom: 3.2%; left: 43%; right: 43%;
}

.device-mockup.iphone6_plus.landscape > .device > .button {
	display: block;
	top: 43%; bottom: 43%; left: 89.9%; right: 3.2%;
}