/* ========== HEADER FOOTER,  FLEX CONTAINER  ======== */

html, body {margin: 0; padding: 0; overflow-x: hidden;}


html
{
font-family: 'Kanit', sans-serif;
font-size: 62.5%;
}

body {
background-color: #eee;
font-size: 1.6rem;
line-height: 2.4rem;
text-align:center;
}

header, footer {
width: 100%;
}

h1, h2, h3, h4, h5 {
font-weight: 400;
 font-kerning: inherit;
    }
    
h2 { letter-spacing: 0.03em;}
h3 {letter-spacing:1px; color:orange; }
    
    


header {
  padding: 1em 0;
  background-color: ccc;
}

.wrapper { /* flex-container */
width:95%;
margin:auto;
background-color: #fff;
display: flex;
 display: -webkit-flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

section { /* flex-item child of wrapper */
 flex: auto;
 -webkit-flex: auto;
 overflow: hidden;
}

.lake-photo
{
	border-top: 2px solid orange;
	background-color: #EEE;
	background-image: url(../img/lake.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	-moz-background-size: cover;
	background-size: cover;
}

h1.lake{

    /* margin-top: 1em; */
    margin: .5em 0px ;
    padding: 1em;
    font-size: 8rem;
    line-height: .8em;
    font-weight: 200;
    color: rgba(250,250,250, .8);
}


.sub-info-container { /* flex-container child of section */
display: flex;
 display: -webkit-flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  justify-content: center;
  -webkit-justify-content: center;
  }


.sub-stats { /* flex-item child of sub-info-container */
 flex: auto;
 -webkit-flex: auto;
align-self: center;
-webkit-align-self: center;
padding: 2em;
}

.sub-stats li {
margin: 0;
padding: .6em;
border-bottom: 1px orange dotted;
font-size: 100%;
background: transparent;
}

.sub-stats-house { /* flex-item child of sub-info-container */
 flex: 0 1 50%;
 -webkit-flex: 0 1 50%;
align-self: auto;
-webkit-align-self: auto;
padding: .5em;
}


.price-item {
background-color: #efe;
width:100%;
padding:1em;
}



#juicebox-container {
padding:2em;
}

div .thumbnail-container {
display: flex;
 display: -webkit-flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

.sub-thumb-item li{
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self:flex-start;
align-self: flex-start;
}

.contact-item {
}

footer {
background: #eee;
height: 100px;
padding: 1em;

    }

footer a {text-decoration: none; }
footer a:link {}
footer a:visited a:active{ color: #226a94; }
footer a:hover, a:focus { color: #226a94; }


/* ====================  MAIN FLEX ROWS ================ */




/* =================== VISIBILITY ORDER  ================= */



/* =================== CUSTOM CLASSES ===================== */


/* ======================= FORMS ========================== */


/* ======================= LINKS ========================== */

a:link {color: #686868;}
a:visited {color: #931C64;}
a:hover {color:#D91525;}
a:active {}



/* ===================== TYPOGRAPHY ======================== */

h1 {font-size: 2.8rem;}
h2 {font-size: 2.4rem;}
h3 {font-size: 1.8rem;}
h4 {font-size: 1.6rem;}
h5 {font-size: 1rem;}



/* ==================== MEDIA QUERIES ==================== */


/* =================== 30em (480px) ================ */

@media only screen and (max-width: 32em) {
h2 {padding: 0 1em; }
div.sub-info-container { /* container */
display: flex;
display: -webkit-flex;
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.lake-photo img{
height:12em;
}

}

/* ================ 37.5em (600px) ================== */

@media only screen and (max-width: 37.5em) {
  h1.lake {  /* margin-top: 1em; */
    font-size: -webkit-xxx-large;
    /* font-size: 8rem; */
    line-height: .9em;
  }

}

/* ===== == = === 48em (768px) === = == ===== */

@media only screen and (min-width: 48em) {

}

/* ===== == = === 56.25em (900px) === = == ===== */

@media only screen and (min-width: 56.25em) {


}

/* ===== == = === 68.75em (1100px) === = == ===== */

@media only screen and (min-width: 68.75em) {

}

/* ===== == = === 81.25em (1300px) === = == ===== */

@media only screen and (min-width : 81.25em) {

}