/*MAIN STYLES --- APP SPECIFIC*/
.bebas {
  font-family: "bebas-neue";
}

.green {
  color: #007860;
}
.green-bg {
  background-color: #007860;
}
.gold {
  color: #bb7800;
}
.gold-bg {
  background-color: #bb7800;
}
.gray-bg {
  background-color: #2d2d2d;
}
.gray-bg-transparent {
  background-color: rgba(45, 45, 45, 0.75);
}
.ash-bg {
  background-color: #4b443d;
}
.med-gray {
  color: #7d7d7d;
}
.orange {
  color: #bf4800;
}
.orange-bg {
  background-color: #bf4800;
}
.white {
  color: #fff;
}
.white-bg {
  background-color: #fff;
}
.fade {
  color: #e5ebea;
}
.fade-bg {
  background-color: #e5ebea;
}
.fade-plus-bg {
  background-color: #f0f0f0;
}

.rodeo-shorty.left {
  margin-left: 0;
}
.rodeo-button {
  position: relative;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
}
.rodeo-button:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(45, 45, 45, 0), rgba(45, 45, 45, 0.35));
  opacity: 0;

  transition: opacity 0.35s;
  -webkit-transition: 0.35s;
}
.rodeo-button:hover:after {
  opacity: 1;
}
.rodeo-lightbox-description {
  font-size: 1.25em;
  font-weight: 700;
}

body {
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #e5ebea;
  color: #2d2d2d;
}

h1,
h2 {
  font-family: "bebas-neue";
  font-size: 2em;
}

#menu-btn {
  position: fixed;
  top: 0;
  right: 0;
  display: inline-block;
  text-align: center;
  background: rgba(191, 72, 0, 0);
  padding: 1.5em;
  border-radius: 0 0 0 6px;
  box-shadow: -4px 4px 0 rgba(0, 0, 0, 0);
  z-index: 2;

  transition: background 0.5s, box-shadow 0.5s;
  -webkit-transition: background 0.5s, box-shadow 0.5s;
}

#menu-btn.enabled {
  background: rgba(191, 72, 0, 1);
  box-shadow: -4px 4px 0 rgba(0, 0, 0, 0.1);
}

.bar1,
.bar2,
.bar3 {
  display: block;
  width: 2.25em;
  height: 2px;
  background-color: #007860;
  margin-bottom: 6px;

  transition: 0.4s;
  -webkit-transition: 0.4s;
}
.bar3 {
  margin-bottom: 0px;
}

#menu-btn.enabled .bar1,
#menu-btn.enabled .bar2,
#menu-btn.enabled .bar3 {
  background-color: #e5ebea;
}

#menu-btn.change {
  background: rgba(35, 31, 32, 0);
  box-shadow: -4px 4px 0 rgba(0, 0, 0, 0);
}

.change .bar1,
.change .bar2,
.change .bar3 {
  background-color: #e5ebea;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(45deg) translate(6px, 5px);
  transform: rotate(45deg) translate(6px, 5px);
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(-45deg) translate(6px, -6px);
  transform: rotate(-45deg) translate(6px, -6px);
}

#social-container {
  position: fixed;
  display: block;
  bottom: 0;
  right: 0;
  margin-bottom: 24px;
  width: 48px;
  box-shadow: -4px 4px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
}
#social-container li {
  display: block;
  width: 48px;
  height: 48px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  padding-top: 10px;
}
#social-container li:nth-child(1) {
  background-color: #3b5998;
}
#social-container li:nth-child(2) {
  background-color: #fb3958;
}

#right-dashboard-list li {
  padding: 12px 0px;
  border-bottom: solid 1px #4d4d4d;
}

#right-dashboard-list li:last-child {
  border-bottom: none;
}

#right-dashboard.dashboard-enabled {
  box-shadow: -6px 0 0 rgba(0, 0, 0, 0.1);
}

#hero {
  height: 26.25em;
  background: url("/img/main-bg.jpg") no-repeat;
  background-size: cover;
  background-position: bottom center;
  border-bottom: solid 6px #007860;
  text-align: center;
  padding-top: 6.375em;
}

#about {
  position: relative;
  background: url("/img/about-bg-orange.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #e5ebea;
}
#about .rodeo-grid-unit:nth-child(1) {
  padding: 2.5em;
  padding-left: calc(50vw - 640px);
}
#about .rodeo-grid-unit:nth-child(2) {
  padding: 5em;
  padding-left: 4em;
  padding-right: calc(50vw - 640px);
  background: rgba(255, 255, 255, 0.075);
}
#about .image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("/img/landing-wcu-about.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5);
}
#contact {
  width: 100%;
  padding: 24px 0px;
  background-color: #007860;
}

#contact .label {
  text-transform: uppercase;
  color: #e5ebea;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}

#contact .label .highlight {
  color: #eeb95d;
}

#contact form input {
  margin-bottom: 0;
  border: none;
  background-color: #009076;
  color: #e5ebea;
}

#contact form .rodeo-button {
  background-color: #004637;
  color: #e5ebea;
  text-transform: uppercase;
  font-weight: 700;
}

#amenities-modal ul li {
  font-style: italic;
  display: block;
  padding: 6px 0;
}

::-webkit-input-placeholder {
  color: inherit;
  font-family: "Montserrat", sans-serif;
}

:-moz-placeholder {
  color: inherit;
  font-family: "Montserrat", sans-serif;
}

::-moz-placeholder {
  color: inherit;
  font-family: "Montserrat", sans-serif;
}

:-ms-input-placeholder {
  color: inherit;
  font-family: "Montserrat", sans-serif;
}

#contact form ::-webkit-input-placeholder {
  color: inherit;
  font-family: "Montserrat", sans-serif;
}

#contact form :-moz-placeholder {
  color: inherit;
  font-family: "Montserrat", sans-serif;
}

#contact form ::-moz-placeholder {
  color: inherit;
  font-family: "Montserrat", sans-serif;
}

#contact form :-ms-input-placeholder {
  color: inherit;
  font-family: "Montserrat", sans-serif;
}

#map .rodeo-grid-unit:nth-child(1) {
  padding: 5em;
  padding-left: calc(50vw - 640px);
}
#map .rodeo-grid-unit:nth-child(2) {
}
#map-canvas {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

#houses {
  position: relative;
  background: url("/img/houses-bg-orange.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #e5ebea;
}
#houses .rodeo-grid-unit:nth-child(1) {
  padding: 2.5em;
  padding-left: calc(50vw - 640px);
}
#houses .rodeo-grid-unit:nth-child(2) {
  padding: 5em;
  padding-left: 4em;
  padding-right: calc(50vw - 640px);
  text-align: center;
  background: rgba(255, 255, 255, 0.075);
}

#houses .image-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("/img/house.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5);
}
.floor-plan-image,
.elevation-image {
  max-width: 100%;
  height: auto;
}

.rodeo-accordion-panel {
  border-bottom: solid 2px #f6f6f6;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.rodeo-accordion-content {
  padding-top: 16px;
}
.rodeo-accordion-trigger {
  color: #bf4800;
}
.rodeo-accordion-close .fa-close {
  color: #007860;
}

footer ul li {
  color: #bf4800;
  text-transform: uppercase;
  font-weight: 700;
}

/**

	MODALS

*/
#contact-modal input,
#leasing-app input {
  font-family: "Montserrat";
  border: none;
  background-color: #e5ebea;
}

#contact-modal .rodeo-styled-select,
#leasing-app .rodeo-styled-select {
  border: none !important;
  background-color: #e5ebea;
  font-size: 16px;
}
#contact-modal .rodeo-styled-select:after,
#leasing-app .rodeo-styled-select:after {
  color: #666;
}
#contact-modal .rodeo-styled-select select,
#leasing-app .rodeo-styled-select select {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

.line-spacing-plus {
  line-height: 1.75em;
}

/*XL*/
@media screen and (min-width: 1280px) {
  #amenities-modal .rodeo-grid-unit:first-of-type {
    border-right: solid 4px #d0d0d0;
  }
}

/*L*/
@media screen and (min-width: 1025px) and (max-width: 1279px) {
  #about .rodeo-grid-unit:nth-child(1) {
    padding: 2.5em;
  }
  #about .rodeo-grid-unit:nth-child(2) {
    padding: 4em;
  }

  #map .rodeo-grid-unit:nth-child(1) {
    padding: 4em;
  }

  #houses .rodeo-button {
    width: 40%;
  }

  #houses .rodeo-grid-unit:nth-child(1) {
    padding: 2.5em;
  }

  #houses .rodeo-grid-unit:nth-child(2) {
    padding: 4em;
  }

  #houses .rodeo-button:nth-child(1),
  #houses .rodeo-button:nth-child(3) {
    margin-right: 0.5em;
  }

  #houses .rodeo-button:nth-child(2),
  #houses .rodeo-button:nth-child(4) {
    margin-left: 0.5em;
  }

  #houses .rodeo-button:nth-child(3),
  #houses .rodeo-button:nth-child(4) {
    margin-top: 1em;
  }
}

/*M*/
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #hero {
    height: 240px;
    padding-top: 66px;
  }
  #hero img {
    width: 219px;
    height: 108px;
  }

  #about .rodeo-grid-unit:nth-child(1) {
    padding-left: 2.5em;
  }
  #about .rodeo-grid-unit:nth-child(2) {
    padding: 3em 2.5em;
  }

  #map .rodeo-grid-unit:nth-child(1) {
    padding: 4em 2.5em;
  }

  #houses .rodeo-grid-unit:nth-child(1) {
    padding: 2.5em;
  }
  #houses .rodeo-grid-unit:nth-child(2) {
    padding: 3em 2.5em;
  }

  #houses .rodeo-button {
    width: 40%;
  }

  #houses .rodeo-button:nth-child(1),
  #houses .rodeo-button:nth-child(3) {
    margin-right: 0.5em;
  }

  #houses .rodeo-button:nth-child(2),
  #houses .rodeo-button:nth-child(4) {
    margin-left: 0.5em;
  }

  #houses .rodeo-button:nth-child(3),
  #houses .rodeo-button:nth-child(4) {
    margin-top: 1em;
  }
}

/*M Portrait*/
@media screen and (max-width: 960px) and (min-width: 768px) {
}

/*M Landscape*/
@media screen and (max-width: 1024px) and (min-width: 960px) {
}

/*S*/
@media screen and (max-width: 767px) {
  #hero {
    height: 240px;
    padding-top: 66px;
  }
  #hero img {
    width: 219px;
    height: 108px;
  }
  .rodeo-shorty {
    margin-left: auto !important;
  }
  #about,
  #houses {
    background-attachment: scroll;
  }
  #about .rodeo-grid-unit:nth-child(1) {
    padding: 2.5em;
  }
  #about .rodeo-grid-unit:nth-child(2) {
    padding: 3em 2em;
    background: rgba(255, 255, 255, 0.075);
    text-align: center;
  }
  #about .image-container {
    height: 240px;
  }

  #contact {
    padding-left: 2em;
    padding-right: 2em;
  }

  #map .rodeo-grid-unit:nth-child(1) {
    padding: 3em 2em;
    text-align: center;
  }

  #houses .rodeo-grid-unit:nth-child(1) {
    padding: 2.5em;
  }
  #houses .rodeo-grid-unit:nth-child(2) {
    padding: 3em 2em;
    text-align: center;
  }
  #houses .image-container {
    height: 240px;
  }
  #houses .rodeo-button {
    width: 100%;
    margin-left: 0 !important;
    margin-bottom: 1em;
  }
  #houses .rodeo-button:last-of-type {
    margin-bottom: 0;
  }

  footer ul li {
    display: block !important;
    text-align: center !important;
    margin: 0.5em 0 !important;
  }
}

/*XS*/
@media screen and (max-width: 480px) {
  #about .image-container {
    height: 180px;
  }
}