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


.device-mockup1 {
	position: relative;
	width: 100%;
	padding-bottom: 61.775701%;
}

	.device-mockup1 > .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-mockup1 > .device > .screen {
			position: absolute;
			top:    11.0438729%;
			bottom: 14.6747352%;
			left:   13.364486%;
			right:  13.364486%;
			overflow: hidden;
		}

		.device-mockup1 > .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;
		}
		
		
.device-mockup2 {
	position: relative;
	width: 100%;
	padding-bottom: 61.775701%;
}

	.device-mockup2 > .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-mockup2 > .device > .screen {
			position: absolute;
			top:    11.0438729%;
			bottom: 14.6747352%;
			left:   13.364486%;
			right:  13.364486%;
			overflow: hidden;
		}

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

.device-mockup3 {
	position: relative;
	width: 100%;
	padding-bottom: 61.775701%;
}

	.device-mockup3 > .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-mockup3 > .device > .screen {
			position: absolute;
			top:    11.0438729%;
			bottom: 14.6747352%;
			left:   13.364486%;
			right:  13.364486%;
			overflow: hidden;
		}

		.device-mockup3 > .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 */

/* emergency_led*/
.device-mockup.emergency_led,
.device-mockup.emergency_led.portrait {
	padding-bottom: 201.76%;
}

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

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

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

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

.device-mockup.emergency_led.landscape.white > .device {
	background-image: url("../img/led.png");
}

.device-mockup.emergency_led.gold > .device,
.device-mockup.emergency_led.portrait.gold > .device {
	background-image: url("../img/led.png");
}

.device-mockup.emergency_led.landscape.gold > .device {
	background-image: url("../img/led.png");
}

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

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

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

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

/* emergency*/
.device-mockup1.emergency,
.device-mockup1.emergency.portrait {
	padding-bottom: 201.76%;
}

.device-mockup1.emergency.landscape {
	padding-bottom: 49.56%;
}

.device-mockup1.emergency > .device,
.device-mockup1.emergency.black > .device,
.device-mockup1.emergency.portrait.black > .device {
	background-image: url("../img/giftbox.png");
}

.device-mockup1.emergency.landscape > .device,
.device-mockup1.emergency.landscape.black > .device {
	background-image: url("../img/giftbox.png");
}

.device-mockup1.emergency.white > .device,
.device-mockup1.emergency.portrait.white > .device {
	background-image: url("../img/giftbox.png");
}

.device-mockup1.emergency.landscape.white > .device {
	background-image: url("../img/giftbox.png");
}

.device-mockup1.emergency.gold > .device,
.device-mockup1.emergency.portrait.gold > .device {
	background-image: url("../img/giftbox.png");
}

.device-mockup1.emergency.landscape.gold > .device {
	background-image: url("../img/giftbox.png");
}

.device-mockup1.emergency > .device > .screen,
.device-mockup1.emergency.portrait > .device > .screen {
    top: 11.58%; bottom: 11.58%; left: 5.97%; right: 5.97%;
}

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

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

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

/* sakelar*/
.device-mockup2.sakelar,
.device-mockup2.sakelar.portrait {
	padding-bottom: 201.76%;
}

.device-mockup2.sakelar.landscape {
	padding-bottom: 49.56%;
}

.device-mockup2.sakelar > .device,
.device-mockup2.sakelar.black > .device,
.device-mockup2.sakelar.portrait.black > .device {
	background-image: url("../img/sakelar.png");
}

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

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

.device-mockup2.sakelar.landscape.white > .device {
	background-image: url("../img/sakelar.png");
}

.device-mockup2.sakelar.gold > .device,
.device-mockup2.sakelar.portrait.gold > .device {
	background-image: url("../img/sakelar.png");
}

.device-mockup2.sakelar.landscape.gold > .device {
	background-image: url("../img/sakelar.png");
}

.device-mockup2.sakelar > .device > .screen,
.device-mockup2.sakelar.portrait > .device > .screen {
    top: 11.58%; bottom: 11.58%; left: 5.97%; right: 5.97%;
}

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

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

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

/* raket*/
.device-mockup3.raket,
.device-mockup3.raket.portrait {
	padding-bottom: 201.76%;
}

.device-mockup3.raket.landscape {
	padding-bottom: 49.56%;
}

.device-mockup3.raket > .device,
.device-mockup3.raket.black > .device,
.device-mockup3.raket.portrait.black > .device {
	background-image: url("../img/raket.png");
}

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

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

.device-mockup3.raket.landscape.white > .device {
	background-image: url("../img/raket.png");
}

.device-mockup3.raket.gold > .device,
.device-mockup3.raket.portrait.gold > .device {
	background-image: url("../img/raket.png");
}

.device-mockup3.raket.landscape.gold > .device {
	background-image: url("../img/raket.png");
}

.device-mockup3.raket > .device > .screen,
.device-mockup3.raket.portrait > .device > .screen {
    top: 11.58%; bottom: 11.58%; left: 5.97%; right: 5.97%;
}

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

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

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