﻿
.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;
}

.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;
}


/* 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("../img/iphone_6_plus_black_port.png");
}

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

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

.device-mockup.iphone6_plus.landscape.white > .device {
	background-image: url("../img/iphone_6_plus_white_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%;
}
