/* all screens styles */



/* general styles */



* {

    box-sizing: border-box;

}



html {

    font-size: 100%;

    width: 100%;

    margin: 0; 

} 



header, section, footer, aside, nav, main, article, figure {

    display: block;

}



.screen-wide-image {

    background-position: center;

    background-size: cover;

    color: white;

    height: 500px;

    width: 100%;

    text-shadow: 2px 2px 1px black;

}



.screen-wide-image a {

    color: #dac292;

}



main {

    margin: 2rem 0;

}



section {

    width: 100%;

    font-size: 1.2rem;

    line-height: 1.8;

    padding: 20px;

}



.oi {

    color: white;

}



a {    

    color: #B9936C;

    font-weight: bold;

}



a.nav-link {

    font-weight: 400;

}



a:hover, a.nav-link:hover, a.dropdown-item:hover,  a:focus, .dropdown-item:focus {

    background-color: #dac292;

    color: white;

    text-decoration: none;

    outline: none;

}



.active, .dropdown-item.active, a:active, .dropdown-item:active {

    background-color: #9b734b;

}



.photo-in-paragraph {

    width: 80%;

    margin: 0 auto 1rem auto;

}

.vertical {
    width: 50%;
}



.bold {

    font-weight: bold;

}



.italic {

    font-style: italic;

}



.radical-word-break {

    word-break: break-all;

}



/* header styles */



.page-header {    

    font-size: 2rem;

    width: 100%;

    padding: 5% 0;

}



.page-header span.subtitle {

    margin-top: 2%;

    font-size: 1.8rem; 

}



.page-header span {

    display: block;

    font-size: 1.5rem;

    margin-top: 5%;

}



/* navbar styles */



.navbar {   

   padding: 0 1.5rem;

}



.navbar, .dropdown-menu, .dropdown-item, footer {

    background-color: #B9936C;

    border: 0 solid transparent;

    border-radius: 0;

    color: white;

}



.dropdown-menu {

    margin: 0;

    width: 100%;

}



.navbar-expand-lg .navbar-nav a.nav-link {

   color: white;

   padding: 1rem 3rem;

}



.navbar-toggler {

    padding: 1rem;

}



.navbar-toggler-icon {

    height: 1.2em;

}



button:focus {

    outline: 0;

}



/* .nav-link:hover is defined in general styles together with a:hover */



/* footer styles */



footer {    

    padding: 20px;

    /* background and font colors are defined together with navbar styles */

}



footer div.container {

    align-items: flex-end;

    display: flex;

    flex-flow: row wrap;

    justify-content: space-between;

}



footer p {

    width: 100%;

    padding: 0;

    margin: 0;

}



footer h2, .projects h2 {

    font-size: 1.5rem;    

}



footer div div {    

    max-width: 500px;

}



footer a {

    color: white;

    font-weight: normal;

}



.copyright-note {    

    text-align: right;

}



/* special styles for single pages */



.people span {

    display: block;

    font-weight: bold;

}



#map {

    height: 600px;

    width: 100%;

}



.articles li {

    list-style-type: decimal;

}



.info_content p {

    font-size: .9rem;

    margin: 2px;

}



 /* mobile and tablet only styles */



@media (max-width: 992px) {

    .navbar-nav .nav-link {

        padding: 1rem;

    }



    .navbar-nav {

        padding-bottom: 1rem;

    }



    .main-header {

        font-size: 1.6rem;

    }



    .main-header span {

        font-size: 1.2rem;

    }



    .photo-in-paragraph {

        width: 90%;

    }


    h1 {

        font-size: 2rem;

    }



    .page-header span.subtitle {

        font-size: 1.6rem; 

    }

}



@media (max-width: 1200px) {

    .copyright-note {

        margin-top: 20px;

        text-align: left;

    }

}



/* header photos */



.header-main {

    background-image: url('../images/header_main.jpg')

}



.header-resources {

    background-image: url('../images/header_resources.jpg')

}



.header-people {

    background-image: url('../images/header_people.jpg')

}



.header-projects {

    background-image: url('../images/header_projects.jpg')

}



@media (max-width: 600px) {

    .header-main {

        background-image: url('../images/mobile/header_main.jpg')

    }



    .header-people {

        background-image: url('../images/mobile/header_people.jpg')

    }



    .header-resources {

        background-image: url('../images/mobile/header_resources.jpg')

    }



    .header-projects {

        background-image: url('../images/mobile/header_projects.jpg')

    }

    

}