/* Generated by less 2.5.1 */
/*mobile first ----------------------------------------*/
body {
  font-size: 16px;
  background-color: #ffffff;
}
header {
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  /*this margin bottom tightens the space between the image and the logo*/
  margin-bottom: -3px;
}
header .jsSlogan {
  display: none;
}
header h1 {
  float: left;
  color: #ffffff;
  display: none;
  font-family: 'Rye', cursive;
  font-size: 1.75em;
  padding-top: 14px;
}
header h2 {
  font-size: 1.5em;
  padding-top: 12px;
  top: 104px;
  text-align: center;
  width: 100%;
  color: #000000;
}
header h3 {
  font-size: 1.5em;
  padding-top: 12px;
  top: 164px;
  text-align: center;
  width: 100%;
  color: #000000;
}
header img {
  /*opacity: 0.2;*/
  width: 100%;
}
header .mainLogo {
  width: 25%;
  position: absolute;
  display: none;
}
main {
  /* end of section*/
}
main .imageGalleryText {
  text-align: center;
  font-size: 2em;
  padding: 9px;
}
main .imageGalleryTextSub {
  text-align: center;
  font-size: 1.2em;
  padding-bottom: 7px;
}
main section {
  /*this is the style for the email button*/
  /*end of style for the email button*/
}
main section h2 {
  padding: 1em;
  text-align: center;
  font-size: 2em;
  font-family: 'Roboto', Arial, sans-serif;
}
main section h3 {
  text-align: center;
  font-family: 'Volkhov', serif;
  font-size: 1.5em;
  line-height: 1.55em;
  padding-top: 22px;
}
main section .logoImage {
  width: 100%;
}
main section img {
  width: 48%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
main section p {
  font-size: 1.25em;
  line-height: 1.25;
  padding: 1em;
  font-family: 'Roboto', sans-serif;
}
main section .signature {
  text-align: right;
  margin-right: 13px;
}
main section .button {
  display: inline-block;
  border-radius: 4px;
  background-color: #910000;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 1.2em;
  padding: 20px;
  width: 40%;
  transition: all 0.5s;
  cursor: pointer;
  margin-top: 25px;
  /*this centers the email button in mobile*/
  margin-left: 31%;
  margin-bottom: 15%;
  text-decoration: none;
  color: #ffffff;
  font-family: 'Roboto', Arial, sans-serif;
}
main section .button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
main section .button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
main section .button:hover span {
  padding-right: 25px;
}
main section .button:hover span:after {
  opacity: 1;
  right: 0;
}
main .aboutContactPage {
  display: none;
}
footer p {
  height: 3em;
  background-color: #910000;
  color: #ffffff;
  text-align: center;
  padding-top: 13px;
}
nav {
  background-color: #000000;
  line-height: 2em;
  padding: .5em;
  text-align: center;
}
nav ul li {
  font-family: 'Roboto', sans-serif;
  list-style-type: none;
}
nav .tablet-desk-menu {
  display: none;
}
.mobile-nav {
  margin: .5em auto;
}
/*to keep the footer from floating behind the divs*/
.galleryFooter {
  clear: both;
}
.emailInfo p {
  text-align: center;
  line-height: 2.25em;
}
.contactFont {
  font-family: 'Roboto', Arial, sans-serif;
}
/*gallery 1 page*/
/*.galleryHeader {
    height: 391px;
    background-color: @black;
}
.galleryMain {
    background-color: @black;
    padding: 10em;
    margin: -1px;
    
}
.textGallery {
    text-align: center;
    font-family: @roboto;
    font-size: 1.25em;
    line-height: 23px;
}*/
/*gallery_2.html*/
/*this is marked gallery 2 just in case the client ever want gallery 1 back*/
.galleryTwo {
  background-color: #ffffff;
  height: 50em;
}
div.gallery {
  border: 1px solid #ccc;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
  font-family: 'Roboto', Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
/*end of gallery_2.html*/
/* Mobile navigation styling classes for JavaScript menu */
.menu-btn div {
  position: absolute;
  left: 100%;
  top: 64%;
  padding-right: 8px;
  margin-top: -0.5em;
  line-height: 1.2;
  font-size: 18px;
  font-weight: 200;
  vertical-align: middle;
  z-index: 99;
}
/* This is for the hamburger's horizontal lines. */
.menu-btn span {
  display: block;
  width: 19px;
  height: 3px;
  margin: 4px auto;
  background: #ffffff;
  z-index: 99;
}
/* The styling for the links in the dropdown menu. */
.responsive-menu {
  display: none;
}
.responsive-menu a {
  color: #ffffff;
  font-size: 1.1em;
  line-height: 2.8;
  text-decoration: none;
}
.expand {
  display: block !important;
}
/*this is the image gallery on the gallery.html page.*/
/*.w3-button {
    border:none;
    display:inline-block;
    outline:0;
    padding:8px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
}
.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-button{
    width:100%;
    padding:8px 16px;
    
}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-button{width:10%}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}

.w3-display-left{
    position:absolute;
    top:50%;
    left:0%;
    transform:translate(0%,-50%);
    -ms-transform:translate(-0%,-50%);
}
.w3-display-right{
    position:absolute;
    top:50%;
    right:0%;
    transform:translate(0%,-50%);
    -ms-transform:translate(0%,-50%);
}


.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
.w3-display-position{position:absolute;}

.w3-content{
    max-width:980px;
    margin:auto;
}*/
/*end of gallery.html*/
/*tablet and up------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) {
  header {
    height: 457px;
    background-color: #000000;
  }
  header .jsSlogan {
    display: block;
  }
  header .mainLogo {
    display: block;
    width: 33%;
    margin-top: 18px;
    margin-left: 20px;
  }
  header h1 {
    padding-left: 28px;
    display: block;
  }
  header h2 {
    font-size: 3em;
    position: absolute;
    top: 104px;
    padding-right: 37px;
    /*right: 0;*/
    text-align: right;
    width: 100%;
    color: #ffffff;
  }
  header h3 {
    font-size: 1.5em;
    position: absolute;
    top: 164px;
    padding-right: 29px;
    text-align: right;
    /*left: 0;*/
    width: 100%;
    color: #ffffff;
    font-family: 'Volkhov', serif;
  }
  header .homeImage {
    width: 78%;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
  }
  main section .logoImage {
    width: 60%;
  }
  main section img {
    width: 19%;
  }
  main section .button {
    width: 24%;
    margin-left: 38%;
  }
  main section .contactFont {
    font-family: 'Cinzel', serif;
  }
  main .aboutContactPage {
    display: block;
  }
  .w3-button {
    font-size: 30px;
    top: 43%;
  }
  /* This is the navigation outside of the hamburger menu. */
  .menu-btn {
    display: none;
  }
  /* Removing the hamburger menu from tablet size and up. */
  .responsive-menu {
    display: none;
  }
  nav {
    padding: 23px;
    margin-top: 0;
  }
  nav .tablet-desk-menu {
    display: block;
  }
  nav .tablet-desk-menu ul {
    float: right;
    background-color: #000000;
    padding: 0;
    margin-top: -17px;
  }
  nav .tablet-desk-menu ul li {
    display: inline;
    font-size: 20px;
    padding: 0 1.3em;
  }
  nav .tablet-desk-menu ul li a {
    color: #ffffff;
    text-decoration: none;
  }
  nav .tablet-desk-menu ul li a:visited {
    color: #ffffff;
  }
  nav .tablet-desk-menu ul li a:hover {
    color: #910000;
  }
  .galleryHeader {
    height: 819px;
  }
  .contactPageHeader {
    height: 56px;
  }
}
/*desktop---------------------------------------------------------------------------------*/
@media only screen and (min-width: 1024px) {
  body {
    background-color: #ffffff;
  }
  /*this add a black background to the body on the homepage*/
  .desktopBlackout {
    background-color: #000000;
  }
  header {
    height: 782px;
  }
  header .mainLogo {
    width: 22%;
    margin-top: 14px;
    margin-left: 20px;
  }
  header h3 {
    font-size: 2.5em;
  }
  header .homeImage {
    width: 100%;
  }
  main section .button {
    width: 18%;
    margin-left: 42%;
  }
  .contactPage {
    background-color: #ffffff;
  }
  .homeFooter {
    display: none;
  }
  .galleryHeader {
    height: 819px;
  }
  .aboutUs {
    display: none;
  }
}
/*this resizes the home image*/
@media only screen and (min-width: 1200px) {
  header .homeImage {
    width: 81%;
  }
}
@media only screen and (min-width: 1280px) {
  header .homeImage {
    width: 75%;
  }
}
@media only screen and (min-width: 1800px) {
  header .homeImage {
    width: 59%;
  }
}
/*gallery_2.html media queries*/
@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 768px) {
  .responsive {
    width: 100%;
    margin-bottom: 70px;
  }
  .clearfix:after {
    content: "";
    display: table;
  }
}
/*end of gallery_2.html media queries*/
/*Developer notes*/
/*The client prefers not to crop these images unless they do not cut off details of cabintry. This created an even layout in the grid for the gallery 2 page. If the client decides to go back to the gallery 1 page, it is a slideshow where image sizes are not a concern. The code is commented out in the LESS file and the nav would need to be updated if the decision is made to go back. The folder will be added to the file tree but will not be accessed unless its used in the nav.*/
/*The about section is hidden in mobile. The client wanted to omit the about section but it would have proken the agreed upon wireframes. This display none in mobile and display in both tablet and desktop allows the about section to be used on the home page of mobile and in the contact page of larger screens.*/
/*Once the gallery is updated with a specific height and width, this comment should be updated. Currently the optimized images are currently hovering around 1000px width.*/