.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("../images/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 x Plus*/
.device-mockup.iphone_x,
.device-mockup.iphone6_x.portrait {
	padding-bottom: 201.76%;
}

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

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

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


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

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

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

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