.al-devicemockup-container {
position: relative;
}
.al-devicemockup-viewport {
position: absolute;
z-index: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
}
.al-devicemockup-device {
position: relative;
z-index: 1;
pointer-events: none;
}
.al-devicemockup-content {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.al-devicemockup-overlay {
position: absolute;
z-index: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
}
.al-devicemockup-desktop .al-devicemockup-viewport {
left: 4%;
right: 4%;
top: 5.25%;
bottom: 27.75%;
}
.al-devicemockup-laptop .al-devicemockup-viewport {
left: 11%;
right: 11%;
top: 6%;
bottom: 9%;
}
.al-devicemockup-laptop-large .al-devicemockup-viewport {
left: 11.75%;
right: 11%;
top: 5.5%;
bottom: 10%;}
.al-devicemockup-pen-tablet .al-devicemockup-viewport {
left: 7.5%;
right: 3.75%;
top: 3.25%;
bottom: 3%;
}
.al-devicemockup-pen-tablet.al-devicemockup-landscape .al-devicemockup-viewport {
left: 3%;
right: 3%;
top: 7.5%;
bottom: 3.5%;
}
.al-devicemockup-phone .al-devicemockup-viewport {
left: 6.25%;
right: 6.75%;
top: 4.5%;
bottom: 3.0%;
}
.al-devicemockup-phone.al-devicemockup-landscape .al-devicemockup-viewport {
left: 2.5%;
right: 2.5%;
top: 6.25%;
bottom: 6.75%;
}
.al-devicemockup-smartwatch .al-devicemockup-viewport {
left: 10.25%;
right: 10.25%;
top: 23.5%;
bottom: 23.5%;
}
.al-devicemockup-tablet .al-devicemockup-viewport {
left: 4.75%;
right: 4.75%;
top: 9.75%;
bottom: 10.75%;
}
.al-devicemockup-tablet.al-devicemockup-landscape .al-devicemockup-viewport {
left: 10.75%;
right: 9.25%;
top: 4%;
bottom: 4%;
}
.al-devicemockup-browser-light .al-devicemockup-viewport {
left: 0;
right: 0;
top: 18%;
bottom: 0;
}
.al-devicemockup-browser-dark .al-devicemockup-viewport {
left: 0;
right: 0;
top: 18%;
bottom: 0;
}
.al-devicemockup-fit-content .al-devicemockup-viewport video {
object-fit: cover;
}