/*Colors from photos:
ocean-blue: #2A61DD
lounge-blue: #3F50A7
bay-blue: #006A97
grass-green: #8AB632
leaf-green: #5F861C
grass-green: #687B20
church-green: #616C5C
sunset-gold: #F5C86E
wood: #7F3A1C
off-white: #DDDED8
*/

/*Set up for rem font size (relative to root size)*/
html {
  font-size: 100%;
}

@font-face {
  font-family: park-ave;
  src: url(font/park-ave.ttf);
}

@font-face {
  font-family: sf-arborcrest-light;
  src: url(font/sf-arborcrest-light.ttf);
}
@font-face {
  font-family: sf-arborcrest-med;
  src: url(font/sf-arborcrest-med.ttf);
}
@font-face {
  font-family: sf-arborcrest-heavy;
  src: url(font/sf-arborcrest-heavy.ttf);
}

.page {
      background-color: #006A97;
      text-align: center;
      width: 100%;
      margin: auto;
      padding: 0px;
    }
.container {
      background-color: #ffffff;
      font-size: 24px;
      color: #333333;
      text-align: center;
      width: 960px;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
    }
.header {
    font-family: sf-arborcrest-heavy;
    background-color: #2A61DD;
    font-size: 3rem;
    color: #ffffff;
    text-align: left;
    width: 97%;
    display: inline-block;
    min-height: 10%;
    margin: auto;
    padding: 1%;
    padding-left: 2%;
}

.blurbette {
    width: 50%;
    font-size: 1.5rem;
    text-align: right;
    margin-right: 10px;
    float:right;
}

.col-100 {
  width: 96%;
  text-align: left;
  margin: auto;
  padding: 2%;
  display: inline-block;
  vertical-align: top;
}

.col-left {
  width: 46%;
  margin: auto;
  padding: 2%;
  display: inline-block;
  vertical-align: top;
}

.col-right {
  width: 40%;
  margin: auto;
  padding: 2%;
  display: inline-block;
  vertical-align: top;
}

.moreButton {
  display: none;
}
.button-bar {
  width:100%;
  /*background-color: #765322; */
}

.prop-button {
   border-top: 1px solid #96d1f8;
   background: #006a97;
   background: -webkit-gradient(linear, left top, left bottom, from(#2a5fdd), to(#006a97));
   background: -webkit-linear-gradient(top, #2a5fdd, #006a97);
   background: -moz-linear-gradient(top, #2a5fdd, #006a97);
   background: -ms-linear-gradient(top, #2a5fdd, #006a97);
   background: -o-linear-gradient(top, #2a5fdd, #006a97);
   padding: 3%;
   width: 24%;
   display: inline-block;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 1.5rem;
   font-weight: normal;
   font-family: sf-arborcrest-heavy;
   text-decoration: none;
   vertical-align: middle;
   margin: auto;
   margin: 2%;
   padding: 2%;
  }
.prop-button:hover {
   border-top-color: #687B20;
   background: #3F50A7;
   color: #F5C86E;
}
.prop-button:active {
   border-top-color: #687B20;
   background: #3F50A7;
}
.prop-choose {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  text-align: left;
  vertical-align: top;
  width: 96%;
  display: inline-block;
  min-height: 10%;
  margin: auto;
  padding: 2%;
}

.slideshow {
      background-color: #ff33ff;
      font-size: 24px;
      color: #eeeeee;
      text-align: left;
      width: 98%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 1%;
    }
.prop-name {
      background-color: #ffffff;
      font-size: 1.2rem;
      font-weight: bold;
      color: #333333;
      text-align: left;
      vertical-align: top;
      width: 45%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 1%;
      padding-left: 2%;
    }
.summary {
      background-color: #ffffff;
      font-size: 1.0rem;
      font-weight: bold;
      color: #333333;
      text-align: right;
      vertical-align: top;
      width: 47%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      margin-right: 10px;
      padding: 1%;
    }

.description {
      background-color: #eeeeee;
      font-size: 1.1rem;
      color: #333333;
      text-align: left;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 2%;
    }
.amenities {
      background-color: #ffffff;
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      text-align: left;
      vertical-align: top;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 2%;
    }
.amen-section {
      background-color: #ffffff;
      font-size: 24px;
      color: #333333;
      text-align: left;
      vertical-align: top;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      margin-top: 10px;
      padding: 2%;
}
.amen-header {
      background-color: #ffffff;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      text-align: left;
      width: 100%;
      display: inline-block;
      margin: auto;
      padding: 0px;
    }
.amen-content {
      background-color: #ffffff;
      font-size: 15px;
      font-weight: normal;
      color: #333333;
      text-align: left;
      width: 100%;
      display: inline-block;
      margin: auto;
      padding: 0px;
    }
.location {
      background-color: #ffffff;
      font-size: 24px;
      font-weight: bold;
      color: #333333;
      text-align: left;
      vertical-align: top;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
    }
.gmap {
      background-color: #ffffff;
      font-size: 24px;
      color: #333333;
      text-align: left;
      width: 100%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
    }
.vtour {
      font-family: sf-arborcrest-heavy;
      background-color: #ffffff;
      font-size: 24px;
      color: #333333;
      text-align: center;
      vertical-align: top;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      margin-bottom: 2%;
      padding: 5%;
}
.vtour-button {
   border-top: 1px solid #96d1f8;
   background: #006a97;
   background: -webkit-gradient(linear, left top, left bottom, from(#2a5fdd), to(#006a97));
   background: -webkit-linear-gradient(top, #2a5fdd, #006a97);
   background: -moz-linear-gradient(top, #2a5fdd, #006a97);
   background: -ms-linear-gradient(top, #2a5fdd, #006a97);
   background: -o-linear-gradient(top, #2a5fdd, #006a97);
   padding: 3%;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 1.5rem;
   font-weight: normal;
   font-family: sf-arborcrest-heavy;
   text-decoration: none;
   vertical-align: middle;
   margin: auto;
   margin-bottom: 5%;
   padding-left: 10%;
   padding-right: 10%;
  }
.vtour-button:hover {
   border-top-color: #687B20;
   background: #3F50A7;
   color: #F5C86E;
}
.vtour-button:active {
   border-top-color: #687B20;
   background: #3F50A7;
}

.cooking-button {
   border-top: 1px solid #96d1f8;
   background: #006a97;
   background: -webkit-gradient(linear, left top, left bottom, from(#2a5fdd), to(#006a97));
   background: -webkit-linear-gradient(top, #2a5fdd, #006a97);
   background: -moz-linear-gradient(top, #2a5fdd, #006a97);
   background: -ms-linear-gradient(top, #2a5fdd, #006a97);
   background: -o-linear-gradient(top, #2a5fdd, #006a97);
   width: 24%;
   /*padding: 3%;*/
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 1.5rem;
   font-weight: normal;
   font-family: sf-arborcrest-heavy;
   text-decoration: none;
   vertical-align: middle;
   margin: auto;
/*   margin-bottom: 5%;
   padding-left: 10%;
   padding-right: 10%;*/
  }
.cooking-button:hover {
   border-top-color: #687B20;
   background: #3F50A7;
   color: #F5C86E;
}
.cooking-button:active {
   border-top-color: #687B20;
   background: #3F50A7;
}

.sm-section {
      background-color: #ffffff;
      font-size: 24px;
      color: #333333;
      text-align: center;
      width: 100%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
    }
.sm-item {
      background-color: #ffffff;
      font-size: 24px;
      color: #333333;
      text-align: left;
      width: 12%;
      display: inline-block;
      min-height: 10%;
      margin: 2%;
      padding: 10px;
    }

.video {
   width: 100%;
   height: 100%;
}
.video-intro {
   font-size: 1.2rem;
   color: #0066d4;
   font-weight: bold;
}
    
.availability {
      font-family: sf-arborcrest-heavy;
      background-color: #ffffff;
      font-size: 24px;
      color: #333333;
      text-align: center;
      vertical-align: top;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      margin-bottom: 2%;
      padding: 0px;
    }


.avail-button {
   border-top: 1px solid #96d1f8;
   background: #006a97;
   background: -webkit-gradient(linear, left top, left bottom, from(#2a5fdd), to(#006a97));
   background: -webkit-linear-gradient(top, #2a5fdd, #006a97);
   background: -moz-linear-gradient(top, #2a5fdd, #006a97);
   background: -ms-linear-gradient(top, #2a5fdd, #006a97);
   background: -o-linear-gradient(top, #2a5fdd, #006a97);
   padding: 3%;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 1.5rem;
   font-family: sf-arborcrest-heavy;
   text-decoration: none;
   vertical-align: middle;
   margin: auto;
   margin-bottom: 5%;
  }
.avail-button:hover {
   border-top-color: #687B20;
   background: #3F50A7;
   color: #F5C86E;
}
.avail-button:active {
   border-top-color: #687B20;
   background: #3F50A7;
}


.rates {
      background-color: #ffffff;
      font-size: 24px;
      color: #333333;
      text-align: left;
      vertical-align: top;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 1%;
    }
.rate-display {
    font-size: 12px;
}
.policies {
      background-color: #ffffff;
      font-size: 15px;
      color: #333333;
      text-align: left;
      vertical-align: top;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 1%;
    }
.reviews {
      background-color: #ffffff;
      background: url("/img/lauhala-mat-04.jpg"); 
      background-repeat: repeat;
      background-size: cover;
      font-size: 24px;
      color: #333333;
      text-align: center;
      vertical-align: top;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
    }
.review-title {
      background-color: #2c281a;
      opacity: 0.6;
      font-family: sf-arborcrest-heavy;
      font-size: 2.4rem;
      color: #D0AF89;
      text-align: center;
      vertical-align: top;
      width:55%;
      margin: auto;
      margin-top:2%;
      padding: 2%;
      border: solid 1px;
      box-shadow: 1px 2px #7F3A1C;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
}
.review {
      background-color: #ffffff;
      text-align: center;
      vertical-align: top;
      width: 40%;
      display: inline-block;
      margin: 1%;
      padding: 2%;
      border: solid 1px;
      box-shadow: 1px 2px #7F3A1C;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
}
.review-date {
      background-color: #ffffff;
      font-size: 12px;
      font-style: italic;
      color: #333333;
      text-align: right;
      width: 98%;
      display: inline-block;
      margin: 1%;
      margin-bottom: 2%;
      padding: 0px;
}
.review-comments {
      background-color: #ffffff;
      font-size: 14px;
      font-style: italic;
      color: #333333;
      text-align: left;
      width: 98%;
      display: inline-block;
      margin: 1%;
      padding: 0px;
}
.review-by {
      background-color: #ffffff;
      font-size: 12px;
      color: #333333;
      text-align: right;
      width: 96%;
      display: inline-block;
      margin: 2%;
      padding: 0px;
}
.footer {
      background-color: #eeeeee;
      font-size: 12px;
      color: #333333;
      text-align: center;
      width: 96%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 2%;
    }
.footer-info {
      background-color: #eeeeee;
      font-size: 24px;
      color: #333333;
      text-align: left;
      width: 100%;
      display: inline-block;
      min-height: 10%;
      margin: auto;
      padding: 0px;
    }
.lessDesc {
  display: none;
}

/*Start media queries*/
/* start of desktop styles */

@media screen and (max-width: 991px) {
/* start of large tablet styles */
  .container {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
/* start of medium tablet styles */
  .container {
    width: 100%;
  }
  .col-left {
    width: 94%;
  }
  .col-right {
    width: 94%;
  }
  .blurbette {
    width: 80%;
  }

  .prop-name {
    float: left;
    width: 45%;
  }
  .summary {
    float: right;
    width: 47%;
  }
  .review {
    width: 90%;
  }

}

@media screen and (max-width: 479px) {
/* start of phone styles */
  .container {
    width: 100%;
  }
  .col-left {
    width: 94%;
  }
  .col-right {
    width: 94%;
  }

  .blurbette {
    width: 94%;

  }

  .prop-name {
    float: left;
    width: 45%;
  }
  .summary {
    float: right;
    width: 47%;
  }

  .review {
        width: 90%;
  }
  .moreButton {
  display: block;
  }

  .moreDesc {
    display:none;
  }

}