body {

    font-family: Arial;
    font-size: 12pt;
}

        div.breadcrumbs {
            margin-left: 5px;
            font-size: 14pt;
            margin-bottom: 25px;
            font-size: 13pt;
        }

        div.breadcrumbs a {
            text-decoration: none;
            
        }


/* ----------------------- Main Containers --------------------------------------- */

div.body-container {
    margin: 0 auto;
    max-width: 600px;
}

/* Mobile */

    div.body-container {
        padding: 0.5rem;
    }

/* /Mobile */


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

    div.body-container {
        padding: 1rem;
    }

}




header div.header-container {

    margin: 0 auto;
    max-width: 800px;
    padding: 0rem;

    /*
    border: 1px solid blue;
    */

}

footer div.footer-container {
    margin: 0 auto;
    max-width: 700px;
    padding: 1rem;

}

/* ----------------------- /Main Containers --------------------------------------- */




header {
    min-height: 55px;
}




/* --------------------------------- Colours / Branding ----------------------------- */

div.main-body-section {
    background: linear-gradient(135deg, hsl(200, 100%, 70%), hsl(204, 0%, 100%));
    background: linear-gradient(135deg, hsl(130, 50%, 20%), hsl(170, 92%, 40%)); /* emerald */

    background: linear-gradient(135deg, hsl(195, 100%, 70%), hsl(190, 100%, 95%));
}


header, footer {
    background: hsl(0, 0%, 10%);
    color: hsl(0, 0%, 95%);
}

header div.bars-for-nav {
    color: hsl(0, 0%, 95%);
}

header div.bars-for-nav a {
    color: hsl(0, 0%, 95%);
}

header div.top-nav a {
    color: hsl(0, 0%, 95%);
}

footer h2 {
            color: hsl(198, 95%, 40%) ;
        }

h1 {
            color: hsl(198, 80%, 30%);
    }

        h1 em {
            color: hsl(185, 80%, 45%);
        }

        h2 {
            color: hsl(170, 80%, 30%);
            color: hsl(198, 80%, 30%);
        }

        h3 {
            color: hsl(198, 80%, 30%);
        }

footer div.footer-panel div.footer-panel-links a {
    color: hsl(195, 90%, 70%);
    color: hsl(195, 95%, 70%);
    color: hsl(0, 0%, 95%);
}



/* ------- main links color ---------- */

div.panel a {
    color: hsl(195, 90%, 40%);

    /*
    transition:ease;
        text-decoration: none;
        transition-delay: 0.1s;
        transition-delay: 0.2s;
        */
    
}

div.panel a:hover {
    color: hsl(195, 90%, 50%);
    /*
    transition:ease;        
        */
    
}

/* ------- /main links color ---------- */




footer div.footer-panel div.footer-panel-links a:hover {
    color: hsl(0, 0%, 90%);
}



div.panel {
    background: hsl(0, 0%, 98%);
    color: hsl(0, 0%, 35%);
}

div.main-body-section.dark {
    /*
    background: hsl(0, 0%, 10%);
        */
}

div.main-body-section.dark div.panel {
    background: hsl(0, 0%, 10%);
    color: hsl(0, 0%, 98%);
}

div.main-body-section.dark div.panel {
    background: hsl(0, 0%, 10%);
    color: hsl(0, 0%, 98%);
}


div.main-body-section.dark h1 {
            color: hsl(198, 80%, 80%);
            color: hsl(198, 80%, 48%);
    }

div.main-body-section.dark h2 {
            color: hsl(198, 80%, 30%);
            color: hsl(170, 80%, 40%);

        }

div.main-body-section.dark h3 {
            color: hsl(198, 80%, 50%);
        }




/* --------------------------------- Colours / Branding ----------------------------- */







/* headings */

        h1 {
            font-size: 24pt;
            margin-bottom: 0.5em;
            margin-top:0;
        }

        h1 em {
            font-style: normal;
        }

        h2 {
            font-size: 20pt;
        }

        h3 {
            font-size: 16pt;
        }

        footer h2 {
            font-size: 19pt;
        }

        section {
            margin-top: 0.5rem;
            margin-top: 0.5rem;

        }



/* headings */





header div.name-of-site {
    display: inline;
    float: left;


    padding: 0;
    padding-left:0.5em;

    padding-top: 0.52rem;

    margin: 0;
    font-size: 18pt;
    font-weight: bold;
    font-family: Tahoma;
    font-family: Arial;
    font-weight: 900;

    /*

        color: #b0dbdb;

    */
}


header div.top-nav {
    display: inline;
    float: right;

    margin-top: 1.2em;
    margin-bottom: 0.3rem;
    padding-left: 1rem;
}





header div.top-nav.opened {
            display:block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            background: black;
            padding-bottom: 100px;
            padding-top: 1rem;
}

header div.top-nav.opened a {
            padding: 0.9em 0.3em;
            display: block;
            float: none;
            font-size: 1.5rem;
}


a.close-mobile-nav-link.display {
            display:block;
            position: absolute;
            top: 1.4rem;
            right: 1.4rem;
            color: hsl(0, 0%, 95%);
            text-decoration: none;
            font-size: 27pt;
}

a.close-mobile-nav-link.hidden {
    display: none;
}




header div.bars-for-nav {
    display: inline;
    float: right;
    font-size: 2.2rem;
    padding-right: 1.4rem;
    padding-top: 0.3rem;

}

header div.bars-for-nav a {

}




/* mobile */

header div.bars-for-nav {
    display: unset;
}

header div.top-nav {
    display: none;
}

/* /mobile */

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

    header div.top-nav {
        display: inline;
    }

    header div.bars-for-nav {
        display: none;
    }

}


p {
    line-height: 1.5em;
}





main {

}



header div.top-nav a {

    font-size: 13pt;
    font-weight: bold;
    font-weight: normal;


    text-decoration: none;
    display:inline-block;
    padding-right: 1.8rem;
}

header div.top-nav i {
    padding-right: 0.2rem;
    display: none;
}

footer {



}

footer div.footer-copyright {
    padding-top: 0.5rem;
    padding-left: 0rem;
    margin-left: 0rem;
    margin-top: 0rem;
}


footer div.footer-panel {

    display: inline;
    float: left;

    padding: 1rem;
    /*
    border: 1px solid white;
        */
}

footer div.footer-panel.panel-1 {
    /*
    border: 1px solid blue;
        */

    margin-right: 1.5rem;
}





footer div.footer-panel div.footer-panel-links {
    margin: 0.5rem 0rem;
}





footer div.footer-panel div.footer-panel-links a {


    line-height: 2.1rem;
    font-weight:bold;
    font-weight:normal;
    font-size: 12.5pt;



    text-decoration: none;
}



footer div.footer-panel h2 {
    margin-top: 0;
}

div.icons i {

    color: black;
    line-height: 1.5em;

    font-size: 30pt;
}


/* Panel Display and Look and Feel */





div.panel {


    padding: 1.5rem;
    margin-top: 0rem;
    border-radius: 0.7rem; 

}


br.clear-left {
    line-height: 0;
    clear: left;
}



/* /Panel Display and Look and Feel */

        ul li {
            padding: 0.5em 0em;
            font-size: 12pt;
            line-height: 1.5;

            list-style: square;

        }



/* cookies */



        div.cookies { /* cookies feel with background */

            position: fixed;



            background: hsl(0, 0%, 99%);
            color: hsl(0,0%, 10%);

            left: 0px;
            
            bottom: 40px;
            bottom: 0px;

            width: 100%;

            padding: 0.2em 0em;

            z-index: 100000;

            border-top: 1px solid hsl(0, 0%, 70%);

        }

        div.cookies a {
            color: hsl(0,0%, 10%);
            text-decoration: underline;
        }

        div.cookies div.cookies-content-container { /* content spaced out in center of the screen */
            margin: 0 auto;

            max-width: 1290px;

            padding: 0em 1.5em;


            padding-bottom: 0.1em;

        }

        div.cookies div.cookies-buttons {
            
            display: inline;
            float: left;
            

        }





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

            div.cookies div.cookies-buttons {
            
                padding-top: 30px;                
                    
            }
        }




        div.cookies div.cookies-about { /* main part about cookies, also contains text about cookies */
            display: inline;
            float: left;
            
            margin-right: 30px;
            
            
            max-width: 1100px;
            
            margin-top: 1em;

            

            line-height: 1.5;
            font-size: 11.5pt;

            padding: 0em 0em;

            padding-bottom: 1em;

            
        }

        div.cookies-about em {
            font-style:normal;
            font-weight:bold;
        }

        div.cookies div.button { /* cookies button to accept or reject */
            display: inline;
            float: left;
            margin-right: 1.35em;
            
            padding: 0.5em 0.5em; 

            opacity: 1;
            
            background: hsl(0,0%, 15%);
            color: hsl(0, 0%, 95%);

            margin-top: 0em;

            margin-bottom: 1em;

            font-size: 12pt;
        }

        div.cookies div.button.essential-only-button {
            background: hsl(0,0%, 50%);
        }

        div.cookies div.button.accept-button {

        }



        div.cookies-hidden { /* set to make cookies notice hidden */
            display: none;
        }

        div.cookies div.more-explanation {
            margin-top: 1em;
        }





        div.cookies-notice-close a {
            padding-right: 2em;
            padding-top: 1em;
            font-size: 10pt;
            color: hsl(0,0%, 90%);
            text-decoration: none;
            font-weight: normal;
            font-family:Arial;
            display:inline-block;
        }

        div.cookies-notice-close {
            color: hsl(0,0%, 90%);
            line-height:10pt;
            padding-top: 0px;
            padding: 0;
            margin: 0;
            text-align: right;
            display: none;
        }





/* /cookies */