/* 

Green: #445142
blue: #18245c
unsat blue: #303040
unsat blue active: #484E5E
pink: #ecacba
pale pink: #e5ccd2
red: #AB4353
dark red: #80323E
*/

html{
    height: 100%;
    /*make it so when you don't have a scrollbar the body image doesn't move*/
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
}

body {
    min-height: 100%;
    margin-top:50px;
    font-family: Verdana, Geneva, sans-serif;
    background-color: #445142;
    background-image: url("../images/trees.png");
    background-size: cover;                      
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto;
}

h1{
    margin-bottom: 22px;
    margin-top: 10px;
    font-size: 1.6em;
    letter-spacing: -1px;
    line-height: 1.85;
}

h2{
    margin-bottom: 20px;
    margin-top: 0px;
    font-size: 1.375em;
    letter-spacing: -1px;
    line-height: 1.7;
}

p{
    margin-bottom: 15px;
    font-size: 1.10em;
    text-indent: 35px;
    line-height: 1.5;
}

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

    /* this was picked up from here: https://stackoverflow.com/questions/52213908/how-to-force-hamburger-menu-in-bootstrap-3-3-7-even-for-desktop 
I have a lot of pages so this allows all to be seen without crunching the navbar*/ 

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
    display: none!important;
}

.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;
}

/*****************************/

#header .custom-nav{
    background-color: #303040;
}

#header .navbar{
    max-height: 550px;
    border: none!important;
}

#header .navbar-inverse .navbar-brand{
   color: #9d9d9d!important; 
}

#header .navbar-inverse .navbar-toggle {
    background-color: transparent!important;
    z-index: 1;
    border-color: transparent;
}

#header .navbar-header{
    min-height: 50px!important;
}

#header .navbar-collapse{
    max-height: none;
    padding: 0;
    border: none!important;
}

#header .collapse {
    background-color: #303040;
}

#header .navbar-nav{
    background-image: linear-gradient(to right, #303040, black);
    padding: 0;
    padding-top: 15px;
    background-color: #303040;
    margin: 0!important;
    max-height: 100%; 
}

#header .navbar-nav li{
    font-size: 1.15em;
    line-height: 1.6;
    margin: 0 25px;
}

#header .navbar-nav li a{
    border-radius: 5px;
}

#header .navbar-nav li:last-child a{
    margin-bottom: 20px;
}


#header .navbar-nav>.active>a{
    background-color: #484E5E;
    background-image: none;
}


#header #navbar-bottom{
    background-image: linear-gradient(to right, #303040, black);
    min-width: 100%;
    padding: 10px 5px 15px 10px;
    margin-right: 0!important;
    border-top: 2px solid #484E5E;
}

#header #navbar-bottom>table{
    float: right;
    margin: 0 25px;
    border-spacing: 0;
    border:0;
    padding: 0;
}

#header #navbar-bottom td{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 0.625em;
}

#header #navbar-bottom a{
    text-decoration:none; 
    color:gray;
}

#header #navbar-bottom .submit-search{
    margin:0; 
    margin-top:4px;
}

#header #navbar-bottom .submit-search input{
    padding: 5px;
    border-radius: 5px;
}

#header #navbar-bottom .submit-search input:last-child{/*submit button*/
    margin-left:17px;
    background-color: #e5ccd2;
}

#header #navbar-bottom .links-to-cite{
    padding-top:4px;
}

#header #navbar-bottom .links-to-cite{
    text-align:right;
}

#header #navbar-bottom .links-to-cite:first-of-type{
    text-align:left;
}

#banner img{
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

#main, #main2, #main-email{
    box-sizing: border-box;
    padding: 10px 5% 15px 5%;
    background-color: white;
    font-size: 1.2em;
}

#main-email{
    margin: 30px;
}

#inline-img-1{
    padding-left: 20px;
    width: 300px;
    display: inline;
    float: right;
}

#inline-img-1 img{
    border-radius: 5px;
}

#img-2 img{
    max-width: 70%; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 25px;
}

#instructions{
    color: #AB4353;
    text-align: center;
    font-size: 1.05em
}

#email-button{
    width: 100%;
}

#to-me-personally{
    margin-top: 65px;
    margin-bottom: 28px;
}

.container{
    background-color: white;
}

.col-sm-4:not(:first-child),
.col-sm-6:not(:first-child){
    margin-top: 0;
}

.no-text-indent{
    text-indent: 0px;
}

#main-contact-form input, #main-contact-form textArea{
    border: 1px solid black;
    background-color: #f2f2f2;
    font-size: 1.15em;
}

#main-contact-form input::placeholder, #main-contact-form textArea::placeholder{
    color: #303040;
}

#main-contact-form input[type=submit] {
    background-color: #80323E !important;
    color: white;
    padding: 10px 16px;
    border-radius: 5px;
    border: 1px solid black;
    font-size: 1.1250em;
}

.custom-col {
    text-align: left;
    color: white;
    font-size: 1.15em;
}

.mar-top-40{
    margin-top: 40px;
    margin-bottom: 40px;
    display: inline-block;
    width: 100%;
}

.custom-button{
    background-color: #18245c;
    background-image: none;
    border: 1px solid black;
    font-size: 1.1250em;
}

.custom-button a{
    color: white;
}

.email-alert{
    margin-bottom: 15px;
    font-size: 1.15em;
    line-height: 1.6;
}

.cb-half{
    width: 40%;
}

.modal-content{
    background-color: #e5ccd2;                       
}

.modal-title{
    padding-left: 35px;
    display: inline;
}

.modal-body{
    font-size: 1.15em;
    line-height: 1.6;
    background-color: white;   
    padding-left: 50px;
    padding-right: 50px;
}

.btn-secondary{
    font-size: 1.15em;
    line-height: 1.6;
}

.term{
    color: #AB4353;
    cursor: pointer;
}

#footer .term{
    color: white;
    text-decoration: underline;
}

#footer {
    background-color: #80323E;
    color: white; /* change the colour to white */
    padding: 20px; /*increase padding.*/
    line-height: .80em;
    
    border-image: linear-gradient(white, #303040) 0 1 0 1;
    border-width: 8px;
    border-style: solid;
    border-top: none;
    border-bottom: none;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

#footer p:not(.cite){
    margin-top: 20px;
}

#footer p.cite{
    font-size: .75em;
    line-height: 1.5;
    text-indent: 0px;
}

#footer p.cite a:link {
    color:  white;
    text-decoration: underline;
}

#footer p.cite a:hover {
    color: #e5ccd2;
}

#footer p.cite a:visited {
    color: #ecacba;
}

#copyright {
    background-color: #303040; 
    text-align: center;
    display: block;
    color: white;
    padding: 15px;
    border-left: 8px solid #cfcfcf;
    border-right: 8px solid #cfcfcf;
}


@media (max-width: 880px){    
    #footer{
        border-radius: 0;
    }
    
    #banner img{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    } 
}

@media (max-width: 650px){
    
    #inline-img-1{
        width: 100%;
        margin: auto;
        padding: 5px 0 30px 0;
    }
    
    .navbar-inverse .navbar-brand{
        display: none;
    }
    
    #email-button{
        margin-bottom: 30px;
    }
    
    #to-me-personally{
        margin-top: 15px;
    }
    
    .col-sm-4:not(:first-child),
    .col-sm-6:not(:first-child){
        margin-top: 30px;
    }
    
    #header #navbar-bottom>table{
    float: left;
}
}