@charset "UTF-8";
/**
TOC
--LAYOUT
--TYPOGRAPHY
--PAGE SPECIFIC
 * 
 */

/* LAYOUT ------------------------------------------*/

#logo {
    position:absolute;
    left:25%;
    width:50%;  
    z-index:999;
    transition: all 0.3s ease;
}  

@media screen and (min-width: 40em) and (max-width: 63.9375em) { /*medium only*/
    #logo {
        position:absolute;
        top:0px;
        left:0px;
        width:180px;
    }   
}

@media screen and (min-width: 64em) { /*large only*/
    #logo {
        position:absolute;
        top:0px;
        left:30px;
    }   
}

.container {
    min-height:100vh;
}

.main {
    background:#fff;
}

.mobile-navigation-button {
    font-size:50px;
    color:#fff;
    margin:1rem;
    padding:1rem;
    background:none;
}

.mobile-navigation-button:hover,
.mobile-navigation-button:active,
.mobile-navigation-button:focus {
    background-color:#33271a;
    color:#006b54;
}

.top-navigation {
    height:123px;
    transition: all 0.1s ease;
}

.top-navigation .menu {
    position:relative;
    top:40px;
    right:30px;
}

.top-navigation .menu li {
    padding:.45rem .8rem .95rem;
}

.top-navigation .menu a {
    font-family: 'PT Serif', sans-serif;
    color:#333;
    font-weight:400;
    font-size:.85rem;
    transition: all 0.3s ease;
    border-bottom:solid 2px transparent;
}

.top-navigation .menu a:hover,
.top-navigation .menu a:active,
.top-navigation .menu a:focus {
    border-bottom:2px solid #333;
}

@media screen and (max-width: 39.9375em) { /*small only*/
    .top-navigation {
        background-image: url("/images/logo-mobile.png");
        background-position:top center;
        background-repeat:no-repeat;
        background-color:#006b54;
        background-size:contain;
        min-height:15vh;
    }  
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) { /*medium only*/
    .top-navigation {
        height:74px;
    }
    
    .top-navigation .menu {
        position:relative;
        top:24px;
        right:10px;
    }
    
    .top-navigation .menu li {
        padding:.45rem .3rem .95rem;
    }
    
    .top-navigation .menu a {
        padding:.0rem 0rem 0rem;
        font-size:.9rem;
    }
}

@media screen and (min-width: 64em) { /*large only*/
    .top-navigation .menu a {
        padding:.35rem .1rem;
        font-size:1.2rem;
    }   
}

#offCanvas {
    background:#222;
    padding:3rem 0 0;
}

#offCanvas span {
    display:block;
    color:#7C7778;
    font-size:1.2rem;
    font-weight:700;
    padding:1.2rem .9rem .5rem .9rem;
}

#offCanvas button {
    color:#fff;
}

#offCanvas .menu {
   flex-wrap: nowrap; 
}

#offCanvas .menu a {
    display:block;
    width:100%;
}

.property-search {
    background-color:#006b54;
    color:#fff;
    padding:1rem;
    min-height:80px;
    margin-bottom:2px;
}

.property-search .login-button {
    margin:2px 0 0 0;
}

@media screen and (min-width: 40em) { /*medium and up*/
    .property-search .login-button {
        margin:0 0 0 2px;
    }
}

.header-image {
    min-height:30vh;
    background-image:url("/images/header.jpg");
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    text-align:center;
}

.content {
    min-height:50vh;
    background-color:#edeadc;
    background-image:url("/images/bobby-dutcher.png");
    background-position:100px bottom;
    background-repeat:no-repeat;
    padding:5rem .5rem 1rem;
}

.footer {
    background:#33271a;
    color:#9e9a97;
    padding:3rem;
}

.footer h3 {
    font-size:1.4rem;
}

.footer p {
    font-size:1rem;
}

.footer a {
    color:#9e9a97;
}

.footer a:hover,
.footer a:active,
.footer a:focus {
    color:#fff;
}




/* TYPOGRAPHY -------------------------------------*/
body {
    font-family: 'PT Sans', sans-serif;
    font-size:16px;
    color:#33271a;
}

p {
    font-size:1.2rem
}

h1, h2, h3, h4, h5 {
    font-family: 'PT Serif', sans-serif;
    font-weight:400;
    line-height:normal;
}

h1 {
    font-size:2rem;
}

h2 {
    font-size:1.6rem;
}

h3 {
    font-size:1.4rem;
}

@media screen and (min-width: 40em) { /*medium and up*/
    h1 {
        font-size:3rem;
    }
    
    h2 {
        font-size:2rem;
    }
    
    h3 {
        font-size:1.6rem;
    } 
}

.content a {
    color:#870000;
    border-bottom:2px solid #870000;
    transition: all 0.3s ease;
}

.content a:hover,
.content a:active,
.content a:focus {
    color:#fff;
    background-color:#33271a;
    border-bottom:2px solid #33271a;
}



/* PAGE SPECIFIC ------------------------------------------*/
.home .header-image {
    background-image:url("/images/header.jpg");
}

@media screen and (min-width: 40em) { /*medium and up*/
    .home .header-image {
        min-height:60vh;
    }
}

.home .featured-properties {
    background-color:#edeadc;
}

.home .featured-properties .cell {
    border-top:2px solid #fff;
    border-bottom:2px solid #fff;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    padding-bottom:10px;
    position:relative;
}

.home .featured-properties img {
    min-width:100%;
}

.home .featured-properties h2 {
    margin:20px 0 0px;
    color:#870000;
    text-decoration:none;
}

.home .featured-properties p {
    line-height:normal;
    color:#33271a;
}

@media screen and (max-width: 39.9375em) { /*small only*/
    .home .featured-properties .cell {
        border-top:0px solid #fff;
        border-bottom:2px solid #fff;
        border-right:0px solid #fff;
        border-left:0px solid #fff;
        padding-bottom:10px;
        position:relative;
    }
}

.home .content p {
    font-family: 'PT Serif', sans-serif;
    font-weight:400;
    line-height:normal;
}


/* card styles */
div.card a {
	border-bottom:0px;
}

div.card a:hover {
	border-bottom:0px;
}
.content .card-divider a {
    color: #fff;
}
.card-divider {
    background-color:#316b53;
}
.card {
    border: 1px solid #316b53;
}
.card a i {
    color: #982c2b;
}
.card a i:hover {
    color:#316b53
}
.card a:hover {
	background:transparent;
}


/* button color overrides */
  .button{
    background-color: #316b54;
    color: #fefefe;
  }
    .button:hover, .button:focus{
    background-color: #459272;
    color: #fefefe; }
  }
  .button.primary {
    background-color: #316b53;
    color: #fefefe; }
    .button.primary:hover, .button.primary:focus {
      background-color: #3b8266;
      color: #fefefe; }
  .button.secondary {
    background-color: #9e272e;
    color: #fefefe; }
    .button.secondary:hover, .button.secondary:focus {
      background-color: #bf3139;
      color: #fefefe; }






