<!--
/**** COLOUR SCHEME
orange: #ff0000 (attention bar)
greygreen: #34443e (rgb 52, 68, 62) (photo overlay and footer)
bluegreen: #7dc0c4 (about section)
blackgreen: #2a2a2c (about text)
darkgrey: #333333 (text)
***/

/* Render HTML 5 elements as block */
header,
footer,
aside,
nav,
article,
section,
date,
legend,
main
    {
    display: block;
    }
/**** GLOBAL ****/
html
  {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
*,
*:before,
*:after
  {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
body
    {
    margin: 0;
    background-color: #efefef;
    width: 100%;
    font: 100%/1.45 'Montserrat', verdana, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 120%;
    color: #333;
    min-width: 300px;
    }
.pb
    {
    position: fixed;
    top: 0;
    height: 5px;
    width: 100%;
    background: #ddd;
    }
#page
	{
    margin: auto;
    padding: 0rem;
	}
.container
  {
    padding: .1rem 1rem;
  }
#about-us .container,
#out-of-hours .container
  {
    max-width: 700px;
    margin: auto;
  }
header#banner
  {
    padding: .5rem 0;
    background-color: #fff;
  }
.site-link
  {
    padding: .5rem;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    text-decoration: none;
  }
#attention
  {
    padding: 1rem 0;
    color: #fff;
    font-weight: bold;
    background-color: #ff0000;
    text-align: center;
    font-size: .875rem;
  }
#attention .container
  {
    padding-left: .5rem;
    padding-right: .5rem;
  }
#attention a:link,
#attention a:visited
  {
    color: #fff;
  }
#contact-information
  {
    margin: 0;
    background-image: url('background.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }
#contact-information .wrapper
  {
    background-color: rgba(83, 119, 122, 0.3);
    padding: .5rem .5rem 1.5rem .5rem;
    display: grid;
    grid-gap: .5rem;
    grid-template-columns: repeat(1, [col] minmax(1rem, max-content));
    grid-template-rows: repeat(3, [row] minmax(1rem, max-content));
    justify-content: center;
  }
#contact-information h2
  {
    padding: 10px 0;
    font-size: 1.25rem;
    font-weight: bold;
  }
#telephone-hours
  {
    margin-top: .625rem;
    padding: 0 10px 0 30px;
    background-color: rgba(83, 119, 122, 0.9);
    color: #fff;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
    border-radius: 1rem;
  }
#location
  {
    background-color: rgba(83, 119, 122, 0.9);
    color: #fff;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 3;
    border-radius: 1rem;
  }
#call-to-action
  {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    /*justify-self: end;*/
  }
#telephone
  {
    max-width: 300px;
    background-color: #fff;
    padding: 0 .625rem 1rem 4.375rem;
    background-image: url('phone-icon.png');
    background-repeat: no-repeat;
    background-position: 20px 15px;
    background-size: 30px 30px;
    border-radius: 1rem;
  }
#email
  {
    max-width: 300px;
    background-color: #fff;
    padding: 0 .625rem 1rem 1rem;
    background-image: url('mail-icon.png');
    background-repeat: no-repeat;
    background-position: 20px 15px;
    background-size: 30px 20px;
    border-radius: 1rem;
  }
#special
  {
    margin-top: .625rem;
    padding: 0 10px 0 30px;
    background-color: rgba(255, 0, 0, 0.7);
    color: #fff;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 4;
    border-radius: 1rem;
  }
#location
  {
    margin-top: .625rem;
    padding: 0 .625rem 0 1.875rem;
  }
#about-us
  {
    background-color: #7dc0c4;
  }
#out-of-hours
  {
    background-color: #ebebeb;
  }
#contact-information p,
#contact-information ul
  {
    margin-top: 0;
  }
#contact-information ul
  {
    padding: 0;
    list-style-type: none;
    line-height: 1.5;
  }
.notice
  {
    font-size: .75rem;
    font-weight: bold;
  }
footer
  {
    background-color: #34443e;
  }
.credit
	{
  	margin: .3125em auto; /*5*/
  	text-align: center;
	}
img
	{
  	max-width: 100%;
  	height: auto;
  	border: none;
	}
img#logo
  {
    margin-top: .5rem;
    width: 29px;
    height: 35px;
  }
footer
  {
    margin: .3125em 0 0 0;
    font-size: .75em;
    text-align: center;
    color: rgb(255,255,255);
  }
/**** HEADERS ****/
h1
	{
    padding-left: .5rem;
    font-size: 1rem;
  	text-align: center;
    font-weight: bold;
    color: #333333;
	}
#contact-information h2
  {
    margin-bottom: 0;
  }
#contact-information #email h2
  {
    padding-left: 3.5rem;
  }
/**** LINKS ****/
a:link
  {

  }
a:visited
  {
    color: rgb(0,89,116);
  }
a:focus,
a:hover,
a:hover.connect,
a:focus.connect
	{

	}
telephone a:link
  {
    font-family: 'verdana';
    font-size: 1.125rem;
    text-decoration: none;
    color: #333333;
    font-weight: bold;
  }
#email a:link
  {
    font-family: 'verdana';
    font-size: 1rem;
    text-decoration: none;
    color: #333333;
    padding-left: .5rem;
  }
/**** MEDIA QUERIES ****/

/*340px*/
@media only screen and (min-width: 21.25em)
    {

    }
/*650px*/
@media only screen and (min-width: 40.265em)
    {
      header#banner
      {
        padding: 1rem 0 .5rem 0;
      }
    img#logo
      {
        width: 58px;
        height: 70px;
      }
    h1
    	{
      padding-left: 1rem;
      font-size: 2rem;
      text-transform: none;
    	}
    .container
      {
        padding: .1rem 2rem;
      }
    #attention
    {
      font-size: 1.25rem;
    }
    }
/*600px*/
@media only screen and (min-width: 37.5em)
  {

  }
/*768px*/
@media only screen and (min-width: 48em)
  {
    #contact-information .wrapper
      {
        padding: 3rem 1rem;
        grid-template-columns: repeat(2, [col] minmax(1rem, max-content));
        grid-template-rows: repeat(3, [row] minmax(1rem, max-content));
        grid-column-gap: 6rem;
      }
    #telephone-hours
      {
        padding: 0 10px 0 30px;
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 1;
        border-radius: 1rem;
      }
    #location
      {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 2;
      }
    #special
      {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 2;
      }
  }
/*1000px*/
@media only screen and (min-width: 62.5em)
  {
    #special
      {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 2;
      }

  }
/*1024px*/
@media only screen and (min-width: 64em)
  {
    #contact-information
      {
        margin: 0;
        background-image: url('background-crop.png');
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: cover;
      }
    #contact-information .wrapper
      {
            background-color: rgba(83, 119, 122, 0.3);
            padding: 7rem;
            display: grid;
            grid-column-gap: 2rem;
            grid-template-columns: repeat(4, [col] auto);
            grid-template-rows: repeat(2, [row] minmax(1rem, max-content));
            /*min-height: 100vh;*/
      }
    #contact-information h2
      {
        padding: 10px 0;
        font-size: 1rem;
        font-weight: bold;
      }
    #telephone-hours
      {
        padding: 0 10px 0 30px;
        max-width: 350px;
        min-width: 300px;
        /*background-color: rgba(255, 255, 255, 0.9);*/
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 1;
        border-radius: 1rem;
      }
    #location
      {
        max-width: 350px;
        min-width: 300px;
        padding: 0 10px 0 50px;
        /*background-color: rgba(255, 255, 255, 0.9);*/
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 1;
        border-radius: 1rem;
      }

    #call-to-action
      {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 1;
        /*justify-self: end;*/
      }

    #telephone
      {
        max-width: 300px;
        background-color: #fff;
        padding: 0 .625rem 1rem 4.375rem;
        background-image: url('phone-icon.png');
        background-repeat: no-repeat;
        background-position: 20px 15px;
        background-size: 30px 30px;
        border-radius: 1rem;
      }

    #email
      {
        max-width: 300px;
        background-color: #fff;
        padding: 0 .625rem 1rem 1rem;
        background-image: url('mail-icon.png');
        background-repeat: no-repeat;
        background-position: 20px 15px;
        background-size: 30px 20px;
        border-radius: 1rem;
      }
    #location
      {
        padding: 0 10px 0 30px;
      }
  }
/*1170px*/
@media only screen and (min-width: 73.125em)
  {

  }
/*1280px*/
@media only screen and (min-width: 80em)
    {
      #about-us .container,
      #out-of-hours .container
        {
          max-width: 900px;
          margin: auto;
          font-size: 1.125rem;
        }
      #contact-information .wrapper
        {
          padding: 10rem;
          display: grid;
          grid-template-columns: repeat(4, [col] auto);
          grid-template-rows: repeat(1, [row] minmax(1rem, max-content));
          grid-column-gap: 4rem;
        }
      #contact-information h2
        {
          padding: 10px 0;
          font-size: 1.5rem;
          font-weight: bold;
        }
      #telephone,
      #email
        {
          padding-right: 4rem;
          max-width: 400px;
        }
      #telephone-hours
        {
          padding: 0 10px 0 30px;
          grid-column-start: 2;
          grid-column-end: 3;
          grid-row-start: 1;
          grid-row-end: 1;
          border-radius: 1rem;
          font-size: 1.25rem
        }
      #location
        {
          padding: 0 10px 0 50px;
          grid-column-start: 3;
          grid-column-end: 4;
          grid-row-start: 1;
          grid-row-end: 1;
          border-radius: 1rem;
          font-size: 1.25rem
        }
      #special
          {
            font-size: 1.25rem
          }
      #call-to-action
        {
          grid-column-start: 1;
          grid-column-end: 2;
          grid-row-start: 1;
          grid-row-end: 1;
        }
      #location
        {
          padding: 0 10px 0 30px;
        }
      .notice
        {
          font-size: 1rem;
          color: #ebebeb;
          font-weight: normal;
        }
    }
  /*1400px*/
  @media only screen and (min-width: 807.5em)
    {

    }