/* Colors ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.colors {
    color: #7b1315;
    color: #b22425;
    color: #e15926;
    color: #f8e6c0;
    color: #919191;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin-top: 75px;
}
p {
    line-height: 1.5;
}

/* Anchor Link Help ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.anchor-help {
    display: block;
    position: relative;
    top: -75px;
    visibility: hidden;
}




/* Navigation ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

nav {
    background-color: white;
    height: 75px;
    width: 100%;
    font-size: 1.2em;
    position: fixed;
    top: 0;
    z-index: 10;
}
.navbar {
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    position: fixed;
}
.navimage {
    max-height: 45px;
    width: auto;
    display: flex;
    padding-left: 40px;
}
.nav-item a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: black;
    align-items: baseline;
    padding-right: 40px;
    top: 0;
}
.nav-item a:hover {
    color: #7b1315;
    text-decoration: none;
}
ul {
    display: flex;
    list-style-type: none;
}


@media (min-width: 50px) and (max-width: 500px) {
    nav {
        position: fixed;
        top: 0;
        z-index: 10;
    }
    .navbar {
        position: fixed;
        z-index: 10;
    }
    .navimage {
        max-height: 30px;
    }
    .nav-links {
        visibility: hidden;
    }
}

/* HERO ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.hero {
    background-image: url("data:image/jpeg;base64,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");
    height: 500px;
    width: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
}
.hero-loaded {
    background-image: url("../images/hero.1.jpg");  
}
h1.ann-name {
    padding-bottom: 25px;
}
.hero-name {
    padding-left: 40px;
    border-left-style: solid;
    margin-left: 40px;
    border-width: 5px;
}
.hero-contact {
    background-color: #f8e6c0;
    height: 150px;
    width: auto;
    padding-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
h2.hero-contact-header {
    font-size: 1.5em;
    color: #575757;
}
button {
    max-width: 200px;
    min-width: 150px;
    padding: 10px 50px 10px 50px;
    border: none;
    text-transform: uppercase;
}
button.email {
    color: white;
    background-color: #7b1315;
    margin-right: 15px;
    transition: 0.3s;
}
button.call {
    color: white;
    background-color: #e15926;
    transition: 0.3s;
    text-decoration: none;
}
button.email:hover {
    background-color: #5a080a;
}
button.call:hover {
    background-color: #b34016;
    text-decoration: none;
    color: white;
}
.call a {
    color: white;
    text-decoration: none;
}
.call a:hover {
    text-decoration: none;
}
.email a {
    color: white;
    text-decoration: none;
}
.email a:hover {
    color: white;
    text-decoration: none;
}

@media (min-width: 50px) and (max-width: 500px) {
    .hero {
        height: 300px;
        width: auto;
    }
    h1.ann-name {
        font-size: 2em;
    }
    h2.ann-subhead {
        font-size: 1.4em;
    }
    h3.ann-sub-sub-head {
        font-size: .8em;
        line-height: 1.5;
    }
    .hero-name {
        padding-left: 10px;
        margin-right: 50px;
    }
    .hero-contact {
        height: 175px;
    }
    h2.hero-contact-header {
        font-size: 1.2em;
    }
    button.email {
        margin-bottom: 10px;
    }
}

/* ABOUT TOP ---------------------------------------------------------------------------------------------------------------------- */

.about-top {
    height: 200px;
    display: flex;
    align-items: center;
}
p.about-text {
    padding: 20px 200px 20px 40px;
    size: 1.3em;
    color: #919191;
    line-height: 2;
    font-weight: 200;
}

@media (min-width: 50px) and (max-width: 500px) {
    .about-top {
        height: 250px;
    }
    p.about-text {
        padding: 20px 50px 20px 40px;
        line-height: 1.2;
        font-size: 1em;
    }

}

/* HOT SPOTS ---------------------------------------------------------------------------------------------------------------------- */
.hot-spots {
    height: 200px;
    width: auto;
    display: flex;
    flex-direction: row;
    color: white;
    font-size: 2em;
}

.real-estate-button:hover, .estate-planning-button:hover {
    text-decoration: underline;
    cursor: pointer;
}

.real-estate-button {
    background-image: url("../images/real-estate-button.jpg");
    background-color: #7b1315;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 0px;
    width: 50%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.estate-planning-button {
    background-image: url("../images/estate-plan-button.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #919191;
    margin-top: 0px;
    width: 50%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.real-estate-expanded {
    height: auto;
    padding-bottom: 50px;
    background-color: #7b1315;
    /* display: none; */
}
.real-estate-image {
    margin-left: 40px;
}
.real-estate-class {
    display: flex;
    padding-top: 50px;
}
.real-estate-text {
    margin-left: 40px;
    padding-right: 100px;
    border-left-style: solid;
    border-width: 5px;
    padding-left: 20px;
    color: white;
}
.real-estate-list {
    flex-direction: column;
    line-height: 1.7;
    list-style-type: square;
}
.estate-planning-expanded {
    height: auto;
    padding-bottom: 50px;
    background-color: #919191;
    /* display: none; */
}
h2 {
    margin: 0px 0px 20px 0px;
    font-weight: 100;
    font-size: 2em;
}
h1 {
    margin: 0px 0px 0px 0px;
    font-weight: 100;
    font-size: 4em;
}
h3 {
    margin: 0px 0px 20px 0px;
    font-weight: 100;
    font-size: 1.5em;
}

@media (min-width: 50px) and (max-width: 500px) {
    .hot-spots {
        font-size: 1.2em;
    }
    .real-estate-expanded {
        height: auto;
        padding-bottom: 50px;
    }
    .real-estate-image {
        width: 250px;
        height: auto;
    }
    .real-estate-class {
        display: flex;
        flex-direction: column;
    }
    .real-estate-text {
        margin-left: 40px;
        padding-right: 50px;
        margin-top: 15px;
        border-width: 5px;
        padding-left: 20px;
        color: white;
    }
}



/* ANNS BIO --------------------------------------------------------------------------------------------------- */
.ann-bio {
    height: 600px;
    background-color: #f8e6c0;
    display: flex;
    align-items: center;
}

.ann-bio-pic {
    margin-left: 40px;
}
.ann-bio-text{
    margin-left: 40px;
    width: 70%;
    size: 1.3em;
    color: #919191;
    line-height: 1.5;
    font-weight: 200;
}

@media (min-width: 50px) and (max-width: 500px) {
    .ann-bio {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        padding-bottom: 25px;
    }
    .ann-bio-pic {
        height: 250px;
        padding-top: 25px;
        margin-left: 0px;
    }
    .ann-bio-text {
        margin-left: 0px;
        size: 1em;
    }
}

/* CONTACT/LOCATION ------------------------------------------------------------------------------------------------------- */
.contact-us {

}
.contact {
    height: 700px;
    width: auto;
    display: flex;
}

.contact-form {
    width: 50%;
    height: auto;
    background-color: #e6e6e6;
}
.contact-info {
    margin-left: 40px;
    margin-top: 50px;
}
.kwes-form {
    display: flex;
    flex-direction: column;
    line-height: 2;
}

.kwes-form button[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#5a080a;
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
    margin-top: 25px;
}
.kwes-form input[type="text"] {
    width: 400px;
    padding: 5px;
}
textarea {
    width: 400px;
    padding: 5px;
}
.contact-text {
    background: #575757;
}
.contact-paragraph {
    font-size: .7em;
    color: #919191;
    line-height: 2;
    font-weight: 200;
    padding-right: 155px;
}
.map {
    width: 50%;
    height: auto;
    background-color: white;
}
.map-content {
    margin-left: 40px;
    margin-top: 50px;
}


@media (min-width: 50px) and (max-width: 500px) {
    .contact {
        height: auto;
        display: block;
    }
    .contact-info {
        margin-left: 25px;
        margin-top: 0px;
        padding-top: 25px;
    }
    .contact-form {
        width: 100%;
        padding-left: 20px;
    }
    textarea {
        width: 250px;
        padding: 5px;
    }
    .kwes-form input[type="text"] {
        width: 250px;
        padding: 5px;
    }
    .contact-paragraph {
        line-height: 1.5;
        padding-right: 55px;
    }
    iframe {
        width: 300px; 
        height: 400px;
    }
}


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



.footer {
    /* height: 125px; */
    background-color: #7b1315;
    color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 25px;
    justify-items: center;
    align-items: center;
}


.footer-email {
    color: white;
}
a:link {
    text-decoration: none;
  }

  a:visited {
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  a:active {
    text-decoration: underline;
  }
}

@media (min-width: 50px) and (max-width: 500px) {
    .footer {
        grid-template-columns: auto;
        font-size: .5em;
    }
}