/*
 *	HTML5 Device Mockups
 *
 */
 /* 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;
}

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

/* DEVICES */

.device-mockup[data-device="iphone14"],
.device-mockup[data-device="iphone14"][data-orientation="portrait"] {
	padding-bottom: 202.19%;
}

.device-mockup[data-device="iphone14"] > .device,
.device-mockup[data-device="iphone14"][data-color="black"] > .device,
.device-mockup[data-device="iphone14"][data-orientation="portrait"][data-color="black"] > .device {
	background-image: url("iphone14_pro_black.png");
}

.device-mockup[data-device="iphone14"] > .device > .screen,
.device-mockup[data-device="iphone14"][data-orientation="portrait"] > .device > .screen {
	top: 3.58%; bottom: 1%; left: 4.8%; right: 4.8%;
	z-index: -1;
}