/* 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: #000000; /* Update if you need a solid background */
  background-image: url(https://static.moshtix.com.au/directory/uploads/images/RH-BookingSkin-Background.png);
  background-repeat: repeat-y; /* Use no-repeat or repeat */
  background-position: center top;
  background-attachment: fixed;
  background-size: 1921px auto; /* Make auto auto if repeating tile */
}

/* Header */
#container > #header,
#header {
  background-image: url(https://static.moshtix.com.au/directory/uploads/images/RH-BookingSkin-Header-V5.png);
  background-color: transparent; /* Update if you need a solid background or use word transparent */
  background-size: 100% auto;
  background-position: center top;
  height: 210px; /* You need to add 40px to this to make the nav banner not cover the image */
  max-width: 1000px;
  aspect-ratio: 4.76190476; /* 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: #f28520; /* Update if you need a solid background or use word transparent */
  background-image: url();
  background-position: center left;
  background-size: 100% auto;
  max-width: 1000px;
  height: auto;
  width: auto;
  aspect-ratio: 10;
  justify-content: space-between; /* 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 */
}

#container > footer > #Client-Logo {
  text-align: left !important; /* Make center if need centered logo or left for left logo */
}
#container > footer > #Client-Logo > a {padding:5px;}
	
	
/* Navigation */

/* Navigation elements */
header > nav > ul {
  text-align: center;
  background-color: #000000; /* 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: #ef5ea3; /* If you need to change the text colour also change below border */
}

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

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

@media (max-width: 680px) {
  /* Mobile Header */
  #container > #header,
  #header { background:#000;
background-size: cover;
    background-image: url(https://static.moshtix.com.au/directory/uploads/images/RH-BookingSkin-MOBILE.jpg); /* Update if you need a different Header on Mobile */
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 */

  }

  /* Mobile Footer */
  #container > footer {
    background-image: url(); /* Update if you need a different Footer on Mobile */
  }

    #container > footer > #Client-Logo {
        flex: 0 1 40%;
    }

    #container > footer > #Client-URL {
        text-align: center;
        flex: 1 0 40%;
    }

    #container > footer > #Poweredby-Logo {
        text-align: right;
        flex: 0 1 20%;
    }


.social {
        width: 10%!important;
        height: auto!important;
    }

}
/* End 680px media query */