/* GENERAL STYLE */
 
 @media only screen and (min-width: 768px) {    

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

		/* Nexus 6 */
.device-mockup[data-device="nexus6"],
.device-mockup[data-device="nexus6"][data-orientation="portrait"] {
    padding-bottom: 189.751958225%;
}

.device-mockup[data-device="nexus6"][data-orientation="landscape"] {
    padding-bottom: 52.700378397%;
}

.device-mockup[data-device="nexus6"] > .device,
.device-mockup[data-device="nexus6"][data-orientation="portrait"] > .device {
	background-image: url("../img/devices/nexus_6/nexus_6_port.png");
}

.device-mockup[data-device="nexus6"][data-orientation="landscape"] > .device {
	background-image: url("../img/devices/nexus_6/nexus_6_land.png");
}

.device-mockup[data-device="nexus6"] > .device > .screen,
.device-mockup[data-device="nexus6"][data-orientation="portrait"] > .device > .screen {
    top: 7.5%; bottom: 7.5%; left: 7%; right: 7%;
}

.device-mockup[data-device="nexus6"][data-orientation="landscape"] > .device > .screen {
    top: 7%; bottom: 7%; left: 7.5%; right: 7.5%;
}

/* Pixel */
.device-mockup[data-device="pixel"],
.device-mockup[data-device="pixel"][data-orientation="portrait"] {
    padding-bottom: 189.751958225%;
}

.device-mockup[data-device="pixel"][data-orientation="landscape"] {
    padding-bottom: 52.700378397%;
}

.device-mockup[data-device="pixel"] > .device,
.device-mockup[data-device="pixel"][data-orientation="portrait"] > .device {
	background-image: url("../img/devices/pixel/pixel_port.png");
}

.device-mockup[data-device="pixel"][data-orientation="landscape"] > .device {
	background-image: url("../img/devices/pixel/pixel_land.png");
}

.device-mockup[data-device="pixel"] > .device > .screen,
.device-mockup[data-device="pixel"][data-orientation="portrait"] > .device > .screen {
    top: 7.5%; bottom: 7.5%; left: 7%; right: 7%;
}

.device-mockup[data-device="pixel"][data-orientation="landscape"] > .device > .screen {
    bottom: 5.3%;
    left: 9.84%;
    right: 11.6%;
    top: 5.5%;
}

 }