html {
    background: #2f4f4f;
}

body, header, footer, nav, main, section {
    display: block; 
}

body {
    margin: auto;
    max-width: 1920px;
    max-height: auto;
    background: #ffffff;
    color: #404040;
    line-height: 1.5em;
    overflow: auto;
}

body, h1, h2, h3, h4, h5, h6, p {
    font-family: 'Muli', sans-serif;
    font-weight: 300;
    text-align: left;
}

h1 {
    font-size: 26px;
    line-height: 1.4em;
    color:  #222222;
} 

h2, h3, h4, h5, h6, p, ul {
    font-size: 17px;
    line-height: 1.7em;
    color: #222222;
}

.list, .list li {
    line-height: 2em;
}

.list ul li {
    line-height: 2em;
}

.clearfix {
    clear: both;
}

#mobile-only, .nav-list-mobile, #hide-robot {
    display: none;
}

#exc-mobile {
    display: block;
}

/*----------------NAVBARS--------------------*/

.header-nav {
    width: 40%;
    float: right;
    padding: 0.7%;
    line-height: 1.8;
}

.header-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.header-nav li {
    width: 20%;
    float: left;
    text-align: center; 
}

.header-nav li a {
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: 300;
    text-decoration: none;   
}

.header-nav li a:hover {
    color: #cccccc;
}

/*----------------MOBILE NAVBARS--------------------*/

.header-nav li.icon {
    margin: 0;
    width: 100%;
    float: left;
    text-align: center;
    background: #2F4F4F;
    display: none;
}

/*----------HEADER AND LOGO----------*/

header {
    display: block;
    width: 100%;
    float: left;
    background: #2f4f4f;
}

.header-image-background {
    margin: -16.5% 0 0 5%;
    width: 50%;
    float: left;
    font-size: 34px;
    font-weight: 300;
    line-height: 1.3;
    background: rgba(9, 32, 42, 0.50);
}

.header-image-background-cropped {
    margin: -10.5% 0 0 24%;
    width: 48%;
    float: left;
    text-align: center;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.3;
    background: rgba(9, 32, 42, 0.40);
}

.header-image-text {
    margin: 1% 1% 1% 2%;
    width: 97%;
    float: left;
    font-size: 45px;
    font-weight: 300;
    line-height: 1.3;
    color: #ffffff;
}

.header-image-line {
    margin: 0 2% 0 2%;
    width: 96%;
    float: left;
    border-bottom: 1px solid #ffffff;
}

#second-text {
    font-size: 30px;
}

/*----------------FOOTER--------------------*/

footer {
    width: 90%;
    padding: 0 5% 0 5%;
    float: left;
    background: #2f4f4f;
    border-top: 1px solid #bbbbbb;
}

.footer-copyright {
    margin: 2% 0 2% 0;
    width: 40%;
    float: left;
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #ffffff;
    text-align: left;
}

.footer-copyright:after {
    content: "2025 John Alasdair Macdonald"
}

.footer-nav {
    margin: 2% 0 2% 0;
    float: right;
    width: 40%;
}

.footer-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer-nav li {
    margin-left: 5%;
    float: right;
}

.footer-nav li a {
    font-family: 'Muli', sans-serif;
    font-size: 15px;
    color: #ffffff;
    font-weight: 300;
    text-decoration: none;   
}

.header-nav li a:hover, .footer-nav li a:hover {
    color: #cccccc;
}

/*------------------SPACERS-------------------*/

.spacer-one, .spacer-two, .spacer-three, .spacer-five, .spacer-ten, .spacer-fifteen, .spacer-twenty {
    display: block;
    width: 100%;
    float: right;
}

.spacer-one {
    padding-bottom: 1%;
}

.spacer-two {
    padding-bottom: 2%;
}

.spacer-three {
    padding-bottom: 3%;
}

.spacer-five {
    padding-bottom: 5%;
}

.spacer-ten {
    padding-bottom: 10%;
}

.spacer-twenty {
    padding-bottom: 20%;
}

/*-----------IMAGES-------------------*/

img.full-width {
    width: 100%;
    float: left;
}

/*------------------LINKS-------------------*/

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, p a, .list a, .sitemap a {
    font-family: 'Muli', sans-serif;
    color: #3c42cb;
    text-decoration: none;
}

.header-logo a {
    font-family: 'Muli', sans-serif;
    color: #ffffff;
    text-decoration: none;
}

/*----------------PAGES--------------------*/

main {
    margin: 0 7% 0% 7%;
}

section {
    width: 100%;
    float: left;
}


/*----------------RESEARCH AND GRAPHS PAGES--------------------*/

.reset {
    display: block;
    width: 100%;
    float: right;
    margin-top: -2%;
    margin-bottom: -2.75%;
}

.reset p {
    text-align: right;
    font-size: 80%;
    font-weight: bold;  
}

#textleft p {
    text-align: left;
}

iframe {
    width: 100%;
    height: 600px;
    margin: 1% 0 1% 0;
}

.research-box-name {
    display: block;
    width: 98%;
    float:left;
    padding: 3% 1% 3% 1%;
    font-size: 17px;
    color: #222222;
    text-align: center;
    border-top: 1px solid #ffffff;
}

.research-box-third {
    display: block;
    width: 30%;
    float: left;
    background: #dddddd;
    margin: 0 5% 1% 0;
}

.research-box-third-end {
    display: block;
    width: 30%;
    float: left;
    background: #dddddd;
    margin: 0 0 1% 0;
}

#about-contact {
    padding-left: 2%;
}

#about-support {
    width: 96%;
    padding: 2% 3% 2% 3%;
}

.graphs-box-name {
    display: block;
    width: 98%;
    float:left;
    padding: 3% 1% 3% 1%;
    font-size: 17px;
    color: #222222;
    text-align: center;
    border-top: 1px solid #ffffff;
}

.graphs-box-quarter {
    display: block;
    width: 22%;
    float: left;
    background: #dddddd;
    margin: 0 4% 1% 0;
}

.graphs-box-quarter-end {
    display: block;
    width: 22%;
    float: left;
    background: #dddddd;
    margin: 0 0 1% 0;
}

.research-box-third:hover, .research-box-third-end:hover, .graphs-box-quarter:hover, .graphs-box-quarter-end:hover {
    opacity: 0.8;
}

.tools ul {
    line-height: 2.5em;
}

.additional-notes {
    display: block;
    width: 94%;
    background: #eeeeee;
    padding: 0 3% 1% 3%;
    margin-top: -1.5%;
}

.container {
    display: block;
    width: 100%;
    float: left;
}

.two-thirds-container {
    display: block;
    width: 65%;
    float: left;
    margin: 1% 0 0 0;
}

.one-third-container {
    display: block;
    width: 33%;
    float: right;
    margin: 5% 0 0 2%;
}


/*----------------SUPPORT PAGE--------------------*/

section.sixty-percent {
    width: 65%;
    float: left;
}

aside {
    width: 25%;
    float: right;
    padding: 0 0 0 2%;
    border-left: 1px solid #2f4f4f;
}

.coffee-container {
    display: block;
    width: 40%;
    float: left;
    padding-top: 1%;
    border-top: 1.5px solid #2f4f4f;
    border-bottom: 1.5px solid #2f4f4f;
}

.coffee-logo {
    display: block;
    width: 100%;
    float: left;
}

.coffee-text {
    display: block;
    width: 70%;
    float: left;
    margin-top: -1%;
}

/*---------------------RESPONSIVE ---------------*/
/*---------------------MEDIA +1500 ---------------*/

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

    body {
        -webkit-text-size-adjust: 100%;
    }
    
    .header-nav {
        margin: 0 10% 0 10%;
        width: 80%;
    }
    
    .header-image-background  {
        margin-left: 14%;
        width: 45%;
    }
    
    main {
        margin: 0 15% 0% 15%; 
    }
}

/*---------------------MEDIA 1200 ---------------*/

@media screen and (max-width: 1200px) {

    body {
        -webkit-text-size-adjust: 100%;
    }
    
    .header-image-text  {
        font-size: 40px;
    }
    
    #second-text  {
        font-size: 25px;
    }
    
     main {
        margin: 0 7% 0 7%;
    }
}

/*---------------------MEDIA 1100---------------*/

@media screen and (max-width: 1100px) {

    body {
        -webkit-text-size-adjust: 100%;
    } 
    
    .header-image-background {
        margin-left: 4%;
    }
    
    h1 {
        font-size: 24px;
    }
    
    .header-image-text {
        font-size: 35px;
    }
    
    #second-text {
        font-size: 20px;
    }
}

/*---------------------MEDIA 900---------------*/

@media screen and (max-width: 900px) {

    body {
        -webkit-text-size-adjust: 100%;
    }
    
    .header-nav li a, .footer-nav li a, .footer-copyright {
        font-size: 16px;
    }
    
    .header-image-text {
        font-size: 30px;
    } 
    
    .header-nav li {
        line-height: 0.9em;
    }
    
    h1 {
        font-size: 20px;
    }
    
    h2, h3, h4, h5, h6, p, .research-box-name, .graph-box-name {
        font-size: 16px;
    }
}
 
/*-----------------MOBILE 800-------------------*/

@media screen and (max-width: 800px) {
    
    body {
        -webkit-text-size-adjust: 100%;
    }
    
    #exc-mobile {
        display: none;
    }
    
    #mobile-only {
        display: block;
    }
    
    .nav-list-mobile {
        display: block;  
    }
    
    .header-nav ul li, .footer-nav li a {
       display: none;
    }
    
    .header-image-background {
        margin: -50% 20% 0 20%;
        width: 60%;
        text-align: center;
    }
  
    .header-image-text {
        font-size: 40px;
    }
    
    #second-text {
        font-size: 25px;
    }
    
    h1 {
        font-size: 20px;
    }
    
    h2, h3, h4, h5, h6, p, .research-box-name  {
        font-size: 18px;
    }

    .header-nav ul li.icon {
        display: inline-block;
        margin: 1% 0 1% 0;
    }
    
    .header-nav ul li.icon a {
        font-size: 18px;
        font-weight: 100;
        padding: 2% 0 2% 0;
        color: #ffffff;
    }
    
    .header-nav.responsive ul li {
        width: 100%;
        display: block;
    }
    
    .header-nav.responsive ul li a {
        padding: 2% 0 2% 0;
        font-size: 17px;
        font-weight: 100;
        text-align: center;
        display: block;
        color: #ffffff;
        text-decoration: none;
        background: #2F4F4F;
    }
    
    .footer-copyright {
        margin: 4%;
        width: 96%;
        font-size: 14px;
        text-align: center;
    } 
    
    .research-box-third, .research-box-third-end, .graphs-box-quarter, .graphs-box-quarter-end {
        width: 100%;
        margin-bottom: 10%;
    }
    
    section.sixty-percent {
        width: 100%;
    }
    
    aside {
        width: 99%;
        border-left: 0px solid #ffffff;
        padding: 1%;
    }
}