body {
    margin: 0;
    font-family: 'Source Sans Pro', Arial, sans-serif;
    color: rgba(48, 69, 92, 0.8);
    background-size: cover;
    background-repeat: no-repeat;
}
#leftortopcontent {
    height: auto;
}
#rightorbottomcontent{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column nowrap;
        -ms-flex-flow: column nowrap;
        flex-flow: column nowrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@media screen and (min-width:768px) {
    #leftortopcontent {
        margin: calc(0.5rem + 0.5vh) 0 calc(0.5rem + 0.5vh) 1%;
    }
    #rightorbottomcontent {
        height: calc(100vh - 1rem - 1vh);
        position: fixed;
        top: calc(0.5rem + 0.5vh);
        right: 1%;
    }
}
@media screen and (min-width:1024px ) {
    #leftortopcontent {
        width: 48.5%;
    }
    #rightorbottomcontent {
        width: 48.5%;
    }
}

@media screen and (min-width:768px) and (max-width:1023px ) {
    #leftortopcontent {
        width: 38.5%;
    }
    #rightorbottomcontent {
        width: 58.5%;
    }
}

@media screen and (max-width:767px ) {
    #leftortopcontent {
        margin: calc(0.5rem + 0.5vh);
    }
    #rightorbottomcontent {
        height: auto;
        min-height: 1024px;
        max-height: 1024px;
        margin: calc(0.5rem + 0.5vh);
    }
}

#map-canvas {
  -webkit-box-flex: 1;
  -webkit-flex: auto;
      -ms-flex: auto;
          flex: auto;
  overflow: hidden;
  border-width: 10px;
  border-color: #fffced;
  border-style: solid;
}
/* Styles related to accordian */
#info_container {
  display: block; /* The original here was inline-block */
  box-sizing: border-box;  
  position: relative;
  box-shadow: 0 10px 0 0 rgb(4, 106, 56) inset;
  background-color: #fff;
  width: 100%;
  padding: 30px 30px 15px 30px;
}
.section p a:link{color: #38301f; text-decoration: underline;}
.section p a:visited{color: #e88c1b; text-decoration: none;}
.section p a:active{color: #38301f;}
.section p a:hover{color: #e88c1b; text-decoration: underline;}

.transition, #info_container p, .location-list, .single-listing, .single-listing *,
 .section .sep:before, .section .sep:after {
  -webkit-transition: all 0.25s ease-in-out;
          transition: all 0.25s ease-in-out;
}
#container_heading, .section {
  -webkit-animation: flipdown 0.5s ease both;
          animation: flipdown 0.5s ease both;
}
#container_heading {
  text-transform: uppercase;
  font-size: calc(15px + 2vw);
  line-height: calc(17px + 2vw);
  letter-spacing: 3px;
  font-weight: 200;  /* 100 */
}
#container_subheading {
  color: #864f08;  
  font-size: calc(10px + 1.5vw);
  line-height: calc(12px + 1.5vw);
  letter-spacing: 3px;
  font-weight: 600;  /* 100 */
  margin-bottom: 20px;
}
#info_container #container_heading {
  color: rgba(4, 106, 56, 1);
  font-weight: 700;
}
.section-heading {
    color: #333;
    font-weight: 700;
    font-size: calc(12px + 1.5vw);
    line-height: calc(12px + 1.5vw);
    font-weight: 500;
    letter-spacing: 1px;
    display: block;
    background-color: #fefffa;
    margin: 0 0 15px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.section-heading::before {
    margin-right: 20px;
}
.section {
  /* position: relative; */
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px solid rgb(4, 106, 56);
  min-height: 52px;
}
.section .rich-text {
  color: #000000;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  /*max-height: 800px; /* Necessary for animation to work correctly */
  opacity: 1;
  filter: alpha(opacity=100);
  /* -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0); */
  margin-top: 14px;
  z-index: 2;
}
.section + div .rich-text p:first-of-type {
    margin-top: 0;
}
.location-list{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0;
  margin: 0;
  /* Note that a max-height property is necessary here in order for the animation to work correctly.
     It just need to be large enough to cover any circumstance, so make very large */
  max-height: 50000px; 
  filter: alpha(opacity=100);
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  z-index: 3; 
}
.location-list a {
  z-index: 4;   
}
.single-listing{
  /* Also has a media query below */
  box-sizing: border-box; 
  display: inline-block;
  word-wrap: break-word;
  margin: 0 10px 12px 0;
  margin: 0 0.6rem 0.75rem 0;
  padding-top: 4px;
  max-height: 400px; 
  border-top: 1px dotted #864f08;
  color: #864F08;
  z-index: 4; 
  filter: alpha(opacity=100);
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

.single-listing * {
  filter: alpha(opacity=100);
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

.single-listing a:link{color: #864F08; text-decoration: dotted underline;} 
.single-listing a:visited{color: #e88c1b; text-decoration: none;}
.single-listing a:active{color: #38301f; text-decoration: none;}
.single-listing a:hover{color: #e88c1b; text-decoration: underline;}

@media screen and (min-width:1600px){
  .single-listing{width: 23.5%;}  
}
@media screen and (orientation: landscape) and (min-width: 1280px) and (max-width: 1599px) {
  .single-listing{width: 31%;}  
}
@media screen and (orientation: landscape) and (max-width: 1279px) {
  .single-listing{width: 48%;}  
}
@media screen and (orientation: portrait) and (min-width:800px) {
  .single-listing{width: 48%;}  
}
@media screen and (orientation: portrait) and (max-width: 799px) {
  .single-listing{width: 100%;}  
}
/* Create enough .section display animations for up to 10 list items.  Adjust animation timing as necessary. */
.section:nth-of-type(1) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.section:nth-of-type(2) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.section:nth-of-type(3) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
.section:nth-of-type(4) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.section:nth-of-type(5) {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}
.section:nth-of-type(6) {
  -webkit-animation-delay: 1.35s;
          animation-delay: 1.35s;
}
.section:nth-of-type(7) {
  -webkit-animation-delay: 1.45s;
          animation-delay: 1.45s;
}
.section:nth-of-type(8) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.section:nth-of-type(9) {
  -webkit-animation-delay: 1.55s;
          animation-delay: 1.55s;
}
.section:nth-of-type(10) {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.section:last-of-type {
  padding-bottom: 0;
}
.section .sep {
  position: absolute;
  -webkit-transform: translate(-6px, 0);
      -ms-transform: translate(-6px, 0);
          transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
.section .sep:before, .section .sep:after {
  content: "";
  position: absolute;
  background-color: #864f08;
  width: 3px;
  height: 9px;
}
.section .sep:before {
  -webkit-transform: translate(-2px, 0) rotate(45deg);
      -ms-transform: translate(-2px, 0) rotate(45deg);
          transform: translate(-2px, 0) rotate(45deg);
}
.section .sep:after {
  -webkit-transform: translate(2px, 0) rotate(-45deg);
      -ms-transform: translate(2px, 0) rotate(-45deg);
          transform: translate(2px, 0) rotate(-45deg);
}
.section input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  filter: alpha(opacity=0);
}
/* This section sets properties, particularly animation properties, 
   on elements when the dropdown section is closed.  These statements
   must come after the statements that set the properties of these
   elements when they are visible/displayed. */
.section input[type=checkbox]:checked ~ p, 
 .section input[type=checkbox]:checked ~ .location-list,
 .section input[type=checkbox]:checked ~ .location-list .single-listing {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate(0, 50%);
      -ms-transform: translate(0, 50%);
          transform: translate(0, 50%);
}
/* The following line eliminates having listings hanging below the bottom section, 
    but it eliminates the animation when closing a section */
.section input[type=checkbox]:checked ~ .location-list .single-listing,
.section input[type=checkbox]:checked ~ .location-list .single-listing *,
.section input[type=checkbox]:checked ~ .location-list .single-listing * *  {
  display: none; 
}
.section input[type=checkbox]:checked ~ .sep:before {
  -webkit-transform: translate(2px, 0) rotate(45deg);
      -ms-transform: translate(2px, 0) rotate(45deg);
          transform: translate(2px, 0) rotate(45deg);
}
.section input[type=checkbox]:checked ~ .sep:after {
  -webkit-transform: translate(-2px, 0) rotate(-45deg);
      -ms-transform: translate(-2px, 0) rotate(-45deg);
          transform: translate(-2px, 0) rotate(-45deg);
}
/* ------------------------------------------------------ */

@-webkit-keyframes flipdown {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform-origin: top center;
            transform-origin: top center;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  80% {
    -webkit-transform: rotateX(8deg);
            transform: rotateX(8deg);
  }
  83% {
    -webkit-transform: rotateX(6deg);
            transform: rotateX(6deg);
  }
  92% {
    -webkit-transform: rotateX(-3deg);
            transform: rotateX(-3deg);
  }
  100% {
    -webkit-transform-origin: top center;
            transform-origin: top center;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

@keyframes flipdown {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform-origin: top center;
            transform-origin: top center;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  80% {
    -webkit-transform: rotateX(8deg);
            transform: rotateX(8deg);
  }
  83% {
    -webkit-transform: rotateX(6deg);
            transform: rotateX(6deg);
  }
  92% {
    -webkit-transform: rotateX(-3deg);
            transform: rotateX(-3deg);
  }
  100% {
    -webkit-transform-origin: top center;
            transform-origin: top center;
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}
#slideshow .logo {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 75px;
    height: 75px;
    z-index: 999999;
}