:root {
  --main-brand-color: #1b374c; /* #1a3c4f; */
  --secondary-brand-color: #024163;
}

/* istok-web-regular - latin */
@font-face {
  font-family: 'Istok Web';
  font-style: normal;
  font-weight: 400;
  src: local('Istok Web'),
       local('IstokWeb'),
       url('/_resources/app/fonts/istok-web-v20-latin-ext_latin-regular.woff2') format('woff2');
}

/* istok-web-italic - latin */
@font-face {
  font-family: 'Istok Web';
  font-style: italic;
  font-weight: 400;
  src: local('Istok Web Italic'),
       local('IstokWebItalic'),
       url('/_resources/app/fonts/istok-web-v20-latin-ext_latin-italic.woff2') format('woff2');
}

/* istok-web-700 - latin */
@font-face {
  font-family: 'Istok Web';
  font-style: normal;
  font-weight: 700;
  src: local('Istok Web 700'),
       local('IstokWeb700'),
       url('/_resources/app/fonts/istok-web-v20-latin-ext_latin-700.woff2') format('woff2');
}

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('/_resources/app/fonts/montserrat-v25-latin-ext_latin-300.woff2') format('woff2');
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat'),
       url('/_resources/app/fonts/montserrat-v25-latin-ext_latin-regular.woff2') format('woff2');
}

/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('/_resources/app/fonts/montserrat-v25-latin-ext_latin-600.woff2') format('woff2');
}


/* DEFAULTS */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

html {
	box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
	box-sizing: inherit;
}

ul, ol {
    list-style-position: inside;
}

nav ul, footer ul {
	list-style-type: none;
}

b, strong {
    font-weight: bolder;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

/* Correct the inability to style clickable types in iOS and Safari. */

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/* Add the correct display in Edge, IE 10+, and Firefox. */

details {
    display: block;
}

summary {
    display: list-item;
}


/* COLOUR SCHEME */

body {
    color: #333;
}

footer, footer a {   
    background-color: var(--main-brand-color);
    color: #fff;
}

#breadcrumbs {
    background-color: black;
    color: #fff;
}

main {
    background-color: #fff;
}

h1, h2, h3, dt, summary::marker {
    color: var(--secondary-brand-color);
}

#WorkshopMenuPage #workshops h2 {
    border-bottom: none;
}

footer h2 {
    color: #fff;
}

#message {
    color: #000;
}

nav a {
	color: #fff;
}

.places_left {
    color: #a30000;
}

.itinerary_item:nth-child(odd) {
/*    background-color: #eff8f9; */
}

tr:nth-child(even) {
    background-color: #ededed;
}


/* TYPOGRAPHY */

body {
    font-family: "Istok Web", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
}

main, aside, footer {
    line-height: 1.5;
}

h1, h2, h3, #main-menu, #message, #site-title, dt, .call-to-action, .more-info {
    font-family: Montserrat, Verdana, Helvetica, Arial, sans-serif;
}

h1 {
    font-weight: 400;
    line-height: 1.2;
    word-spacing: 0.2em;
}

h2 { 
    font-weight: 400;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5em;
}

#main-menu {
    font-weight: 300;
}

.workshop-link h2 {
    text-transform: none;
    letter-spacing: normal;
}

.sidebar h2 {
    margin-top: 0;
}

footer h2 {
    font-size: 1.0625rem;
}

h3, dt {
    font-size: 1.25rem;
    font-weight: 400;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

p {
    margin: 0 0 1em 0;
}

.testimonial > p {
    margin-bottom: 0;
}

dd {
    margin: 0;
}

summary {
    font-size: 1.1rem;
    cursor: pointer;
    outline-offset: 0.4em;
}

/* Remove the focus outline for mouse clicks - leave it for keyboard access.
   Not currently supported in Safari - Sept 2021. */
summary:focus:not(:focus-visible) {
    outline: none;
}

details > p, #itinerary_items > p {
    margin-top: 1em;
}

#site-title {
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.125em;
    font-weight: 600;
}

#site-title .subtitle {
    letter-spacing: 0.3em;
}

#message {
    margin: 0;
}

main h1 .subtitle {
    display: block;
    font-size: 0.75em;
}

#workshop-summary {
    padding-top: 1em;
}

.comment {
    font-style: italic;
    margin-bottom: 0;
}

#main-menu li {
    /* font-size: 1.125rem; */
    text-transform: uppercase;
    letter-spacing: 0.0625em;
}

a.call-to-action {
    display: block;
    width: 12em;
    padding: 0.5em;
    font-size: 1.125rem;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid #666;
    margin-top: 1em;
    text-decoration: none;
    background-color: #fff;
    color: #333;
}

#workshop-menu a.call-to-action {
    background-color: #fff;
}

header > a {
    text-decoration: none;
}
    
h2 > a {
    text-decoration: none;
    color: inherit;
}

main li {
    margin-bottom: 0.5em;
}

table {
    border-collapse: collapse;
    border: 1px solid #d4d4d4;
    border-spacing: 0;
}

td, th {
    padding: 0.2em 0.33em;
    border: 1px solid #d4d4d4;
    vertical-align: top;
}

blockquote {
    background: transparent url(../images/blockquote.png) no-repeat 0px 6px;
    font-style: italic;
    display: block;
    margin: 0;
    /* text-indent: 1em; */
}

blockquote p {
    line-height: 1.4;
}

address {
    display: block;
    font-style: normal;
    margin-bottom: 1em;
}

footer li > a, a.workshop-link  {
    text-decoration: none;
}


/* IMAGES & VIDEO */

img {
    display: block;
	margin: 0;
	width: 100%;
    height: auto;
    vertical-align: bottom;
}

#logo {
    width: auto;
}

#instructor img, #govt img {
    width: 50%;
}

#doc-approved {
    /* max-width: 205px; */
}

iframe[title="vimeo-player"] {
    width: 100% !important;
    height: auto !important;
}

main ul {
	margin-bottom: 1em;
    padding: 0;
}



#UserDefinedForm fieldset {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-top: 2em;
    margin-bottom: 0;
}

#UserDefinedForm legend {
    padding-left: 0;
    padding-right: 0;
    color: #3f83aa;
    font-size: 1.25rem;
    font-weight: bold;
}

#UserDefinedForm label.left {
    display: block;
    font-weight: normal;
    margin-bottom: 0.1em;
}


div.field {
    margin: 0.6em 0 1em;
}


form label.right {
    font-size: 12px;
    color: #888;
}

form input.text, form textarea, form select {
    width: 100%;
}

form input.text, form select {
    max-width: 24em;
}

input[type="date"] {
    max-width: 12em;
}

textarea {
    resize: vertical; /* forces text area to be resized vertically only */
}

select, input[type="date"] {
    /* padding-top: 0.2em; */
    /* padding-bottom: 0.2em; */
}

fieldset {
    margin-bottom: 1em;
}


/* Radio and Checkbox */
input.checkbox, input.radio {
    margin-right: 0.5em; 
}

.checkbox label.right,
.radio label.right {
    float: left;
}


/* Messages */
form .message {
    background-color: #fef4ba;
    padding: 0.4em 0.75em;
    border: 1px solid #e8c805;
    border-radius: 3px;
}

form .good {
    background-color: #ecf9d0;
    border-color: #8fbe00;
}

form .bad, form .required {
    /* background-color: #f9d0d0; */
    border-color: #cf0000;
    color: #b80000;
}


/* ACTIONS */
.Actions {
    margin-bottom: 20px;
}
a.btn, button, input[type="submit"], .Actions .action {
    /* background-color: #b80000; */
    /* color: #fff; */
    /* display: block; */
    /* border-radius: 0.25em; */
    /* padding: 0.25em 1em; */
    /* text-transform: uppercase; */
    /* border: none; */
    /* line-height: 1; */


display: inline-block;
line-height: 1;
margin-top: 1em;
padding: 0.5em;
border: 2px solid #666;
border-radius: 0;
background-color: #fff;
color: inherit;
text-decoration: none;
cursor: pointer;
}

a.btn:hover, button, input[type="submit"]:hover, .Actions .action:hover {
    background:  var(--main-brand-color);
    color: #fff;
}
a.btn {
    line-height: 18px;
    margin-bottom: 10px;
}
a.btn:after {                     /* creates arrow in button */
    content: '\2192';
    padding-left: 10px;
}
input.action[class] {             /* IE ignores [class] */
    width: auto;                  /* cancel margin fix for other browsers */
}

.Actions:after {
    color: #B94A48;
    display: inline-block;
    font-weight: normal;
    margin-top: 9px;
}

#MemberLoginForm_LoginForm .Actions:after {
    display: none;
}


/* LOGIN and FORGOT PASSWORD */
#Remember {
    min-height: 20px;
}
#ForgotPassword {
    clear: left;
}
#MemberLoginForm_LostPasswordForm .Actions:after {
    display: none;
}

/* Search / Login */
.header form .middleColumn {
    /* float: none;
    width: 100% !important; */
}




/* USER DEFINED USER FORM MODULE STYLES
----------------------------------------------- */

/*Generic and mixed*/
.FormHeading {
    clear: both;
    padding-top: 1em;
}
form .date .middleColumn input {
    /*background: transparent url(../images/icons/your_icon_here.png) no-repeat scroll 90px 5px;*/
    width: 114px;
}
.Actions input.resetformaction,
.Actions input.action-minor {                  /* Clear button */
    float: left;
    background-color: #888;
}
.Actions input.resetformaction:hover,
.Actions input.action-minor:hover {            /* Clear button */
    background-color: #aaa;
}

/* Labels */
.checkbox label.right {
    font-size: 13px;                            /* reset to default */
    color: #333;                                /* reset to default */
}
form .requiredField label.left:after { /* pseudo element adds an asterisk to a required fields label */
    color: #B94A48;
    content: "*";
    font-size: 14px;
    font-weight: normal;
    padding-left: 3px;
}

/* Radio / Checkbox */
form .checkboxset ul,
form .optionset ul {
    margin: 0;
}
form .checkboxset li,
form .optionset li {
    margin-bottom: 5px;
    list-style-type:none;
}
form div.checkbox:after { /* clearfix */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
form .checkbox .checkbox { clear: both; }

/* Messages */
span.message {
    margin: 0.5em 0 1.5em 0;
    display: block;
    max-width: 100%;
    clear: left;
}

form input.holder-required {        /* This class needs to be changed - is used for both input and div */
    border: 1px solid #cf0000; 
}

/* To test - potentially not needed? */
.ss-uploadfield-item-info button{
    margin-top: 4px !important;
    float: left;
}

form .creditCardField input,
form input.currency,
form input.numeric {
    width: 50px;
}

form #DMYDate-month,
form #DMYDate-day {
    width: 25px
}


/* FORM CUSTOMISATION */

aside input[type=text], aside input[type=email], aside textarea {
	width: 100%;
}

#UserDefinedForm form .requiredField label.left:after {
    font-size: 1rem;
    font-weight: bold;
    padding-left: 0.2em;
}

#UserDefinedForm .checkbox .middleColumn {
    display: flex;
}


/* =============================================================================
   LAYOUT
   =============================================================================  */

/* DEFAULT LAYOUT - SINGLE COLUMN */

/* Header */

header {
    display: grid;
    grid-template-columns: 1fr 2em;
    grid-template-areas: "logo menu-icon"
                         "tagline tagline";
    padding: 0.5em 1em 1.5em 1em;
}

#tagline {
    grid-area: tagline;
    margin-top: 1.5em;
}
    
header > a {
    grid-area: logo;
    display: flex;
    align-items: center;
}

header > a img {
    width: 3rem;
    margin-right: 0.5em;
}

#main-menu-open-button {
    grid-area: menu-icon;
}

/* end Header */

#breadcrumbs {
    display: none;
}

main, aside {
    max-width: 38em;
    margin: 0 auto;
    padding: 0 1em;
}

main, #testimonials {
    padding-bottom: 2em;
}

#content {
    padding-top: 2em;
}

#content h2:first-child {
    margin-top: 0;
}

article {
    margin-bottom: 4em;
}

footer {
    padding: 1em;
}

#workshops {
    margin-top: 2em;
}

#workshops .workshop, #upcoming-workshops .workshop {
    margin-bottom: 3em;
}

#workshop-menu {
    display: none;
}

#gallery img {
    margin-bottom: 2em;
}

main .testimonial {
    margin-top: 4em;
}

aside .testimonial {
    margin-bottom: 2em;
}

details {
    padding: 1em 0;
}

details[open] {
    /* Add styles for when the details are being displayed. */
}

#reviews > div {
    margin-bottom: 2em;
}

#workshops .workshop-link {
    display: grid;
    align-items: end;
}

#workshops .workshop-link > * {
    grid-column: 1;
    grid-row: 1;
}

footer > div {
    margin-bottom: 2em;
}

#footer-links > ul {
    margin: 0;
    padding: 0;
}

#footer-links li {
    line-height: 1;
    margin-bottom: 1em;
}

footer #approvals {
    display: grid;
    grid-template-columns: repeat(3, min-content);
    margin-top: 4em;
    column-gap: 1em;
}

footer #approvals > a {
    height: 5em;
}

footer #approvals img {
	width: auto;
	height: 100%;
}

/* Workshop menu page */

#WorkshopMenuPage #workshops {
    max-width: 20em;
    margin-right: auto;
    margin-left: auto;
}

/* Workshop page */

#WorkshopPage #details table {
    border: 0;
}

#WorkshopPage #details tr {
    background-color: transparent;
}

#WorkshopPage #details th, #WorkshopPage #details td {
    border: 0;
    text-align: left;
}

#WorkshopPage #details th {
    font-weight: 600;
    padding-right: 2em;
}

#WorkshopPage .instructor > h3 {
    float: left;
    margin-top: 1rem;
}

#WorkshopPage .instructor > img {
    width: 12rem;
    max-width: 40%;
    float: right;
    margin: 1rem 0 1rem 2rem;
}

#WorkshopPage .instructor-biography {
    clear: both;
}

#promo-video {
    margin-top: 2em;
}

#site-title, #tagline {
    color: #fff;
}

/* COLOUR SCHEME */

header {
    background-color: var(--main-brand-color);
}
    
/* TYPOGRAPHY */

h1 {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 1em;
}

h2 { 
    font-size: 1.25rem;
    margin: 2em 0 0.5em 0;
}

#site-title {
    font-size: 1.25rem;
}
    
#site-title .subtitle {
    display: block;
    font-size: 0.5em;
}

#tagline {
    font-size: 0.75rem;
    text-align: center;
    margin-bottom: 0;
}

main > h1 {
    font-size: 1.5rem;
    color: var(--main-brand-color);
    margin: 0;
    padding: 2em 0;
}

#workshops .workshop-link h2, #workshops .workshop-link h3 {
    z-index: 100;
    opacity: 0.85;
    background-color: var(--main-brand-color);
    color: #fff;
    padding: 0.5em;
    margin: 0;
}

#workshops .workshop-link {
    margin-bottom: 1em;
}

/* NAVIGATION */

#main-menu {
    height: 100%;
    width: 0;
    max-width: 30em;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    background-color: var(--main-brand-color);
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 3.25rem;
    transition: 0.3s;
}

#main-menu.open {
    width: 100%;
}

#main-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}   

#main-menu li {
    line-height: 1.2;
}

#main-menu a {
    padding: 0.75em 1em;
    display: inline-block;
    text-decoration: none;
}    

#main-menu a:hover, #main-menu li.current { 
	color: #fff !important;
}

#main-menu-open-button {
	display: block;
    font-size: 2rem;
    text-align: right;
    line-height: 1;
    padding: 0.2em 0;
    color: #fff;
    cursor: pointer;
}

#main-menu-close-button {
    position: absolute;
    top: 0;
    right: 0.2em;
    font-size: 4rem;
    line-height: 1;
    margin-top: 0;
    padding: 0;
    border: 0;
}

a.more-info {
    display: inline-block;
    line-height: 1;
    padding: 0.5em;
    border: 2px solid #666;
    color: inherit;
    text-decoration: none;
}

@media screen and (min-width: 28em) {

    #gallery {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 1em;
        padding: 0;
    }
    
    aside > * {
        grid-column: span 4;
    }
    
    #gallery > a {
        grid-column: span 2;
    }
    
    #WorkshopPage #gallery > h2, #TripReportPage #gallery > h2 {
        grid-column: span 4;
    }
    
    #gallery img {
        cursor: pointer;
    }

}


@media screen and (min-width: 44em) {
    
    main {
        max-width: 100%;
        display: grid;
        grid-template-columns: 1fr repeat(4, 8em) 1fr;
        column-gap: 2em;
        margin: 0;
        padding-right: 0;
        padding-left: 0;
    }
    
    
    #gallery, #upcoming-workshops {
        width: 38em;
        display: grid;
        grid-template-columns: repeat(4, 8em);
        column-gap: 2em;
        padding: 0;
    }
    
    #testimonials {
        padding-right: 0;
        padding-left: 0;
    }        
    
    main {
        grid-template-areas: ".       head      head      head      head      ."
                             "picture picture   picture   picture   picture   picture"
                             ".       content   content   content   content   ."
                             ". gallery gallery gallery gallery ."
                             ".       workshops workshops workshops workshops .";
    }
    
    /* Workshop menu page */

    #WorkshopMenuPage #workshops {
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    #WorkshopPage main {
        grid-template-areas: ". head head head head ."
                             "picture picture picture picture picture picture"        
                             ". details details details details ."
                             ". overview overview overview overview ."
                             ". gallery gallery gallery gallery ."
                             ". itinerary itinerary itinerary itinerary ."
                             ". fees fees fees fees ."
                             ". instructors instructors instructors instructors ."
                             ". reviews reviews reviews reviews .";
    }
    
    main > h1 {
        grid-area: head;
    }
    
    main > picture {
        grid-area: picture;
    }
    
    main > #content {
        grid-area: content;
    }
    
    main > #workshops {
        grid-area: workshops;
    }

    #WorkshopPage #details {
        grid-area: details;
    }
            
    #WorkshopPage #overview {
        grid-area: overview;
    }
            
    #WorkshopPage #gallery {
        grid-area: gallery;
    }
            
    #WorkshopPage #itinerary {
        grid-area: itinerary;
    }

    #WorkshopPage #fees {
        grid-area: fees;
    }

    #WorkshopPage #instructors {
        grid-area: instructors;
    }

    #WorkshopPage #reviews {
        grid-area: reviews;
    }
    
    #TripReportPage #gallery {
        grid-area: gallery;
    }
    
    #gallery > a {
        grid-column: span 2;
    }

    #WorkshopPage #gallery > h2, #TripReportPage #gallery > h2 {
        grid-column: span 4;
    }
    
    #upcoming-workshops > div {
        grid-column: span 2;
    }
    
    #testimonials > div {
        grid-column: span 2;
    }
        
    
    /* Workshops */
    
    #workshops {
        display: grid;
        grid-template-columns: repeat(4, 8em);
        gap: 2em;
        padding: 0;
    }
    
    #workshops > h2 {
        grid-column: 1 / 5;
        margin-bottom: 0;
    }
    
    #workshops > .workshop {
        grid-column: span 2;
    }
    
    #workshops > p {
        grid-column: 1 / -1;
    }
        
    #workshops h3 {
        margin-top: 0;
    }

    footer {
        display: grid;
        grid-template-columns: 1fr repeat(4, 8em) 1fr;
        grid-template-areas: ". links links contact contact ."
                             ". approvals approvals . . ."
                             ". copyright copyright copyright copyright .";
        column-gap: 2em;
    }
    
    footer #footer-links {
        grid-area: links;
    }
    
    footer #contact-details {
        grid-area: contact;
    }
    
    footer #approvals {
        grid-area: approvals;
    }
    
    footer #approvals > a {
        height: 8em;
    }

    
    /* footer .newsletter-signup { */
        /* grid-column: 4 / span 2; */
    /* } */
    
    footer #copyright {
        grid-area: copyright;
    }    
    
    main h1 .subtitle {
        display: inline;
        font-size: 1em;
    }
    
    #tagline {
        font-size: 1rem;
    }
    
    h2 { 
        margin-bottom: 1em;
        border-bottom: 1px solid #3f83aa;
    }

    #WorkshopPage .instructor-biography {
        clear: left;
    }
    
}


/* MEDIUM LAYOUT */
/* A two-column layout. */

@media screen and (min-width: 64em) {
    /* #workshops,  */
    #gallery, #upcoming-workshops, #testimonials {
        width: 58em;
        max-width: 58em;
        display: grid;
        grid-template-columns: repeat(6, 8em);
        column-gap: 2em;
        padding: 0;
    }
    
    #testimonials {
        /* grid-template-rows: masonry; */
    }
	
	#workshops {
        display: grid;
        grid-template-columns: repeat(6, 8em);
        column-gap: 2em;
        padding: 0;
    }
    
    #WorkshopPage #gallery {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(4, 8em);
        column-gap: 2em;
    }
    
    aside > * {
        grid-column: span 6;
    }
    
    #testimonials .testimonial {
        grid-column: span 3;
    }
    
    /* Layout */

    header {
        grid-template-columns: 20em 1fr;
        grid-template-areas: "logo tagline";
        padding: 1em 2em;
    }

    header > a {
        justify-self: start;
        margin-bottom: 0;
    }

    #tagline {
        justify-self: end;
        letter-spacing: 0.05em;
    }
               
    /* Breadcrumbs */
    
    #breadcrumbs {
        display: block;
        padding: 0.85em 2em;
        background-color: #09608e;
    }
    
    #breadcrumbs ul {
        display: flex;
        margin: 0;
        padding: 0;
    }
    
    #breadcrumbs li {
        margin-right: 0.5em;
        font-size: 0.875rem;
        letter-spacing: 0.075em;
        text-transform: uppercase;
    }
    
    #breadcrumbs li:after {
        content: "  >";
    }
    
    #breadcrumbs li:last-child:after {
        content: "";
    }
    
    #breadcrumbs a {
        border-bottom: 1px solid;
        color: inherit;
        text-decoration: none;
    }
    
    /* Colour Scheme */
    
    header {
        background-color: #fff;
    }
    
    #site-title, #tagline {
        color: var(--main-brand-color);
    }
    
    /* Typography */
    
    header > a img {
        width: 6rem;
    }
    
    #message {
        display: block;
    }

    #site-title {
        font-size: 2rem;
    }
    
    #site-title .subtitle {
        font-size: 0.5em;
    }
    
    #tagline {
        margin-top: 2.15em;
    }
    
    .places-left {
        font-size: 1.125rem;
    }
    
    /* All pages */
    
    main > h1, #main-image {
        grid-area: head;   
    }
    
    main > h1 {
        /* Positioned over an image */
        align-self: end;
        z-index: 100;
        opacity: 0.85;
        background-color: var(--main-brand-color);
        color: #fff;
        padding: 1em;
        margin: 0;
        text-align: center;
    }
    
    main {
        display: grid;
        grid-template-columns: 1fr repeat(6, 8em) 1fr;
        grid-template-areas: "head head head head head head head head"
                             ". . content content content content . ."
                             ". gallery gallery gallery gallery gallery gallery ."
                             ". workshops workshops workshops workshops workshops workshops .";
        column-gap: 2em;
    }

    #WorkshopPage main {
        display: grid;
        grid-template-areas: "head head head head head head head head"
                             ". menu menu details details details details ."
                             ". menu menu overview overview overview overview ."
                             ". menu menu gallery gallery gallery gallery ."
                             ". menu menu itinerary itinerary itinerary itinerary ."
                             ". menu menu fees fees fees fees ."
                             ". menu menu instructors instructors instructors instructors ."
                             ". menu menu reviews reviews reviews reviews .";
    }
    
    #workshops > .workshop {
        grid-column: span 3;
    }
    
    #workshops > h2, #TripReportPage #gallery > h2 {
        grid-column: span 6;
    }
    
    #content {
       grid-area: content;
    }
    
    #all-workshops {
        grid-area: workshops;
    }
    
    
    /* Contact Page */   
    
    #UserDefinedForm form {
        grid-area: content;    
    }

    footer {
        grid-template-columns: 1fr repeat(6, 8em) 1fr;
        grid-template-areas: ". links links links contact contact contact ."
                             ". approvals approvals approvals approvals approvals approvals ."
                             ". copyright copyright copyright copyright copyright copyright .";
    }
    
    
    /* Workshop Page */
    

        
    /* #WorkshopPage main > h1, #WorkshopPage #main-image { */
        /* grid-area: head;    */
    /* } */
    
    #WorkshopPage #workshop-menu {
        grid-area: menu;
    }
    
    #WorkshopPage main > * {
        max-width: 100%;
        margin: 0;
    }
    
    #WorkshopPage #workshop-summary {
        padding: 1em 2em ;
        background-color: #09608e;
        color: #fff;
        font-size: 1.125rem;    
        text-align: center;
    }
    
    #WorkshopPage #workshop-menu li {
        margin-bottom: 0.5em;
    }

    #WorkshopPage #workshop-menu a {
        text-decoration: none;
        color: #000;
    }
    
    #WorkshopPage #workshop-menu a:hover {
        color: #f00;
    }
    
    #WorkshopPage #introduction {
        padding: 1em;
    }

    #WorkshopPage #summary {
        text-align: center;
    } 

    #WorkshopPage #instructors .instructor > img {
        width: 16rem;
    }
    
    #WorkshopPage #details > .register {
        display: none;
    }
    
    #WorkshopPage #workshop-menu {
        display: block;
        padding: 0 1em;
        background-color: #efefef;
    }
    
    #WorkshopPage #workshop-menu nav {
        position: sticky;
        top: 0;
        padding: 2em 0;
    }
    
    /* Main Menu */

    #main-menu {
        position: static;
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow-x: visible;
        padding: 1em;
    }
    
    #main-menu > ul {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0;
        border-top: 0;
    }
    
    #main-menu li {
        line-height: 1;
    }
    
    #main-menu a {
        margin: 0 1em;
        padding: 0;
    }

    #main-menu a:hover, #main-menu li.current, #main-menu a.section { 
        background-color: transparent;
    }
    
    #main-menu li > a {
        /* Border in same colour as background prevents jumping of menu items on hover */
        border-bottom: 1px solid var(--main-brand-color);
        padding-bottom: 0.1em;
    }
    
    #main-menu li.current > a, #main-menu li > a:hover {
        border-bottom: 1px solid #8dfd81;	
    }
    
    #main-menu ul.secondary {
        /* display: none; */
    }
    
    
    #main-menu-open-button, #main-menu-close-button {
        display: none !important;
    }
    
    /* Secondary menu */
    
    #main-menu ul > li {
        position: relative;
    }
    
    #main-menu ul.secondary {
        visibility: hidden;
        opacity: 0;
        display: none;
        position: absolute;
        transition: all 0.5s ease;
        padding-top: 0.75em;
        left: 0;
        padding-left: 0;
    }
    
    #main-menu ul li:hover > .secondary, #main-menu ul.secondary:hover {
        visibility: visible;
        opacity: 1;
        display: block;
        background-color: var(--main-brand-color);
    }

    #main-menu .secondary li {
        margin-bottom: 0.75em;
    }
    
    
}


@media screen and (min-width: 84em) {
    
    main, #all-workshops, footer {
        grid-template-columns: 1fr repeat(8, 8em) 1fr;
        column-gap: 2em;
    }
    
    #gallery, #upcoming-workshops, #testimonials {
        grid-template-columns: repeat(8, 8em);
    }
    
    #workshops {
        /* Fit three workshops across the page */
        grid-template-columns: repeat(9, 6.8888888889em);
    }

    main {
        grid-template-areas: "head head head head head head head head head head"
                             ". . .     content   content   content   content   . . ." 
                             ".  gallery gallery gallery gallery gallery gallery gallery gallery ."
                             ".  workshops workshops workshops workshops workshops workshops workshops workshops .";
    }
    
    #WorkshopPage main {
        grid-template-areas: "head head head head head head head head head head"
                             ". menu menu details details details details gallery gallery ."
                             ". menu menu overview overview overview overview gallery gallery ."
                             ". menu menu itinerary itinerary itinerary itinerary gallery gallery ."
                             ". menu menu fees fees fees fees gallery gallery ."
                             ". menu menu instructors instructors instructors instructors gallery gallery ."
                             ". menu menu reviews reviews reviews reviews gallery gallery .";
    }
    
    /* #TripReportPage main { */
        /* grid-template-areas:  "head head head head head head head head head head" */
                             /* ". . .     content   content   content   content   . . ."  */
                             /* ".  gallery gallery gallery gallery gallery gallery gallery gallery ."; */
    /* } */
    
    footer {
        grid-template-areas: ". links links contact contact approvals approvals newsletter newsletter ." 
                             ". copyright copyright copyright copyright copyright copyright copyright copyright .";
    }
    
    #workshops > h2 {
        grid-column: span 9;
    }
    
    #TripReportPage #gallery > h2 {
        grid-column: span 8;
    }
    
    #gallery, #upcoming-workshops, #testimonials {
        width: 78em;
        max-width: 78em;
    }
    
    aside > * {
        grid-column: span 8;
    }
    
    #testimonials .testimonial {
        grid-column: span 4;
    }

    #content {
        margin-top: 3em;
    }

    #testimonials, #sidebar-two {
        margin: 4em auto 2em auto;
    }
    
    /* Footer */
    
    footer #footer-links {
        grid-area: links;
    }
    
    footer #contact-details {
        grid-area: contact;
    }
    
    footer #approvals {
        grid-area: approvals;
    }
    
    /* footer .newsletter-signup { */
        /* grid-area: newsletter; */
    /* } */
    
    footer #copyright {
        grid-area: copyright;
    }

    /* Main Menu */

    #main-menu {
        margin-top: 0;
    }
    
    /* Workshop Page */

    #WorkshopPage #gallery {
        padding: 4.2em 0 0 0;
        display: block;
    }
    
    #WorkshopPage #gallery h2 {
        display: none;
    }
    
    #WorkshopPage #gallery img {
        margin-bottom: 2em;
        cursor: pointer;
    }
	
	/* Typography */
    
    main > h1 {
        font-size: 2rem;
        padding: 0.75em;
    }
     
    h2 {
        font-size: 1.75rem;
    }
 
}


@media screen and (min-width: 100em) {
    
    html {
        font-size: 112.5%;
    }

}

/* Dark mode */

@media screen and (prefers-color-scheme: dark) {

    body, header, main, #WorkshopPage #workshop-menu {
        background-color: #121212;
        color: #eee;
    }
    
    a {
        color: #eee;
    }

    #site-title, #tagline, main > h1, h1, h2, h3, dt, summary::marker, #WorkshopPage #workshop-menu a, #UserDefinedForm legend {
        color: #fff;
    }
    
    #WorkshopPage #workshop-menu .register a, input[type="submit"], .Actions .action {
        color: #000;
    }
    
}


/* glightbox.min.css */
.glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0;overflow:hidden}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;opacity:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';display:block;position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;background:0 0;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc string{color:#fff}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:22px 20px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:15px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:769px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}}