/*
 *	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 */

/* iMac */

/* MacBook Pro */

/* MacBook 2015 */

/* iPhone 5 */

.device-mockup.iphone5,.device-mockup.iphone5.portrait {
  padding-bottom: 210.57%;
}

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

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

.device-mockup.iphone5 > .device > .screen,.device-mockup.iphone5.portrait > .device > .screen {
  top: 14.78%;
  bottom: 13.78%;
  left: 8.77%;
  right: 7.77%;
}

.device-mockup.iphone5 > .device > .button,.device-mockup.iphone5.portrait > .device > .button {
  display: block;
  top: 88.3%;
  bottom: 2.5%;
  left: 40%;
  right: 40%;
}

/* iPhone SE */

/* iPhone 6 */

.device-mockup.iphone6,.device-mockup.iphone6.portrait {
  padding-bottom: 207.19%;
}

.device-mockup.iphone6 > .device,.device-mockup.iphone6.black > .device,.device-mockup.iphone6.portrait.black > .device {
  background-image: url("iphone_6/iphone_6_port_black.png");
}

.device-mockup.iphone6.white > .device,.device-mockup.iphone6.portrait.white > .device {
  background-image: url("iphone_6/iphone_6_port_white.png");
}

.device-mockup.iphone6 > .device > .screen,.device-mockup.iphone6.portrait > .device > .screen {
  top: 12.58%;
  bottom: 12.88%;
  left: 6.77%;
  right: 6.77%;
}

.device-mockup.iphone6 > .device > .button,.device-mockup.iphone6.portrait > .device > .button {
  display: block;
  top: 88.6%;
  bottom: 3.2%;
  left: 42%;
  right: 42%;
}

/* iPhone 6 Plus*/

/* iPad */

.device-mockup.ipad,.device-mockup.ipad.portrait {
  padding-bottom: 128.406276%;
}

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

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

.device-mockup.ipad > .device > .screen,.device-mockup.ipad.portrait > .device > .screen {
  top: 12.025723%;
  bottom: 12.154341%;
  left: 13.45995%;
  right: 13.45995%;
}

.device-mockup.ipad > .device > .button,.device-mockup.ipad.portrait > .device > .button {
  display: block;
  top: 90.2%;
  bottom: 5.5%;
  left: 47.3%;
  right: 47.3%;
}

/* iPad Air */

/* iPad Air 2 */

/* iPad Pro */

/* Galaxy S3 */

/* Galaxy S5 */

/* Galaxy Tab4 */

/* Lumia 920 */

/* Nexus 7 */

/* Microsoft Surface */

/* Samsung TV */