/*-------------------------------------------Body & HTML---------------------------------------------*/
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

main {
  position: relative;
}

/*-------------------------------------------Background Image---------------------------------------------*/
#bg {
    width: 100%;
    height: auto;
}

.percuma {
    display: none;
    animation: popupAnimation 0.5s ease-out;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.percuma img {
    width: 100%;   
}

/*-------------------------------------------Popup Animation---------------------------------------------*/
@keyframes popupAnimation {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/*-------------------------------------------Multi Device Screen Size---------------------------------------------*/
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #bg {
        height: 100vh;
    }
}