.headerimg {
    width: 100%;
}

header {
    background-image: url(../images/durango-06.jpg);
    width: 100%;
    height: 500px;
    background-position: center;
    background-size: cover;
    margin: auto;
    padding: 0;
}

body {
    background-color: wheat;
    font-family: 'Noto Serif', serif;
    color: rgb(77, 40, 23);
    font-size: 14pt;
}

@media (max-width: 890px) {
    body {
    font-size: 12pt; }
    }

@media (max-width: 650px) {
    body {
    font-size: 10pt; }
    }

h1 {
    color: rgb(77, 40, 23);
    font-family: hwt-american-chromatic, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: auto;
    font-size: 60px;
    padding: 0;
    padding-top: 30px;
}

@media (max-width: 650px) {
    header {
    height: 300px; }
    }

@media (max-width: 890px) {
    h1 {
    font-size: 40px; }
    }

@media (max-width: 650px) {
    h1 {
    font-size: 30px; }
    }
    
/*BLOB SHAPE CSS.quote-wrapper {
    width: 400px;
    height: 150px;
    position: relative;
    margin: auto;
}

div {
    display: block;
}

.text {
    width: 100%;
    height: 70%;
    border-top-left-radius: 80% 60%;
    border-top-right-radius: 30% 40%;
    border-bottom-right-radius: 30% 60%;
    border-bottom-left-radius: 70% 40%;
    background-color: #f3e4db;
    position: relative;
    margin: 0;
    color: rgb(53, 28, 8);
    padding: 2%;
}

blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    text-align: center;
}

.text::before {
    content: "";
    width: 25%;
    height: 100%;
    float: left;
    shape-outside: polygon(0px 0px, 100.16% 1px, 54.86% 8.97%, 25.02% 21.08%, 6% 32.6%, 0px 50%, -1.03% 72.09%, 21.24% 87.02%, 50% 94%, 98% 100%, 0px 100%);
    shape-margin: 7%;
}


.text p {
    height: 100%;
    font-size: 1.3rem;
    line-height: 1.5;
    padding: 0;
    font-size: 50px;
    font-family: hwt-american-chromatic, sans-serif;
    font-weight: 400;
    font-style: normal;
}*/

.navlist {
    display: none;
    list-style-type: none;
    padding: 0;
    font-family: 'Noto Serif', serif;
    font-size: 18pt;
    text-align: right;
}

/*hamburger menu styling starts**************** */
                /* This "drawer" is my main container. In it there is a button to control it, and the contents which open and close */
                #drawer {							
                    position: fixed;
                    top: 0;
                    right: 10px;
                    width: 120px;
                    height: 30px;
                }

                /* This is the button element, with the class "controls" that users will click on in order to open and close the contents */
                #drawer button.controls {			
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    height: 30px;
                    width: 100%;
                    background-color: rgb(77, 40, 23);
                    color: white;
                    cursor: pointer;
                }

                /* This is what the button.controls element looks like when its parent, #drawer, has the .open class applied to it */
                #drawer.open button.controls {		
                    background-color: #78afd4;
                    color: white;
                }

                #drawer.open ul.navlist {
                    display: block;
                }

                @media (max-width: 890px) {
                    #drawer.open ul.navlist {
                    font-size: 12pt;
                    text-align: right; }
                    }
                
                @media (max-width: 650px) {
                    #drawer.open ul.navlist {
                    font-size: 10px;
                    text-align: right; }
                    }

                /* This :after pseudoelement is actually what adds the words "open +" to the button. You'll notice that the only contents in the button HTML are the FontAwesome hamburger icon */
                #drawer button.controls:after {			
                    content: "Menu";
                    font-family: 'Noto Serif', serif;
                    font-weight: 700;
                    font-size: 12pt;
                }

                @media (max-width: 890px) {
                    #drawer button.controls:after  {
                    content: ""; }
                    }

                /* When the parent #drawer element has the .open class applied, we change the button :after pseudoelement text from "open +" to "close -" */
                #drawer.open button.controls:after {	
                    content: "Menu";
                }

                @media (max-width: 890px) {
                    #drawer.open button.controls:after {
                    content: ""; }
                    }

                /* Here we are just positioning the FontAwesome hamburger icon */
                #drawer button.controls .fa {			
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 5px;
                }

                /* This .contents element is what opens and closes when the user clicks the button. It has 0 height (and padding) when it's in its normally closed state */
                #drawer .contents {						
                    height: 0;
                    padding: 0 10px;
                    box-sizing: border-box;
                    width: 100%;
                    background-color: #78afd4;
                    color: #fff;
                    transition: all .5s;
                }

                /* When the parent #drawer element has the .open class applied, we change the height and padding of the contents to reveal it. */
                #drawer.open .contents {				
                    height: 200px;
                    padding: 30px 10px 10px 10px;
                }

                @media (max-width: 890px) {
                    #drawer.open .contents {
                    height: 150px; }
                    }
                
                @media (max-width: 650px) {
                    #drawer.open .contents {
                    height: 110px; }
                    }
                
                @media (max-width: 890px) {
                    #drawer {
                    width: 90px; }
                    }
                
                @media (max-width: 650px) {
                    #drawer {
                    width: 50px; }
                    }
/* hamburger menu styling ends**************** */

ul {
    display: grid;
    grid-template-columns: .4fr 2.6fr;
    list-style-type: none;
    padding: 0;
}
@media (max-width: 650px) {
    ul {
    grid-template-columns: none; }
    }

.subtitles {
    font-family: hwt-american-shopworn, sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 20px;
    color: rgb(77, 40, 23);
}

@media (max-width: 800px) {
    .subtitles {
        font-size: 16px;
    }
}

.history {
    grid-template-columns: .4fr 1.6fr 1fr;
    padding: 0;
}

@media (max-width: 650px) {
    .history {
    grid-template-columns: none; }
    }

img {
    width: 350px;
    border-radius: 10px;
}

#img {
    object-fit: fill;
    text-align: center;
}

@media (max-width: 800px) {
    img {
        width: 250px;
    }
}

@media (max-width: 650px) {
    img {
    width: 100%;
    }
}

#climateimg {
    width: 100%;
    text-align: center;
}

.cultureimgs {
    width: 100%;
    text-align: center;
}