h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0;
}

#header {
    background: #6e3357;
}

#menu {
    background: #6e3357;
	color: white;
}

#menu h2 {
    background: #6e3357;
	color: white;
}
calendar__date--today
{
    background: #494445;
}

body, input, select, textarea {
    letter-spacing: 0em;
	hyphens: none;
}

a {
    border-bottom: solid 2px;
}

a:focus {
	background-color : #6e3357 !important;
	color: white !important;
}

a:hover, a:focus {
    color: #4b233b;
    outline: none;
    text-shadow: 0.2px 0 0 #494445;
}

@media screen and (max-width: 767px) {
  .listing .row {
    display: flex;
    flex-direction: column-reverse;
  }
  
  .listing .col-8 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .listing .col-4 {
    width: 66%;
    max-width: 66%;
    flex: 0 0 66%;
    margin: 0 auto 15px auto; /* Centers the image and adds bottom spacing */
  }
  
  .listing .col-12 {
    display: flex;
    flex-direction: column;
  }

  .inner.row:not(.form) .image.right {
    float: none !important; /* Disables the right-side wrap */
    width: 50% !important;  /* Locks image container to half-width */
    margin: 0 auto 15px auto !important; /* Centers image and adds bottom spacing */
    order: -1; /* Forces the image to the top of the flex container */
  }

  .inner.row:not(.form) .image.right img {
    width: 100%; /* Ensures the actual image fills the 50% container */
    display: block;
  }
}

img:hover {
	opacity: 0.9;
	transition: transform .5s ease;
	transform: scale(1.09);
}

.supplement {
	padding: 1em;
    background-color: #eeeeee;
}

.image-link {
    border-bottom: none;
    background-color: transparent;
}

/* Sets Iframe for map to scale with device width (was too wide for mobiles */

iframe {
max-width: 100%;
}

/* Request to have MDC border around Event Pick of the week - see ticket 20328 */
#one > div > div.col-8.col-12-medium > article {
	border: solid 3px rgba(110, 51, 87, 0.75);
}

/* Fix to prevent the opening times tables causing horizontal screen overflow on small devices whilst ensuring all other tables remain normal width  */
@media only screen and (min-width: 500px) {
    #one > div > div.col-12.col-12-medium > div:nth-child(8) > div:nth-child(2) > div > div > div > table {width: 500px !important;}
}