:root {
  --main-brand-color: #1b4141;
  --secondary-brand-color: #304a4a; /* #024163 */
}

@font-face {
  font-family: "Playfair";
  src:
      local("Playfair"),
      url("../fonts/PlayfairDisplay-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Cinzel Decorative";
    src:
        local("Cinzel Decorative"),
        url("../fonts/CinzeldecorativeRegular-qmzq.ttf") format("truetype");
}

@font-face {
    font-family: "Cinzel Decorative Bold";
    src:
        local("Cinzel Decorative Bold"),
        url("../fonts/CinzelDecorativeBold-AEBg.ttf") format("truetype");
}   

/* 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: #042925;
    color: #fff;
}

main {
    background-color: #fff;
}

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

h2, h3 {
    color: #000;
}

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

footer h2 {
    color: #fff;
}

#message {
    color: #000;
}

nav a {
	color: #fff;
}

.places_left {
    color: #a30000;
}

.workshop .type, .workshop .location {
    color: #000;
}

.workshop .places_left {
    background-color: var(--main-brand-color);
    color: #fff;
    text-align: center;
    margin-bottom: 0;
    padding: 0.5em;
}

.workshop .places_left.warning {
    background-color: #a80000;
}

.workshop .places_left.full {
    background-color: #517b7b;
}

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


/* TYPOGRAPHY */

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

h1, h2, h3, #message, #site-title, dt {
    font-family: Playfair, Georgia, serif;
    font-weight: normal;
}

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

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

main > h1 {
    font-variant: small-caps;
}

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

.call-to-action, .more-info {
    font-weight: normal;
}

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

.workshop {
    text-align: center;
}

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

.sidebar h2 {
    margin-top: 0;
}

footer h2 {
    font-size: 1.375rem;
}

h3, dt {
    font-size: 1.5rem;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

p {
    margin: 0 0 1em 0;
}

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

.team-member .location {
    font-size: 1.2em;
    text-transform: uppercase;
    margin-top: -1.5em; /* Move closer to h2 above */
}

/* Workshop visual menu */

.workshop h3, .workshop .type, .workshop .location, #homepage-features h3 {
    font-family: Playfair, Georgia, serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.workshop h3:first-letter, #homepage-features h3:first-letter {
    font-size: 1.15em;
}

.workshop h3 {
    margin-bottom: 0.15em;
    line-height: 1;
}

.workshop h3 > a {
    color: inherit;
    text-decoration: none;
    font: inherit;
}

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 {
    font-family: "Cinzel Decorative Bold";
    margin: 0;
    letter-spacing: 0.125em;
}

#site-title > .upper {
    text-transform: uppercase;
}

#site-title .subtitle {
    font-family: "Cinzel Decorative", Playfair, Georgia, serif;
    letter-spacing: 0.25em;
}

#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: 14em;
    padding: 0.5em;
    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;
}

.workshop .icon {
    display: inline-block;
    width: 24px;
    margin-right: 0.5em;
}

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

footer #social a {
    display: inline-block;
    margin-right: 1em;
}

img.social {
    width: 40px;
}

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

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

/** ----------------------------------------------------------
 *
 * This stylesheet includes both generic form styles and 
 *    additional form styles for the User Defined Form Module.
 *
 ** ------------------------------------------------------- */



#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: 0.5em;
}

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;
}


/* AREA SPECIFIC */
    /* 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;
}
div.holder-required {               /* This class needs to be changed - is used for both input and div */
    /* background-color: #f9d0d0;
    border: 1px solid #cf0000;
    padding: 10px;
    margin-left: -11px; */
}
form input.holder-required {        /* This class needs to be changed - is used for both input and div */
    border: 1px solid #cf0000; 
}

/* Error messages */
input:invalid,
textarea:invalid {
    /* border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red;
    -webkit-box-shadow: 0px 0px 5px red;
    box-shadow: 0px 0px 5px red; */
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid {
    /* background-color: #f0dddd */
}

/* 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;
}



/* DEFAULT LAYOUT - SINGLE COLUMN */

/* LAYOUT */

/* 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;
}

#indonesia-map {
    display: none;
}
    
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;
}

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

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

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);
	/* height: 5em; */
    margin-top: 4em;
    column-gap: 1em;
}

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

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

/* Home Page */

#homepage-features {
    margin-top: 2em;
}

#homepage-features > div {
    width: 20rem;
    margin: 0 auto;
}

#homepage-features h3 {
    text-align: center;
}

#homepage-features a {
    text-decoration: none;
}

/* Workshop visual menu */

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

/* Workshop page */

#WorkshopPage #details {
    padding: 1.5em 0;
    border-top: 1px solid var(--main-brand-color);
    border-bottom: 1px solid var(--main-brand-color);
}

#WorkshopPage #details table {
    border: 0;
    margin: 0 auto;
}

#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 .register {
    margin-top: 3em;
}

#WorkshopPage #overview {
    padding-top: 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;
}


/* Team Members Page */

#TeamPage .team-member {
    margin-bottom: 4em;
}

#TeamPage .team-member > img {
    width: 40%;
}

/* COLOUR SCHEME */

header {
    background-color: #fff;
}

#site-title {
    color: #430a07;
    & .subtitle {
        color: var(--main-brand-color);
    }
}
 
h2 { 
    border-bottom: 1px solid var(--secondary-brand-color);
}

footer h2 { 
    border-bottom: 0.5px solid #fff;
}

.team-member h2 {
    border-bottom: 0;
}
  
/* TYPOGRAPHY */

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

h2 { 
    font-size: 1.5rem;
    margin: 2em 0 1em 0;
}

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

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

main > h1 {
    font-size: 1.75rem;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--main-brand-color);
    margin: 1em 0 1em 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-open-button {
	display: block;
    font-size: 2rem;
    text-align: right;
    line-height: 1;
    padding: 0.2em 0;
    color: var(--main-brand-color);
    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;
}


main {
    display: grid;
    grid-template-areas: "head"
                         "title"
                         "summary"
}

main > h1 {
    grid-area: title;
}

main > picture {
    grid-area: head;
}

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

#WorkshopPage #summary > p {
    margin-top: -1.75em;
    text-align: center;
}


@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: 38rem;
        display: grid;
        grid-template-columns: repeat(4, 8rem);
        column-gap: 2em;
        padding: 0;
    }
    
    #homepage-features {
        width: 38rem;
        display: grid;
        grid-template-columns: repeat(8, 4rem);
        column-gap: 1em;
        padding: 0;
    }
    
    #homepage-features > div:first-child {
        grid-column: 2;
    }
    
    #homepage-features > div {
        grid-column: span 2;
        width: 100%;
    }
    
    #testimonials {
        padding-right: 0;
        padding-left: 0;
    }        
    
    main {
        grid-template-areas: "head head head head head head"
                             ". title   title   title   title ."
                             ". content   content   content   content ."
                             ". workshops workshops workshops workshops .";
    }

    #WorkshopPage main {
        grid-template-areas: "head head head head head head"
                             ". title title title title ."        
                             ". summary summary summary summary ."
                             ". details details details details ."
                             ". overview overview overview overview ."
                             ". gallery gallery gallery gallery ."
                             ". itinerary itinerary itinerary itinerary ."
                             ". expectations expectations expectations expectations ."
                             ". fees fees fees fees ."
                             ". instructors instructors instructors instructors ."
                             ". reviews reviews reviews reviews .";
    }
    
    main > h1 {
        grid-area: title;
    }
    
    main > picture {
        grid-area: head;
    }
    
    main > #content {
        grid-area: content;
    }
    
    main > #workshops {
        grid-area: workshops;
    }
    
    /* Workshop visual menu */

    #WorkshopMenuPage #workshops, #upcoming-workshops .workshop  {
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    
    #WorkshopPage #summary > p {
        margin-top: -2em;
    }

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

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

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

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

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

    #WorkshopPage #gallery > h2 {
        grid-column: span 4;
    }
    
    aside > * {
        grid-column: span 4;
    }

    #upcoming-workshops .workshop {
        grid-column: span 2;
    }

    #testimonials > div {
        grid-column: span 2;
    }
    
    #TeamPage .team-member > img {
        width: 33.333333%;
        float: left;
        margin: 0 2em 1em 0;
    }

    
    /* 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;
        margin-bottom: 0;
    }
    
    #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 ."
                             ". social social . . ."
                             ". copyright copyright copyright copyright .";
        column-gap: 2em;
    }
    
    footer #footer-links {
        grid-area: links;
    }
    
    footer #contact-details {
        grid-area: contact;
    }
    
    footer #social {
        grid-area: social;
    }
    
    /* 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;
    }
    
    nav a {
        font-size: 0.9375rem; /* Not my idea */
    }
    
    #WorkshopPage #details th {
        font-weight: 600;
        padding-right: 4em;
    }

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


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

@media screen and (min-width: 64em) {
	
    body {
		display: grid;
		grid-template-columns: 1fr repeat(6, 8em) 1fr;
		grid-template-areas: "header header header header header header header header "
		                     "menu   menu   menu   menu   menu   menu   menu   menu   "
							 "main   main   main   main   main   main   main   main   "
							 ". workshop workshop workshop workshop workshop workshop .  "
							 ". testimonial testimonial testimonial testimonial testimonial testimonial ."
							 "footer footer footer footer footer footer footer footer ";
		column-gap: 2em;
	}
	
	header {
		grid-area: header;
	}
	
	#main-menu {
		grid-area: menu;
	}
	
	main {
		grid-area: main;
	}
	
	#upcoming-workshops {
		grid-area: workshop;
	}
	
	#testimonials {
		grid-area: testimonial;
	}
	
	footer {
		grid-area: footer;
	}
 
    main {
        display: grid;
        grid-template-columns: 1fr repeat(6, 8em) 1fr;
        grid-template-areas: "head head head head head head head head"
                             ". title title title title title title ."
                             ". . content content content content . ."
                             ". workshops workshops workshops workshops workshops workshops .";
    }

    #WorkshopPage main {
        display: grid;
        grid-template-areas: "head head head head head head head head"
                             ". . . title title title title ."
                             ". . . summary summary summary summary ."
                             ". 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 expectations expectations expectations expectations ."
                             ". menu menu fees fees fees fees ."
                             ". menu menu instructors instructors instructors instructors ."
                             ". menu menu reviews reviews reviews reviews .";
    }
	
    /* #workshops,  */
    #gallery, #upcoming-workshops, #testimonials {
        width: 58em;
        max-width: 58em;
        display: grid;
        grid-template-columns: repeat(6, 8em);
        column-gap: 2em;
        padding: 0;
    }
	
	#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;
    }

    header {
        grid-template-columns: 20em 1fr;
        grid-template-areas: "logo tagline";
        padding: 1em 0 0 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;
        color: #fff;
    }
    
    #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;
    }
    
    /* Typography */
    
    header > a img {
        width: 4rem;
    }
    
    #message {
        display: block;
    }

    #site-title {
        font-size: 1.5rem;
    }
    
    #site-title .subtitle {
        font-size: 0.45em;
    }
    
    #tagline {
        margin-top: 2.15em;
    }
    
    #indonesia-map {
        display: block;
        width: 20rem;
        grid-column: 2;
        justify-self: end;
    }
    
    .places-left {
        font-size: 1.125rem;
    }
    
    /* All pages */
    
    main > h1 {
        font-size: 2rem;
    }
    
    #main-image {
        grid-area: head;   
    }
        

    
    #workshops > .workshop {
        grid-column: span 3;
    }
    
    #workshops > h2 {
        grid-column: span 6;
    }
    
    #content {
       grid-area: content;
    }
    
    #all-workshops {
        grid-area: workshops;
    }
    
    
    /* Home Page */
    
    #homepage-features {
        display: flex;
        justify-content: space-between;
    }
    
    #homepage-features > div {
        flex: none;
        width: 25%;
    }
    
    
    /* 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 ."
                             ". social social social . . . ."
                             ". copyright copyright copyright copyright copyright copyright .";
    }
    
    
    /* Workshop Page */
   
    
    #WorkshopPage #workshop-menu {
        grid-area: menu;
    }
    
    #WorkshopPage main > * {
        max-width: 100%;
    }
    
    #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 #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: 0 1em 1em 1em;
        background-color: #fff;
    }
    
    #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 {
        letter-spacing: 0.1em;
        margin: 0 1em;
        padding: 0;
        color: var(--main-brand-color);
    }

    #main-menu a:hover, #main-menu li.current, #main-menu a.section { 
        background-color: transparent;
    }
    
    #main-menu li.current > a, #main-menu a:hover { 
        color: #a80000;
    }
    
    #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: 90em) {
	
	body {
		display: grid;
		grid-template-columns: 1fr repeat(12, 5rem) 1fr;
		grid-template-areas: "header header header header header header header header header header header header header header "
		                     "menu   menu   menu   menu   menu   menu   menu   menu   menu   menu   menu   menu   menu   menu   "
							 "main   main   main   main   main   main   main   main   main   main   main   main   main   main   "
							 ". workshop workshop workshop workshop workshop workshop workshop workshop workshop workshop workshop workshop  .  "
							 ". testimonial testimonial testimonial testimonial testimonial testimonial testimonial testimonial testimonial testimonial testimonial testimonial ."
							 "footer footer footer footer footer footer footer footer footer footer footer footer footer footer ";
		column-gap: 2em;
	}

   
    main, #all-workshops, footer {
        grid-template-columns: 1fr repeat(8, 8em) 1fr;
    }
    
    #gallery, #upcoming-workshops, #testimonials {
        grid-template-columns: repeat(8, 8em);
    }
    
    #workshops {
        /* Fit three workshops across the page */
        grid-template-columns: repeat(9, 6.8888888889em);
    }
	
	#workshops > .workshop {
        grid-column: span 3;
    }

    main {
        grid-template-areas: "head head head head head head head head head head"
                             "title title title title title title title title title title"
                             ". . .   content   content     content  content   . . ." 
                             ".  workshops workshops workshops workshops workshops workshops workshops workshops .";
    }
    
    #WorkshopPage main {
        grid-template-areas: "head head head head head head head head head head "
                             ". title title title title title title title title ."
                             ". summary summary summary summary summary summary summary summary ."
                             ". submenu submenu  details      details      details      details      gallery gallery ."
                             ". submenu submenu  overview     overview     overview     overview     gallery gallery ."
                             ". submenu submenu  itinerary    itinerary    itinerary    itinerary    gallery gallery ."
                             ". submenu submenu  expectations expectations expectations expectations gallery gallery ."
                             ". submenu submenu  fees         fees         fees         fees         gallery gallery ."
                             ". submenu submenu  instructors  instructors  instructors  instructors  gallery gallery ."
                             ". submenu submenu  reviews      reviews      reviews      reviews      gallery gallery .";
    }
	
	#WorkshopPage #workshop-menu {
        grid-area: submenu;
    }
    
    footer {
        grid-template-areas: ". links links links contact contact contact social social social ." 
                             ". copyright copyright copyright copyright copyright copyright copyright copyright copyright .";
    }
    
    #workshops > h2 {
        grid-column: span 9;
    }
	
	#upcoming-workshops .workshop {
        grid-column: span 2;
    }
    
    #gallery, #upcoming-workshops, #homepage-features, #testimonials {
        width: 78em;
        max-width: 78em;
    }
    
    aside > * {
        grid-column: span 8;
    }
    
    #testimonials .testimonial {
        grid-column: span 4;
    }

    #homepage-features, #testimonials, #sidebar-two {
        margin: 0 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;
    }
    
    #main-menu a {
        margin: 0 1.5em;
    }
    
    /* Workshop Page */

    #WorkshopPage #gallery {
        display: block;
    }
    
    #WorkshopPage #gallery h2 {
        display: none;
    }
    
    #WorkshopPage #gallery img {
        margin-bottom: 2em;
        cursor: pointer;
    }
	
	/* Typography */
    
    main > h1 {
        font-size: 2.5rem;
    }
     
    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;
    }
    
    header {
        background-color: #042925;
    }
    
    a {
        color: #eee;
    }
    
    a.btn {
        color: #333;
    }

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

@media screen and (prefers-color-scheme: dark) and (min-width: 64em) {
    
    #main-menu {
        background-color: #042925;
    }
    
    #main-menu a {
        color: #fff;
    }
    
    #main-menu li.current > a, #main-menu a:hover { 
        color: #dfe35a;
    }

}

@media only print {
    
    nav, aside, footer, #logo, #header-img {
        display: none;
    }

    main {
        width: 100%;
        max-width: 100%;
    }

    body {
        font-size: 12px;
        color: #000;
    }

    h1, h2, h3 {
        font-family: Helvetica, Arial;
    }

    header h1, #tagline, .typography h1, .typography h2, a, .typography a {
        color: #000;
    }

    #WorkshopPage #gallery {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 1em;
    }
    
}