@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap");
html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5); }

main {
  flex: 1 0 auto; }

header {
  margin-top: 3rem; }

nav {
  font-family: 'Montserrat', sans-serif; }

nav a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.7em;
  line-height: 150% 5;
  margin: .5em;
  border-bottom: 0.25rem solid transparent; }

nav a:hover {
  color: #00BAFF;
  border-bottom-color: rgba(255, 255, 255, 0.25); }

nav a.active {
  color: #FFF;
  border-bottom-color: white; }

@media (min-width: 800px) {
  nav a {
    font-size: 3em; } }
@media (max-width: 630px) {
  nav a {
    font-size: 1.5em; }

  .prop-header h2 {
    font-size: 1.2em; } }
footer {
  flex-shrink: 0;
  padding-bottom: 1rem;
  color: white;
  text-shadow: 1px 1px #000;
  text-align: center; }

hr {
  border-top: 3px double #8C8C8C; }

/* Contact Page CSS */
#contact {
  background-color: #B09F85;
  min-width: 40%; }
  #contact li {
    font-size: 1rem; }
  #contact li a {
    text-decoration: none;
    color: #FFF; }
  #contact li a:hover {
    text-decoration: underline; }
  #contact main {
    width: 100%; }
    #contact main div {
      display: flex;
      align-items: center;
      justify-content: center; }
  #contact h2 {
    text-align: center;
    line-height: .7em; }

@media (max-width: 800px) {
  #contact {
    width: 90%; } }
/* Property Page CSS */
#properties {
  background-color: #B09F85; }
  #properties main {
    width: 75vw; }

.prop h4 {
  border-bottom: 1px solid #333; }

.prop-header {
  text-align: center; }

.props-title {
  margin-bottom: 1rem;
  color: #000;
  text-align: center; }

#props {
  display: flex;
  justify-content: space-evenly; }

#props img {
  border: 2px solid #FFF; }

@media (max-width: 1000px) {
  #props {
    flex-wrap: wrap; } }
@media (max-width: 500px) {
  #props img {
    width: 95%; } }
.prop-tile {
  text-align: center;
  color: #FFF;
  background-color: #333;
  border: 3px solid #FFF; }
  .prop-tile figure {
    position: relative; }

.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute; }

.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: 0;
  content: '';
  display: block;
  border: 5px solid #911E23; }

.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: #EE1C25;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  text-align: center; }

.ribbon-top-left {
  top: -10px;
  left: -10px; }

.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent; }

.ribbon-top-left::before {
  top: 0;
  right: 0; }

.ribbon-top-left::after {
  bottom: 0;
  left: 0; }

.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg); }

.myBtn {
  color: #FFF;
  font-weight: bold;
  font-size: 1em;
  border: none;
  background-color: #00BAFF;
  margin: 1px;
  padding: 5px;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 5px; }

.myBtn:hover {
  color: #FFF;
  background-color: #008000; }

.map {
  text-align: center; }

.traffic img {
  max-width: 80%; }

.video {
  text-align: center; }

/* Custom Margins */
/* Margin Top */
.mt-1 {
  margin-top: .25rem !important; }

.mt-2 {
  margin-top: .5rem !important; }

.mt-3 {
  margin-top: 1rem !important; }

.mt-4 {
  margin-top: 1.5rem !important; }

.mt-5 {
  margin-top: 3rem !important; }

/* Margin Bottom */
.mb-1 {
  margin-bottom: .25rem !important; }

.mb-2 {
  margin-bottom: .5rem !important; }

.mb-3 {
  margin-bottom: 1rem !important; }

.mb-4 {
  margin-bottom: 1.5rem !important; }

.mb-5 {
  margin-bottom: 3rem !important; }

/* iframe CSS */
iframe {
  box-shadow: 8px 8px 8px #555; }

@media (max-width: 800px) {
  iframe {
    height: 200px;
    width: 200px; } }
@media (orientation: landscape) {
  iframe {
    height: 300px;
    width: 400px; } }
@media (min-width: 1500px) {
  iframe {
    height: 60vh;
    width: 70%; } }
/* Gallery CSS */
.slideshow {
  max-width: 80%;
  margin: auto;
  position: relative; }

.slideshow img {
  width: 100%; }

.img-container {
  display: none;
  text-align: center; }

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #FFF;
  font-weight: bold;
  font-size: 36px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none; }

@media (max-width: 800px) {
  .prev, .next {
    font-size: 18px; } }
.next {
  right: 0;
  border-radius: 3px 0 0 3px; }

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8); }

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.4s;
  animation-name: fade;
  animation-duration: 1.4s; }

@-webkit-keyframes fade {
  from {
    opacity: .5; }
  to {
    opacity: 2; } }
@keyframes fade {
  from {
    opacity: .5; }
  to {
    opacity: 2; } }
/* Font */

/*# sourceMappingURL=style.css.map */