* {
    box-sizing: border-box;
}

html {
    position: relative;
    height: 100%
}

html,
body {
    height: 100%;
    margin: 0;
}

body {

   
    background-size: cover;
    font-family: 'Titillium Web', sans-serif;
    margin: 0px 0px;
 display: flex;
 flex-direction: column;
    }

.todo-body{min-width: 600px}

.book-now h2 {
    margin: 5;
    margin-bottom: 0;
    font-size: 3vw
}

.intro h2 {
    margin: 5px 10px 30px;
    text-align: center;
    font-size: 35;
    font-family: 'Titillium Web', sans-serif;
}



.header {
    padding: 15px 0 0 0;
    margin: auto;
    background-color: lightsteelblue;
    width: 100%;
    line-height: 50px;


}


.title {
    font-size: 6vw;
    color: black;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0 15px;
    padding: 0;
    text-align: center;
    font-weight: bold;
}


h1.sub-heading{
    font-size: 4vw;
    display: block;
    font-family: 'Titillium Web', sans-serif;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #443f3e;
    position: relative;
    padding:  0 25px ;
}




nav#top {
    background-color: lightsteelblue;
   
    float: right;

}

a.navbar {
    font-size: 20px;

    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    background-color: lightsteelblue;
    color: darkslategray;
    display: block;
    padding: 0 15px;
    margin: 0;





}

.navbar li {
 
    float: left;
}


#top li:hover {
    background-color: whitesmoke;
    color: #3e4444;

}

a.navbar:hover {
    color: #3e4444;
    background-color: whitesmoke;
}

ul.navbar {
    margin: 0;
    list-style: none;
    padding: 0;
}

a.navbar {text-decoration: underline;}


nav#top-head {
    background-color: whitesmoke;
    display: block;
    ;
   
   

}

a.navbar-head {
    font-size: 22px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
   
    color: darkslategray;
   font-variant:small-caps;
    padding: 0 15px;
    margin: 0;
    line-height: 2.2;
    display: block;;
    transition-duration:  .2s;





}

ul.navbar{width: 100%;}

.navbar-head li {
 
 display: inline-block;


}


a.navbar-head:hover {
    background-color: lightgray;
   

}



ul.navbar-head {
    margin: 0;
    list-style: none;
    padding: 0;
}

a.navbar-head {text-decoration: underline;}




.small-show {
    display: none;
}

#active {
    background-color: steelblue;
    color: whitesmoke
}

#active:hover {
    cursor: default;
}

.row {
    /*text-align: center;*/
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0px;
}

.centered{
    position: relative;
}

.space {
    margin-bottom: 5px
}

.row:after {
    content: "";
    display: table;
    clear: both;

}

.clearfix{
    overflow:auto;
}

.page-subtitle {
    color: whitesmoke;
    margin: 15 auto 0;
    height: 100%;
    ;
    text-align: left;
}





.intro {
    padding: 15px 0px 0;
    width: 100%;
    color: white;
    background-color: #234524; /*#b0deca;  /*#c4deb0; /*#b3b0de; /* #decab0; /* #e5f2d8; */
    line-height: 1.4em;
    background-size: cover;
    text-align: left;
    position: relative;
    font-size: 22px;
    font-family: 'Titillium Web', sans-serif;
    overflow: hidden;
    clear: both;
    flex: 5;
    


}
.intro a{
    text-decoration: underline;
    color: #1f1f7a;
}

.intro p{
    margin: auto 15%
}
.intro a:hover{
    background-color: lightgrey;
    color: black;

}

.intro-bottom{
    background-color:#40476d;
    padding: 25px 0;
    margin: 0
}

.intro-bottom p{margin-top: 15px;
margin-bottom: 15px;}


.intro-bottom a{
    color: white;
}
.container{
    position: relative;
    width: 100%;
}


.front-home-img{
    display: block;
    max-width: 100%;
    max-height: 400px;
    object-fit:cover;
    border: solid 2px #80aaf0 ;
    margin: auto;
    border-radius: 5px;
   
}

.tour-overlay{
   background-color: #80aaf0 ;
    box-shadow: 1px 1px  #3333cc;
    color: black;
    font-size: 18px;
    padding: 20px 12px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    transition: .2s;
   border: 1px solid #3e4444;
   height: 75px;
   margin: 25px 0;
   
   
    
}





.tour-overlay:hover {
    background-color: #4682b4
    ;
    box-shadow: none;
    
    cursor: pointer;
    }




.overview-items{text-align: center;
    float: left;
}

.overview-items li{
display: inline-block;
list-style: none;
background-color: #413e44;
color: whitesmoke;
opacity: 1;
border-style:inset;
box-shadow: 1px 3px #3e4444;
border-width: 1px;
margin: 15px;
text-align: center;
vertical-align: middle;
font-size: 20px;
padding-top: 20px;
border-radius: 10px;
min-height: 125px;
max-width: 300px;


}


.intro ul{
    background-color: gainsboro; 
    padding: 25px 30px ;
    margin-bottom: 0;
}

h3.overview-list-heading{
    font-size: 22px;
list-style: none;
font-weight: bold;
font-family: sans-serif;
padding-top: 20px;
color:#40476d;


}

.overview-list-item{
list-style: none;
margin-left: 10px;
font-size: 20px;
padding: 10px auto 15px;
margin-bottom: 25px;
color: #28232c;
text-align: justify;

}

.front-home{display: none;}



.col-container {
    display: flex;
    width: 100%;
}


.book-now-lead-in{
    width: 100%;
    height: 8px;
    background-image: linear-gradient(to bottom, rgba(74,87,74, .75), rgba(185,219,185,1))
}


.lead-in{
    width: 100%;
    height: 10px;
    background-image: linear-gradient(to bottom, rgba(65,62,68, .59), rgba(245,245,245,1))
}

.faq-lead-in{
    width: 100%;
   min-height: 10px;
    background-image: linear-gradient(to bottom, rgba(65,62,68, .59), rgba(211,211,211,1));
   
   
}
.book-now {
    
    background-color: #b9dbb9; /*#8bc38b; */
    color: black;
    border-style: solid;
    border-color: whitesmoke;
    border-width: 0;
    font-size: 25px;
    padding: 15px 10px;
    text-align: center;
    border-bottom: 1px solid #507255;

}

.promo-container img {
    margin: 10 auto;
    
    
}

.promo-container {
    padding-bottom: 10px;
margin: auto;
width: 100%;
    }

.promo-images {

    border: thin solid black;
    display: block;
    max-width: 95%;
    margin: auto;


}

.house-images-container {
    width: 100%;
    margin: auto;
    padding: 0;




}




.book-heading {
    width: 100%;
    text-align: center;
}

p {
    margin: 15px 5
}

.prices {
    color:#3333cc
    ;
    font-size: 30px;
    text-align: center;
    margin: 10px auto;
    font-family: 'Noto Sans', sans-serif;
    width: 90%;
    font-weight: bold;
    background: rgba(128, 170, 240, .0);
    border-radius: 5px;


}

.regular-price{
    color:#413e44;
    font-size: 18px;
    font-weight: normal;


}

a {
    text-decoration: none
}

.rates{
    font-style: italic;
    font-size: 12px
}


.btc-price-disclaimer{
    font-style: italic;
    font-size: 16px
}

#footer li {
    padding: 5 0
}

#disclaimer {
    font-size: 16px;
    font-style: italic;
}

 button#book-home{
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    min-width: 225px;
    min-height: 10px;
    border-radius: 8px;
    font-size: 22px;
    background-color:#3333cc; /*#234524; /* #488b49 ; */
    box-shadow: 1px 2px #3e4444 ;   
    color: whitesmoke;
    padding: 0px 10px;
    box-sizing: border-box;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: .2s



}

#book-home #calendar-icon{
    font-size: 25px;
}
button#book{
    
   
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    min-width: 225px;
    min-height: 60px;
    border-radius: 8px;
    font-size: 24px;
    background-color: #3333cc;/*#234524; /* #488b49 ; */
    box-shadow: 1px 2px #3e4444 ;   
    color: whitesmoke;
    padding: 0px 10px;
    box-sizing: border-box;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: .2s
}

button#book:hover, button#book-home:hover {
    background-color: #4682b4; /*#4f6a4f; */
     color: black;
    cursor: pointer;
 
}



button#book-faq{
    
   
   
    min-width: 225px;
    min-height: 60px;
    border-radius: 8px;
    font-size: 24px;
    background-color:#234524; /* #488b49 ; */
    box-shadow: 1px 2px #3e4444 ;   
    color: whitesmoke;
    padding: 0px 10px;
    box-sizing: border-box;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: .2s;
    
    
}


button#book-faq:hover {
    background-color: #4f6a4f;
     color: whitesmoke;
    cursor: pointer;
 
}
.button {

    vertical-align: middle;
    padding: 0 10px;
    width: 100%;
    margin: 0 20px;
 

}

.button-float-right{
z-index: 999;
    left:85%; 
    top: 5%;
position: fixed;
}


#calendar-icon{
    font-size: 28px;
    padding: 10px;

}

.payments {


    margin: 5px auto ;

}

.faq-payments{
    padding-left: 10px;
    margin-bottom: 25px;
}
.paylogo {
    margin: 10px !important;
    max-width: 25%
}


.faq-platforms{
width: 150px;
min-height: 50px;
margin: 5px 20px 20px;
transition: transform .2s;
}

.faq-platforms:hover{
border-style: solid;
border-width: thin;
border-color: steelblue;
border-radius: 4px;
transform: scale(1.06);

}



p.rental-agreement{
    text-align: center;
    margin: 10px auto;
    padding-bottom: 15px;
    font-size: 22px
}



#paypal {
    max-height: 50px;
    border-radius: 5px;
    border: 2px solid black
}


#vrbo-platform{    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)), url("images/vrbo-logo.png");
    background-size:contain;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;



}

#vrbo-platform:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("images/vrbo-logo.png");

}



#airbnb-platform{    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4)), url("images/airbnb_logo.png");
    background-size: contain;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;



}

#airbnb-platform:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("images/airbnb_logo.png");
}

#bitcoin {
    max-height: 50px;
    border: 2px solid black;
    border-radius: 8px
}

#applepay {
    max-height: 50px
}

#gpay {
    max-height: 50px;
    background-color: snow;
    padding: 10px;
    border: 2px solid black;
    border-radius: 5px;

}


.row .feature-col {background-color: gainsboro;}


.small-feature-box {
    border-style: solid;
    border-color: #44423e;
    border-width: 3px;
    height: 350px;
    width: 95%;
    margin: 5px 2.5%;
    display: grid;
        position: relative;
    float: left;
    font-size: 40px;
    font-weight: bold;
    color: #443f3e;
    transition: transform .2s;


    /* Animation */
    ;
}

.small-feature-box:hover {
    transform: scale(1.01);

    color: whitesmoke;


    /* (101.5% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.feature {
    min-height: 100%;



}

.feature-col {
    width: 33.33%;
    background-color: lightgrey;
    padding: 25px 0px;
}



#tour {
    background-image: linear-gradient(rgba(155, 20, 20, 0), rgba(255, 255, 255, 0.7)), url("images/housefront-small.jpg");
    background-size: cover;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;

}

#tour:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("images/housefront-small.jpg");
    
}


#location {
    
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7)), url("images/location.jpg");
    background-size: cover;
    text-align: center;
    background-position: right;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;


}

#location:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("images/location.jpg");
    color: lightgoldenrodyellow;
}


#todo {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)), url("images/things-to-do-butte.jpg");
    background-size: cover;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;



}

#todo:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("images/things-to-do-butte.jpg");
}


.bottom {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    
}

.about-image{
    max-width: 450px;

}



.faq-caption {align-items: center;
    text-align: center;
font-style: italic;
font-size:18px;
margin: auto;
width: 100%}

.footer-bottom-content{
flex: 1 0 auto;

}



.footer{
    background-color: #413e44;
    min-height: 100px;
    margin-top: 0px;
    padding-bottom: 45px;
          color:whitesmoke;
      flex-shrink: 0;
} 

.footer a{
    color: whitesmoke;
    
}

.footer-row {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0px 0px 0px 40px;



}


.footer-row:after {
    content: "";
    display: table;
    clear: both;

}

#footer-about{color: inherit;
text-decoration: underline;}



.footer h2{text-align: left;
padding-left: 5px;
margin-bottom: 0;
color: #80aaf0}





.footer ul{
    list-style: none;
    width: 100%;
    margin: auto;
    padding: 10px 20px ;
    text-align: left;
}

.footer li{
    padding-top: 15px;
        
}
 
.footer-col{
    width: 33%;
}

.footer-title{
    padding: 15px 25px 5px;
    font-size: 24px;
    text-align: center;
    border-bottom: 1px solid whitesmoke
}


a.foot-link {
    font-size: 20px;
}

a.foot-link:hover {
text-decoration: underline;    ;

}





a {
    color: inherit
}

ul.copy {
    text-align: center;
    width: 100%;
}


/* set col widths */

.col-2-3 {
    width: 66.66%;
}

.col-1-2 {
    width: 50%;

}

.col-1-3 {
    width: 33.33%;
}

.col-1-4 {
    width: 25%;

}

.col-1-8 {
    width: 12.5%;
}


.col-3-4 {
    width: 75%;
}

.col-1-1 {
    width: 100%;
}

.col-7-8 {
    width: 87.5%;

}

.col-2-5 {
    width: 40%;
}

.col-3-5 {
    width: 60%
}






/*To Do page CSS  */

img.todo-image {

    max-width: 155px;
   max-height: 125px;
    margin: 5px auto 0;
    object-fit: contain;
    display: table-cell;
    vertical-align: middle;
  
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    width: 100%;
    justify-content: center;
    align-content: center;

   

}


.flex-container-left {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    width: 100%;
    justify-content: left;

   

}

.overview-list-item:last-of-type{
    padding-bottom: 35px;
}

.flex-container-left:last-of-type{
    padding-left: 15px;
}
.flex-container:after {
    content: "";
    display: table;
    clear: both;
}

.flex-container-left:after {
    content: "";
    display: table;
    clear: both;
}

.todo-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0px;
    align-items: center;



}

.todo-row:last-child{
    margin: auto;
}

.todo-row:after {
    content: "";
    display: table;
    clear: both;
    height: 100%;
   
}

.todo-item {
    background-color: whitesmoke;
    border: 10px solid darkslategray;
    margin: 25px 10px;
    min-height: 300px;
        padding: 3px;
    width: 500px;
     display: table-cell;
     position: relative;
     vertical-align: top;
     
    
   
    
    
}

.picture-column {

    margin: 10px auto 0;
    display: table-cell;
    width: 100%;
    height: 100%;
    flex: 3;
    text-align: center;
    
    



}

.text-column {

    text-align: left;
    padding-left: 0;
    width: 100%;
    flex: 5;
    min-height: 100%;
    padding-bottom: 40px;
    
}

.text-column h2 {
    text-align: center;
    margin: 18 0 6;

}

.address li {
    list-style: none;
    display: inline-block;
    margin: 0 15;
    padding: 0;
}

.address ul {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

.source a {
    color: blue;
    display: inline-block;

  }

  .source p{
      margin-bottom: 20px;
  }

.source {
    width: 100%;
    font-size: 20px;
    padding: 20 0 0;
      display: block;
          position: absolute;
     border-width: 20px;
        margin: 55 auto 0 ;
    text-align: center;
    bottom: 0;
     

}

h2.todo-title {
    text-align: center;
    padding-top: 0;
}


.fa {font-size: 45px;
margin-top: 20px}

.fa-last{padding-left: 25;}

.fas.todo-image{
    transform: translateY(5px)
}

.tab{
    overflow: hidden;
    background-color: whitesmoke;
  
    
        
}
.tabcontent{display: none;
}




.tab{
    background-color: whitesmoke;
    width: 100%;
    
}

.tab button.active
{
    background-color: lightgray;
      color: black;
    border: thin solid #d3d3d3;
    margin: 0;
    
    
}
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: grey;
    color: black;

}

.tab button.active:hover{
   color:  black;
    cursor: default;
}

.tab button{
    background-color: lightsteelblue;
    font-size: 16px;
   outline: none;
  cursor: pointer;
  padding: 12px 16px 5px;
  transition-duration:  .2s;
    border-radius: 0;
  
    color: #413e44;
        width: 16%;
  
    
}




/*Photo Gallery CSS Start*/

.tour-row {
    margin: 5px -8px 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* Add padding BETWEEN each column (if you want) */

.tour-row,
.tour-row > .column {
    padding: 10px;
}


/* Create three equal columns that floats next to each other */

.column {
    float: left;
    width: 425px;
    display: none;
    

    /* Hide columns by default */
}

/* Clear floats after rows */

.tour-row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */

.content {
    background-color: white;
    padding: 5px;
    font-size: 18px;
    border-radius: 0px;
    height: 100%;
    transition: .2s;


}



.content:hover{
    transform: scale(1.02)
}
.table-heading {text-align: center;
}



.content h4 {
    font-size: 20px;
    margin: 3px auto;
}
/* The "show" class is added to the filtered elements */

.show {
    display: block;
}

/* Style the buttons */

.btn {
    border: none;
    outline: none;
    padding: 12px 16px 5px;
    background-color: lightsteelblue;
    cursor: pointer;
    transition-duration: .2s;
    font-size: 16px;
    color: #413e44;

    

}

/* Add a grey background color on mouse-over */

.btn:hover {
    background-color: grey;
    color: black;
}

/* Add a dark background color to the active button */

.btn.active {
    background-color: lightgray;
    color: black;
    cursor: default;
}

#myBtnContainer{
    background-color: whitesmoke;
    width: 100%;
    
}
/*Photo Gallery CSS End*/

/* Style the Image Used to Trigger the Modal */

.myImg {
    border-radius: 0px;
    cursor: pointer;
    transition: 0.2s;
}

.myImg:hover {
    opacity: 0.7;
  
}

/* The Modal (background) */

.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

/* Modal Content (Image) */

.modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 900px;
}

.caption-text {
    display: inline;
    
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */

#caption {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 700px;
    text-align: center;
    color: #F2F2F2;
    padding: 10px 0;
    height: 150px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
}

/* Add Animation - Zoom in the Modal */

.modal-content,
#caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

/* The Close Button */

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.2s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#tour-content{
    margin: auto;
    text-align: center;
    background-color: lightgray;

}



.link-box {
    width: auto;
    height: auto;
    margin: 0px 0px 0px;
}






/* Style the tab */

.tab {
    overflow: hidden;
   
   
    ;

    /* Black w/ opacity */
    
}

.tablinks {
    border: none;
    outline: none;
    padding: 10px 20px 5px;
    background-color: lightsteelblue;
    cursor: pointer;
    transition-duration: .2s;
    font-size: 16px;

    

}

.wrapper { margin: 0 75px;
}


/* Style the tab content */

.tabcontent {
    display: none;
    padding: 15px 12px;
    border-top: 1px solid lightgrey;
    border-top: none;
    min-height: 300px;
    background-color: lightgrey;
}

#Overview {
    display: block;
}

.link {
    width: 250px;
      background-color:#80aaf0      ;
    display: inline-flex;
    margin: 25px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border: 1px solid black;
    color: black;
    font-size: 18px;
    
    min-height: 60px;
    text-align:center;

}

.link:hover{
    background-color: #4682b4;
}
.main {
    height: auto;
    margin: 0 75px 75px;
    text-align: center;


    font-family:sans-serif;
    
    display: block;
    text-align: center
}

.map {
    position: relative;
max-width: 85%;
margin: auto;
 overflow: hidden;
border-style: solid;
border-width: 5px;
border-radius: 5px;
border-color: #3e4444;

}

.map iframe{width: 100%;
max-height: 80%;}




.float-right{
    float: none;
}


nav#top-head{
    border-bottom: 4px solid #413e44;

}


.espresso_img{
max-height: 250px;
width: 250px;
border-radius: 10%;
float: left;
margin: 15px 25px 50px;
object-fit: cover;
display: inline-block;

}


.desk_img{
    max-height: 200px;
    width: 200px;
    border-radius: 10%;
    float: right;
    margin: 15px;
    }

    
/*.hero-image{
    height: 125px;
    width: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.75)), url("images/housefront-small.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}



.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
  }

  */

  @media screen and (min-width: 690px) {

    .title {
        font-size: 4.5vw;
       
    }


    h1.sub-heading{
        font-size: 3vw;
    }
  }


  
  @media screen and (min-width: 880px) {


    .title {
        text-align: center;
        font-size: 4.5vw ;
    }

    h1.sub-heading{
        font-size: 2.5vw;
        text-align: center;
        color: #443f3e;
        padding-top: 4px;
         
     
     
     }
  }


  
  @media screen and (min-width: 1000px) {

    .title {

     
        font-size: 3vw;
        text-align: left;
      
        
       
    
    
    }
    
    
    h1.sub-heading {
       
        font-size: 2vw;
        
    
     
       
        
    
    
    }
  }


  @media screen and (min-width: 1250px) {


    .title {
        font-size: 2.8vw
     
     
     }
     
     
     h1.sub-heading {
        
         font-size: 2.2vw;
     
     
     }
  }


@media screen and (max-width: 1000px) {



    [class*="col-"] {
        width: 100%;
        margin-bottom: 5px;
        margin-top: 5px;
        display: block;
        padding: 0;

    }
    .header [class*="col-"] {margin-bottom: 0px; margin-top: 0px;}
    
    .row {
        max-width: 100%;
        padding:  0px;
        margin: 0px ;


    }


    .header {line-height: normal;}




    .page-subtitle {
        text-align: center;
    }


    


     
    .intro {
        
        height: auto
    }

    .book-now {
        min-height: auto;
    }


 button#book-home{
        position: absolute;
        top: 12%;
        left: 50%;
        font-size: 2.8vw;
        
        

     
    
    
    
    }


    #book-home #calendar-icon{
        font-size: 2.8vw;
    }
    button#book{
            
                max-height: 80px;
            min-width: 150px;
            padding: 5px;
            font-size: 18px;
           
    
        
    }
       .footer-row {
        max-width: 95%;
        padding: 5px 0px 10px 0px;
        margin: 0px ;


    }


    .front-home{
        height: 500px;
          background-color: lightgrey ;
        margin: 10px 0;
        object-fit: cover;
        background: url(images/housefront-small.jpg);
        background-repeat:no-repeat;
        background-position:top;
        background-size: cover;
        overflow: hidden;
        max-width: 1600px;
        margin:auto;
        display:block;
        
        
            
            
        }


        .book-front-home-image{
            padding: 10px;
            display: block;
        }

        .column {

        
            height: auto;
    
        }


        .about-image{
            max-width: 90%;
        
        }




        .button-float-right{
          z-index: 999;
            position: fixed;
            bottom: 20px;
            right: 20px;
            top: auto;
           
            }

         
            #calendar-icon{
                font-size: 18px;
            }

}

@media screen and (max-width: 1850px){
.column {width: 20% }    

}


@media screen and (max-width: 1250px) {
    .todo-row {
        max-width: 100%;
        padding: 5px 0px;
        margin: 0px 0 15px 0;
        display: flex;
        flex-direction: column;

    }

    .col-1-4.picture-column {
        flex: auto;
        margin-left: 25%;
        display: block;
        margin: auto;
        text-align: center;
        width: 100%;
        
        
        
        
    }
    .column {

        width: 33%;}
    
    img.todo-image{
       text-align: left;
        display:  inline-block;
        
    height: 50px;
        
        
  }
    

  
.todo-item {
    width: 45%;



    
    }
.text-column h2 {
    text-align: center;
    margin: 0 !important;

}
    
    .col-3-4.text-column{
        flex: auto;
        padding: inherit 25px
    }

  

button.guide-tab{
        padding: 10px 5px;
        width: 16.1%;
    }
    
   


.call-out{
    font-size: 22px;
    color: #443f3e;
    font-weight: bold;
    font-style: italic;;

}






}

@media screen and (max-width: 880px) {
  


    .small-hide {
        display: none;
    }
    .small-show {
        display: inline;
    }

   .col-3-4.text-column{
    flex: none;
        padding: inherit 25px;
       
            flex: 4;
    }
    
   .column{width: 50%;}

}




@media screen and (max-width: 790px) {
    img.todo-image{
      max-height: 100px;
        
      

        
    }
    

    .promo-container img {
      
        max-width: 95%;
        height: auto;
        object-fit: cover;;
    
    }
h2.text-column{
        margin: 0;
    }

    

    .todo-row{
        margin: auto;
    }
    
    

    
.todo-item {
    width: 85%;
    

    
    }

    /*Photo Gallery CSS Start*/
    /* Create three equal columns that floats next to each other */
   


    .tour-row {
        margin: 0 0 -8 0 ;    }



    /* Content */
   

    


    .content h4 {
        font-size: 2.5vw;
    }

    

    .promo-container img {
      
        width: 95%;
        
    
    }


  /*  .hero-image{
        height: 200px;

    }
*/

}

@media screen and (max-width: 890px) {
       .footer-col {
        width: 100%;
        margin-bottom: 5px;
        margin-top: 5px;
        display: block;
        padding: 0;

    }
         .feature-col{
        width: 100%;
        margin-bottom: 0px;
        margin-top: 0px;
        display: block;
        padding: 0;

    }
}

@media screen and (max-width: 690px) {
.navbar-head li{
    min-width: 100%;
    text-align: center;

}

a.navbar-head{
    font-size: 4vw;
}


.content h4 {
    font-size: 3vw;
}





    button#book-home{
        font-size: 5vw;
        
        

     
    
    
    
    }


    #book-home #calendar-icon{
        font-size: 5vw;
    }



}
@media screen and (max-width: 525px) {
    .todo-item {
        width: 95% !important;
    height: 450px;
    
        
        }



        

}


@media screen and (max-width: 489px) {
    .intro {width: 100%;
    margin: 0 ;}


    .intro ul{
        padding-left: 10px;
    }
    .front-home-img{
        max-height: 350px;
        object-fit:fill;
    } 
 
    
    .tour-overlay{
        font-size: 14px;
       
    }
    


    
 
.todo-body{min-width: 0}    
    .todo-row{
        margin: auto;
    }
 
     
      
  
    

    .caption-text {
     display: none;
    }
    


    button#book{
        max-width: 70%;
        width: 60%;
        min-height: auto;
        padding: 15px 10px;
        font-size: 4.8vw;
        line-height: 0%;
       
    }

    .button-float-right{
        left: 50%;
    }


/*
    .hero-image{
        height: 250px;

    }

*/
}

@media screen and (max-width: 600px){
.btn {
    border-color: #413e44;
    border-style: solid;
    border-width: 1px;
    right: 0px;
    width: 100%;

    padding: 5px 16px;
    
    cursor: pointer;
    display: block;

}



.footer-col{
    width: 100%;
}

.feature-col{width: 100%;}
.column {

    width: 100%;
    height: auto;

}
/* Add a grey background color on mouse-over */



/* Add a dark background color to the active button */

#myBtnContainer{
    background-color:whitesmoke;
       width: 100%;
}
}

@media screen and (max-width: 820px){
    .btn {
        border-color: lightgrey;
        border-style: solid;
        border-width: thin;
    
        width: 100%;
    
        padding: 5px 16px;
        
        cursor: pointer;
        display: block;
    min-height: 35px;
    }

    button.tablinks{width: 100%;
        border-color: lightgrey;
        border-style: solid;
        border-width: thin;
        padding: 5px 16px;
}}