/* DEFAULTS */
/* Apply a natural box layout model to all elements, but allowing components to change it.
 */
html {
	box-sizing: border-box;
}

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

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

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

.dnadesign__elementaluserforms__model__elementform {
    background-color:var(--MainSectionColours);
    font-family: var(--FontFamily);
    color:var(--BodyFontColour);
    padding:30px;
    width:90%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
}

#UserForm_Form_24_action_process {
    width:200px;
    height: auto;
    padding: 1em;
    font-family: var(--FontFamily);
    font-weight: bold;
    background-color: var(--NavBackgroundColour);
    color:var(--BodyFontColour);
    border: 2px solid var(--BodyFontColour);
    transition: background-color .2s linear, color .2s linear;
}

#UserForm_Form_24_action_process:hover {
    background-color: var(--BodyFontColour);
    color:var(--NavBackgroundColour);
}

.dnadesign__elementaluserforms__model__elementform h3 {
    font-size: 20px;
    font-weight: bold;
    font-kerning: -1;
    margin-bottom: 5px;
}

.dnadesign__elementaluserforms__model__elementform h4 {
    font-size: 16px;
    font-kerning: -1;
    margin-bottom: 5px;
}

#UserForm_Form_24_EditableTextField_0393f {
    width: 100%;
    height: 100px;

}

.dnadesign__elementaluserforms__model__elementform label {
    margin-top:1em !important;
}
#UserForm_Form_24 div {
    padding-bottom:10px;
}

footer .footer-button-contact {
    color: var(--BodyFontColour);
    font-family: var(--FontFamily);
    font-size:26px;
    background-color: transparent;
    width: 60%;
    margin: 2em auto 10px auto;
    border: solid 2px var(--BodyFontColour);
    align-items: center;
    font-weight: bold;
    font-kerning: -1;
    padding:0;
    padding:5px;
    transition: background-color .2s linear, color .2s linear;
}

.footer-button-contact:hover {
    background-color: var(--BodyFontColour);
    color: var(--MainSectionColours);
}

footer .footer-button-contact p {
    text-align: center;
    align-items: center;
    padding:0;
}


footer a {
    color: var(--BodyFontColour);
    text-decoration: none;
}

footer {
    padding: 1em !important;
    margin-bottom:0 !important;
}

/* TYPOGRAPHY */
body {
    font-family: var(--FontFamily);
    font-kerning: normal;
}


#site-title {
    font-family: var(--FontFamily);
    font-weight: 300;
    font-style: normal;
	font-size: 2.2rem;
	text-align: left;
	margin-bottom: 0px;
    font-weight: 400;
    color:#000000;
    padding-left: 2rem;
    padding-top: 0.5em;
    letter-spacing: -1px;
}

#tagline {
    font-family: var(--FontFamily);
	padding-bottom: 0.8em;
	text-align: left;
    color:#000000;
    padding-left: 2em;
}

p { 
    margin: 0 0 1em 0; 
}

.site-logo2 {
    height: 5rem;
    width: auto;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 40%;
    margin-bottom: 10px;
}

#HomePage  {
    padding: 0;
}

.embed-text-block {
    display: flex;
    flex-direction: column !important;
    gap: 30px;
    margin-bottom: 20px;
    width: 80%;
    margin-inline: 10%;
    justify-content: space-between;
}

.embed-text-block div {
    width: 100% !important;
}

.text-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 2em !important;
    line-height: 1.2 !important;
}

/* IMAGES */

img {
	margin: 0;
	width: 100%;
    height: auto;
}

#logo {
    display: none;
}

#main-images-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 1rem 0 1rem;
    padding: 1rem;
}

#main-images-flex img {
    padding: 1rem 0 1rem 0;
}



#HomePage main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#HomePage main section div {
    width: 100%;
    height: auto;
}




/* COLOUR SCHEME */

header {
    background-color: var(--HeaderColour);
    color: #000000;
}

#main-menu, #main-menu ul.secondary {
    background-color: var(--NavBackgroundColour);
}

#main-menu a {
    color: var(--NavFontColour);
}

#main-menu a.current, #main-menu a:hover {
    color: var(--HoverColour);
}

footer {
    background-color: var(--FooterColour);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--FooterFontColour);
    padding: 15px;
    font-family: var(--FontFamily);
}

footer p {
    font-family: var(--FontFamily);
    padding-bottom:30px;
    font-variant-emoji: text;
}

footer ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    margin-bottom: 1.5em;
    font-family: var(--FontFamily);
}

footer a {
    color: var(--FooterFontColour);
}

footer a:hover {
    color: var(--HoverColour);
    text-decoration: none;
}

footer ul img {
    width: 3rem;
    height: auto;
    margin-top: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

#main-menu ul img {
    height: 5rem;
    width: auto;
}



h1 {
    color:#000000;
    margin-left: 2rem;
}

h4 {
    margin-left: 2rem
}

#media-boxes, #exhibitions-boxes, .productItem, #CartForm_CartForm, .cartfooter, .cart, #PaymentForm_OrderForm {
    border-radius: 15px;
    padding:1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    height: 100%;
    width: 100%;
}

.exhibition-text > p {
    line-height: 1.2 !important;
}

/* DEFAULT LAYOUT - SINGLE COLUMN */

main, .sidebar {
    width: 100%;
    max-width: 36rem;
    margin: 0 auto;
}

/* ARROW */

#arrow {
    display:none;
    /* color: #000000;
    font-size: 3em;
    position: fixed;
    bottom: 0.2em;
    right: 0.3em;
    background-color: white;
    border-radius: 50%;
    padding: 0 0.25em 0 0.25em;
    box-shadow: 2px 2px 2px lightgray; */
}

/* UserDefinedForm */

#UserDefinedForm main h1{
    display: none;
}

#UserDefinedForm main h2 {
    color:#000000;
    font-size: 2em;
    margin: 0;
    padding-top: 0;
}

#UserDefinedForm main h4 {
    padding-left: 0;
    margin-left: 0;
    margin: 0;
    padding-top: 0;
}

#UserDefinedForm main h2, #UserDefinedForm main h3, #UserDefinedForm main h4, #UserDefinedForm main h5 {
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1.2em;
}

#UserDefinedForm #UserForm_Form_3 {
    width: 90%;
    /* box-shadow: 5px 2px 10px #a8a7a7; */
    background-color: white;
    border-radius: 15px 15px 15px;
    margin: auto;
    padding: 4rem 4rem 2rem 4rem;
    margin-bottom: 3rem;
}

.userform-fields {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: var(--BodyFontColour);
}

#UserDefinedForm input, textarea {
    width: 100%;
    margin-bottom: 20px;
}

#UserDefinedForm .middleColumn {
    width: 100%;
}

#UserDefinedForm .field {
    width: 100%;
}

#UserDefinedForm main h1 {
    color: #000000;
    font-family: inherit;
    text-align: center;
}

#UserDefinedForm {
    background-color: white;
}

#UserDefinedForm .btn-toolbar{
    margin-top: 20px;
    margin: 10px;
}

/* MOBILE MENU */

#main-menu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 3.75rem;
    transition: 0.33s; /* Transition effect to slide in the sidenav */
    font-family: "Inter", serif;
    color:#000000;
    display: flex;
    flex-direction: column;
    letter-spacing: -1px;
}

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

#main-menu ul {
	white-space: nowrap;
    color: #000000;
}

#main-menu li {
    font-size: 1.5rem;
    padding: 0.5em 2em;
}

#main-menu li a {
    text-decoration: none;
    /* display: block; */
}

#main-menu ul.secondary {
    margin-top: 0.5em;
}


#menu-open-button, #menu-close-button {
    font-weight: 400;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 1rem;
    background: transparent;
    border: 0;
    color: #000000;
    cursor: pointer;
}

/* The font size and top of the two "buttons" needs adjusting to get them to appear
   the same. */
#menu-open-button {
    font-size: 3.5rem;
    top: 24px;
}

#menu-close-button {
    font-size: 4rem;
    top: 0.6rem;
}


#media-boxes iframe {
    width:100% !important;
}

/*HEADER*/

Header {
    display: flex;
    flex-direction: row;
    color:#000000;
    background-color: #000000;
    margin-top:10vh;
    color:white;
    padding-bottom: 0;
    margin-left:10px;
    margin-right:10px;
    border-radius: 5px;
    border: #000000 2px;
    border-style: solid;
}

header #site-title {
    color: white;
    text-align:left;
    vertical-align: baseline;
    padding-bottom:0;
    margin-top:100px;
    margin-bottom:-20px;
    text-shadow: lightgrey 1px 1px 1px;
    margin-left:0;
    padding-left:0;
}

.nav-container {
    align-items: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav-links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 2rem;
}

.nav-logo {
    flex-grow: 0;
    margin: 0 0;
    text-align: center;
    padding: 10px 0;
}


/* Mobile styles */
@media (max-width: 68em) {
    .nav-container {
        flex-direction: column;
        align-items: center;
    }

    .nav-logo {
        order: -1; /* Moves the logo to the top */
        margin-bottom: 1rem;
        display: none;
    }

    .nav-links {
        flex-direction: column;
        text-align: center;
        padding-top: 40px;
    }

    .left-nav, .right-nav {
        justify-content: center;
    }
}


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

    A layout with two content columns and flexible white space on either side.

    If no sidebars are required, then the code for the Page grid can be removed.

    Calculate the media query's break point size by adding together the two main content
    columns in the grid, three times the column-gap (because there are four columns
    there are three gaps between them), and two to allow for the vertical
    scroll bar. This template's default width is calculated like this:
    36rem + 24rem + (3 x 2rem) + 2rem = 68em (note we use em, not rem, as the
    break point unit). */
@media screen and (min-width: 68em) {
    
    /* Page grid
    
    Create a four-column grid:
    1. The first column allows for white space to the left of the main content.
    2. The second column contains the main content.
    3. The third column contains the two sidebars (#1 above #2).
    4. The fourth column allows for white space to the right of the sidebars.
    
    The header, main menu, and footer are the full width of the window (spanning all 
    four columns). This can be altered by changing their grid-column values.
    
    The height of the fourth row will be flexible, so that sidebar #1 will have its
    content's height and sidebar #2 can increase its height if needed. The need
    for this arises if the main element has more height than the two sidebars
    combined.    */

    body {
        display: grid;
        grid-template-columns: 1fr 48% 48% 1fr;
        grid-template-rows: 150px min-content min-content 1fr min-content;
        grid-template-areas: "menu    menu    menu     menu"
                            ".        main  main    ."
                             ".        main  main    ."
                             ".        main  main    ."
                             "footer  footer  footer   footer";
        column-gap: 1%; 
    }
    
    header {
        grid-area: header;    
    }

    .dnadesign__elementaluserforms__model__elementform {
        padding:30px;
        width:60%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 15px;
        color: var(--BodyFontColour)
    }

    #mobile-logo-closebutton {
        display: none;
    }

    main {
        grid-area: main;
    }
    
    #main-menu {
        grid-area: menu;
        display: flex;
        flex-direction: row;
        justify-content: center;
        background-color: var(--NavBackgroundColour);
        padding:15px;
    }

    .embed-text-block {
        display: flex;
        flex-direction: row !important;
        gap: 30px;
        margin-bottom: 20px;
        width: 80%;
        margin-inline: 10%;
        justify-content: space-between;
    }
    
    .embed-text-block div {
        width: 100% !important;
    }
    
    .text-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2em !important;
        line-height: 1.2 !important;
    }


    #UserDefinedForm #UserForm_Form_3 {
        width: 60%;
    }
    
    
    footer {
        grid-area: footer;
    }
           
    main, .sidebar {
        /* Override the max-width set above for single-column layout. */
        max-width: 100%;
    }
    
    .sidebar {
        background-color: #efefef;
    }

    #HomePage main section {
        width: 100%;
        height: auto;
    }

    #HomePage main {
        display:flex;
        flex-direction: column;
    }
    
    #HomePage main section div {
        width: 100%;
        height: auto;
    }
    
    #media-home {
        display:flex;
        flex-direction: row;
    }

    /* End of page grid */

    /* ARROW */

    #arrow {
        display:none;
        /* font-size: 3em;
        position: fixed;
        bottom: 0.5em;
        right: 0.5em; */
    }

    /* Header layout */

    /*FOOTER*/
    #footer-flex-box {
        display:flex;
        flex-direction: row;
        justify-content: space-between;

    }

    .contact-button-a, .social-networks-div {
        width: 40%;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    .footer-button-contact {
        padding:10px !important;
        margin:0 !important;
        width: 100%;
        height:auto;
        font-size:60px;
        font-weight:bold;

    }

    .social-networks {
        justify-content: right;
    }

    .social-networks li img {
        margin-top: auto;
        margin-bottom: auto;
    }

    .social-networks li img {
        width:60px;
        height:60px;
    }
    /* Main menu
    
       Now we change to a visible main menu, so we have to override the 
       mobile menu above. */
    
    #main-menu {
        position: sticky;
        height: fit-content;
        top: 0;
        z-index:100;
        width: 100%;
        padding: 0;
        max-width: 100%;
        transition: 0s;
        background-color: var(--NavBackgroundColour);
        z-index: 25;
        align-items: center;
        border-bottom: 2px black solid;
    }

    #menu-open-button, #menu-close-button {
        display: none;
    }
    
    #main-menu ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /* To get the main menu to sit above the two columns, it 
            needs to be the same width as the total of those columns (see above). */
        /* width: 62rem; */
        /* margin: 0 auto; */
        color: black;
    }
    
    #main-menu li {
        margin: 0 2em 0 2em;
        /* padding: 1rem; */
    }
    
    #main-menu ul.secondary {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        transition: all 0.5s ease;
        /* Negative left margin means the menu items will line up with the 
           parent menu item. */
        margin: 0 0 0 -1em;
        padding: 0;
        display: none;
    }
    
    #main-menu li:hover > ul.secondary {
        visibility: visible;
        opacity: 1;
        display: block;
        width: auto;
    }
    
    #main-menu ul.secondary li {
        margin: 0.5em 1em;
    }
    
    footer {
        padding: 1em;
    }
    
    /* Typography */


    /* Gallery Page */

    #GalleryPage #media-flex, #ExhibitionPage #exhibition-flex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    #media-boxes {
        outline: none;
        border-radius: 0;
        padding:1%;
        margin-top: 0;
        margin-bottom:0;
        box-shadow: none;
        color: black;
        line-height: 0;
    }

    #exhibitions-boxes {
        outline: none;
        border: none;
        border-radius: 0;
        padding:0 1rem 0 1rem;
        margin: 0 0 2rem 0;
        box-shadow: none;
        width: 30%;
    }

    /* .bottom-left {
        position: static;
        text-align: center;
        z-index: 15;
    } */

    
    
    .gallery-image {
        position: relative;
    }


    #GalleryPage #media-boxes, #ExhibitionPage #exhibitions-boxes {
        width: 30%;
    }


    /* Main Page */

   

    #homepage-main-first-section {
        display: flex;
        flex-direction: row;
    }
    
    #homepage-main-first-section div {
        width: 100%;
    }

        /* TYPOGRAPHY */
    body {
        font-family: var(--FontFamily);
    }

    p { 
        margin: 0 0 1em 0; 
    }

    #HomePage #media-home p {
        padding: 0;
    }


    /* IMAGES */

    img {
        margin: 0;
        width: 100%;
        height: auto;
    }

    #logo {
        display: none;
    }

    #main-images-flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 1rem 0 1rem;
        padding: 1rem;
    }

    #main-images-flex img {
        padding: 1rem 0 1rem 0;
    }

   


    #HomePage main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #HomePage main section div {
        width: 100%;
        height: auto;
    }




    /* COLOUR SCHEME */

    header {
        background-color: var(--HeaderColour);
        color: #000000;
    }

    #main-menu, #main-menu ul.secondary {
        background-color: var(--NavBackgroundColour);
    }

    #main-menu a {
        color: var(--NavFontColour);
    }

    #main-menu a.current, #main-menu a:hover {
        color: var(--HoverColour);
    }

    footer {
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-family: var(--FontFamily);
       
    }

    footer ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        list-style-type: none;
        margin-bottom: 1.5em;
        font-family: var(--FontFamily);
        
    }




    footer a:hover {
        text-decoration: none;
    }

    footer ul img {
        width: 3rem;
        height: auto;
        margin-top: 2rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }

    #main-menu ul img {
        height: 5rem;
        width: auto;
    }



    h1 {
        color:#000000;
        margin-left: 2rem;
    }

    h4 {
        margin-left: 2rem
    }

    #media-boxes, #exhibitions-boxes, .productItem, #CartForm_CartForm, .cartfooter, .cart, #PaymentForm_OrderForm {
        border-radius: 15px;
        padding:1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .exhibition-text > p {
        line-height: 1.2 !important;
    }

    /* DEFAULT LAYOUT - SINGLE COLUMN */

    main {
        width: 100%;
        margin: 0 auto;
    }

    /* ARROW */

    #arrow {
        display:none;
        /* color: #000000;
        font-size: 3em;
        position: fixed;
        bottom: 0.2em;
        right: 0.3em;
        background-color: white;
        border-radius: 50%;
        padding: 0 0.25em 0 0.25em;
        box-shadow: 2px 2px 2px lightgray; */
    }

    /* UserDefinedForm */

    #UserDefinedForm main h1{
        display: none;
    }

    #UserDefinedForm main h2 {
        color:#000000;
        font-size: 2em;
        margin: 0;
        padding-top: 0;
    }

    #UserDefinedForm main h4 {
        padding-left: 0;
        margin-left: 0;
        margin: 0;
        padding-top: 0;
    }

    #UserDefinedForm main h2, #UserDefinedForm main h3, #UserDefinedForm main h4, #UserDefinedForm main h5 {
        text-align: center;
        line-height: 1.2;
        margin-bottom: 1.2em;
    }

    #UserDefinedForm #UserForm_Form_3 {
        width: 90%;
        /* box-shadow: 5px 2px 10px #a8a7a7; */
        background-color: white;
        border-radius: 15px 15px 15px;
        margin: auto;
        padding: 4rem 4rem 2rem 4rem;
        margin-bottom: 3rem;
    }

    .userform-fields {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    #UserDefinedForm input, textarea {
        width: 100%;
        margin-bottom: 20px;
    }

    #UserDefinedForm .middleColumn {
        width: 100%;
    }

    #UserDefinedForm .field {
        width: 100%;
    }

    #UserDefinedForm main h1 {
        color: #000000;
        font-family: inherit;
        text-align: center;
    }

    #UserDefinedForm {
        background-color: white;
    }

    #UserDefinedForm .btn-toolbar{
        margin-top: 20px;
        margin: 10px;
    }

    /*HEADER*/

    Header {
        display: flex;
        flex-direction: row;
        color:#000000;
        background-color: #000000;
        margin-top:10vh;
        color:white;
        padding-bottom: 0;
        margin-left:10px;
        margin-right:10px;
        border-radius: 5px;
        border: #000000 2px;
        border-style: solid;
    }

    header #site-title {
        color: white;
        text-align:left;
        vertical-align: baseline;
        padding-bottom:0;
        margin-top:100px;
        margin-bottom:-20px;
        text-shadow: lightgrey 1px 1px 1px;
        margin-left:0;
        padding-left:0;
    }

}


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

   A three-column layout with a left-hand sidebar column, a central main column, and a
   right-hand sidebar column. If you do not need to have two sidebar columns, then 
   simply delete this media query. */

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

    /* Page grid 
    
       We can use the grid areas applied to the structural elements above and
       simply change the number of columns and grid-template-areas here. */    

    body {        
        grid-template-columns: 1fr 12rem 82rem 1fr;
        grid-template-rows: min-content min-content 1fr min-content;
        grid-template-areas: "menu      menu         menu           menu"
                            "header  header       header           header"
                             "          main        main            ."
                             "footer  footer       footer           footer";
    }

    .footer-button-contact {
        padding:20px !important;

    }
    #site-title {
        font-size: 9rem;
        margin-top:400px;
        margin-bottom:0;
        text-align: left;
        letter-spacing: -5px;

    }

    

    

    #tagline {

        margin-bottom: none;
        text-align: left;

    }

    #main-images-flex {
        width: 82rem
    }
}