body, h1, h2, h3, h4, h5, h6 { font-family: "Lato", sans-serif; } body, html { height: 100%; color: #777; line-height: 1.8; } /* Create a Parallax Effect */ .bgimg-1 { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../img/borci_dark.jpg"); min-height: 100%; } .w3-wide { letter-spacing: 10px; } .w3-hover-opacity { cursor: pointer; } .grey-navbar { color: white; } .header-position { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } .description-position { top: 40%; } .note-description-position { top: 50%; } .registration-button-position { top: 70%; } .note-description-position-text { display: block; margin-bottom: 20px; padding: 5px; } .header-text { display: block; margin-bottom: 20px; padding: 5px; } @media (max-width: 992px) { .header-position { position: absolute; top: 15%; left: 0; width: 100%; transform: translate(0, 0); text-align: center; } .description-position { top: 30%; } .note-description-position { top: 40%; } .registration-button-position { top: 60%; } } .messages-container { position: absolute; top: 50px; /* Adjust this value based on your menu height */ width: 100%; z-index: 1000; /* Ensure it appears above other elements */ } .width-50 { width: 50%; height: auto; display: block; margin: 0 auto; padding-left: 20px; } .loading-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */ z-index: 1000; /* Ensure it appears above other elements */ display: flex; justify-content: center; align-items: center; } .loading-modal img { position: absolute; top: 30%; left: 40%; width: 400px; /* Adjust the size as needed */ height: auto; }