/* The base template code - DO NOT DELETE */
@import url(https://static.moshtix.com.au/directory/uploads/content/BookingSkinCSS-2023-Template.css);

/* Background */
body {
  background-color: #ffffff; /* Update if you need a solid background */
  background-image: url(https://static.moshtix.com.au/directory/uploads/images/Saweetie%20skin%20background%20%201920%20x%201080.jpg);
  background-repeat: no-repeat; /* Use no-repeat or repeat */
  background-position: center top;
  background-attachment: fixed;
  background-size: cover; /* Make auto auto if repeating tile */
}

/* Header */
#container > #header,
#header {
  background-image: url(https://static.moshtix.com.au/directory/uploads/images/swte_hdr_1000x400.png);
  background-color: transparent; /* Update if you need a solid background or use word transparent */
  background-size: contain;
  background-position: center top;
  height: 440px; /* You need to add 40px to this to make the nav banner not cover the image */
  max-width: 1000px;
  aspect-ratio: 2.272727272727273; /* Header width divided by height + 40 */
}

[data-is-mobile="true"] > #wrapper > #container > #header,
[data-is-mobile="true"] #header,
#header {
  height: auto;
  width: auto;
  aspect-ratio: 2.5; /* Header width divided by height */ 
}

/* Footer */
#container > footer {
  background-color: transparent; /* Update if you need a solid background or use word transparent */
  background-image: url(https://static.moshtix.com.au/directory/uploads/images/Saweetie%20-%20footer%20skin%201000%20x%20100.jpg);
  background-position: center left;
  background-size: 100% auto;
  max-width: 1000px;
  height: auto;
  width: auto;
  aspect-ratio: 10;
  justify-content: flex-end; /* to align logo right use flex-end, for left use flex-start, to align center use center */
}

#container > footer > #Poweredby-Logo {
  text-align: right !important; /* Make center if need centered logo or left for left logo */
}
	
/* Navigation */

/* Navigation elements */
header > nav > ul {
  text-align: right;
  background-color: #cb5873; /* If you need to change the navbar colour */
}

/* Navigation items - style links that look like buttons */
header > nav > ul > li > a,
header > nav > ul > li > a:active,
header > nav > ul > li > a:visited {
  color: #dab1c3; /* If you need to change the text colour also change below border */
}

#nav_login {
  border-left: 2px solid #dab1c3; /* If you need to change the text colour */
}

/* All button colours (excludes navigation) */
.button_orange, .button_green {
  background: #dab1c3; /* DO NOT MAKE BLACK */
}

@media (max-width: 680px) {
  /* Mobile Header */
  #container > #header,
  #header {
    background-image: url(https://static.moshtix.com.au/directory/uploads/images/swte_hdr_1000x400.png); /* Update if you need a different Header on Mobile */
  }

  /* Mobile Footer */
  #container > footer {
    background-image: url(https://static.moshtix.com.au/directory/uploads/images/Saweetie%20-%20footer%20skin%201000%20x%20100.jpg); /* Update if you need a different Footer on Mobile */
  }

}
/* End 680px media query */