:root {
    --screen-max-width:50em;
    --screen-min-width:30em;
    --major-colour-background:#b6006f;
    --header-height:23em;
    --header-logo-transform:rotate(-10deg);
    --header-logo-left:3em;
    --header-logo-top:2em;
    --header-caption-position-left:25em;
    --header-caption-position-right:1em;
    --header-caption-position-bottom:5em;
    
}

body {margin:0; padding:0; background:#fff; font-family:Arial, Helvetica, sans-serif; }

header {position:relative; height:var(--header-height); background:var(--major-colour-background) url(/images/reception.jpg);}
header nav {background:var(--major-colour-background);  box-shadow:0em 1em 10em #000; }
header nav div {margin:0 auto; height:3em; max-width:var(--screen-max-width); display:flex; flex-direction:row-reverse;}
header nav a {color:#fff; line-height:300%; margin:0 0 0 .5em; text-decoration:none; padding:0 .5em; color:#ddd}
header nav a:hover {color:#fff; text-decoration:underline;}
header nav a:first-child {color:#fff; margin-right:1em; font-weight:700;}
header figure {max-width:var(--screen-max-width); margin:0 auto; height:var(--header-height); position:relative;}
header figure img {position:absolute; top:var(--header-logo-top); left:var(--header-logo-left); width:15em; transform:var(--header-logo-transform)}
header figure figcaption {color:#fff; position:absolute; bottom:var(--header-caption-position-bottom); left:var(--header-caption-position-left); right:var(--header-caption-position-right); line-height:175%; background:var(--major-colour-background); padding:1em; box-shadow:0em 1em 10em #000;}

main {min-height:5em;}
main article {padding-bottom:1em;}
main hgroup {border-bottom:2px solid #999; margin:0 1em; padding:.5em 0;}
main hgroup * {font-weight:200; margin:0;}
main hgroup h3 {word-spacing:.4em; letter-spacing:.1em}
main h1 {margin:0; font-size:2.2em; font-weight:200;}
main h2 {font-weight:200; font-size:1.8em; text-align:center;}
main p {font-size:1.1em; line-height:125%; padding:0 1em .5em 1em;}
main p strong {font-style:italic;}
main address {color:#fff; line-height:175%; font-style:normal; font-size:1em;}
main #map {height:25em;}
main address a {color:#fff; text-decoration:none;}
main address > span:first-child {padding:1em 0 0 0; display:block;}
main address span.button {display:block; background:black; width:18em; margin:1em auto; padding:1em; border-radius:5px;}
main address span.button span {display:inline-block;}
main address span.button span:first-child {float:left;}
main address span.button span.text {font-size:1.75em; line-height:150%; font-size:1.25em}

#staff {background:#eee;}
#staff ul {display:flex; margin:0; padding:1em 0; overflow-x:scroll; xjustify-content: space-around;}
#staff ul li {margin:0; padding:0 1em; width:20em; list-style-type:none; text-align:center}
#staff ul li:last-child {margin-right:12em;}
#staff li figure {margin:0; width:100%;}
#staff ul li img {border-radius:50%; width:10em;}
#staff ul li span {display:block; text-align:center;}
#staff ul li span.name {font-size:1.25em; color:#888;}
#staff ul li span.awards {color:#444; font-weight:700;}

#products {padding:0 5em 2em 5em;}
#products figure {display:flex; width:100%; background:#ddd; margin:0}
#products figure > * {width:50%;}
#products figure:nth-child(odd) {background:#111; color:#eee}
#products figure:nth-child(odd) img {order:2;}
#products figure:nth-child(odd) figcaption {text-align:right}
#products figure figcaption {font-size:2.5em;}
#products figure figcaption span {padding:1em; display:block;}


#prices { background:#ddd; padding:1em;}
#prices > div {display:flex;}
#prices > div div {margin:1em; width:50%;}
#prices section {background:var(--major-colour-background); color:#fff; xwidth:50%; padding:1em; margin:0 0 2em 0;}
#prices section h2 {text-transform:uppercase; font-size:2.5em; margin:0 0 .75em 0; font-weight:200; text-align:left;}
#prices section dl {height:100%; overflow:hidden; line-height:140%;}
#prices section dt {float:left; clear:both; font-size:1.25em; padding-bottom:1.5em; xmargin:1em 7em 0 0; xbackground:orange; display:inline; margin:0; width:87%}
#prices section dt span.duration {margin-left:.5em; font-style:italic; font-size:smaller; xbackground:green}
#prices section dt span.description {clear:left; display:block; xmargin-left:.5em; font-style:italic; font-size:smaller; color:#ccc; xbackground:pink; xdisplay:none;}
#prices section dd {float:right; font-size:1.2em; display:inline; width:10%; margin:0; text-align:right;}
#prices section p {padding:0; text-transform:uppercase;}


footer {background:#333; padding:3em 0}
footer, footer a {color:#fff; text-decoration:none;}
footer svg {margin-right:.51em;}
footer div {position:relative; width:var(--screen-max-width); margin:0 auto 2em auto; padding:0 2em;}
footer section a {display:block; font-size:1.125em; line-height:200%; }
footer address > span {display:block; font-size:1.125em; line-height:200%;}
footer img {position:absolute; top:0em; right:2em; width:15em;}
footer h5 {font-size:1em; font-weight:200; line-height:100%; margin:0; text-align:center;}



@media only screen and (min-width: 768px) {}

@media only screen and (max-width: 767px) {
    :root { 
        x--major-colour-background:orange;
        --header-height:25em;
        --header-logo-transform:rotate(-25deg);
        --header-logo-left:6em;
        --header-logo-top:0;
        --header-caption-position-left:.5em;
        --header-caption-position-right:.5em;
        --header-caption-position-bottom:3.5em;
    }

    
    #products {padding:0;}
    #products figure img {height:15em;}


    #prices > div {display:block;}
    #prices div div {margin:0; width:auto;}
    #prices section dt {width:80%}    
    #prices section dd {width:15%;}

    footer div {height:auto; width:100%; margin-bottom:2em}
    footer .social {width:100%; padding:0 0 8em 0;}
    footer .social a {padding:0 1em;}
    footer .social a span {margin:0 0 0 1em}
    footer address > span {margin:0 0 0 1em;}
    footer address > span svg {float:left; padding-top:.5em; color:pink;}
    footer address > span span {display:block; margin:0 0 0 2em;}
    footer section {position:none;}
    footer img {right:45%; top:7.5em; width:7em}
}

@media only screen and (max-width: 767px) and (orientation: portrait) {}