html{font-size: 100%;}

body{
	background-color: #c6c9cb;
	font-family: Arial, Roboto, Helvetica, Sans-serif;
	color: rgb(0,0,0);
	font-size: 1rem;
} 

h1, h2, h3, h4, h5, h6 {
	font-family: "Work Sans", "Century Gothic", 'Open Sans', Sans-serif; font-weight: 200;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: .625em;
	text-align: center;
}

h1 {font-size: 4.5em; margin-bottom: 0;}
h2 {font-size: 3em; margin: .875em .375em .5em .375em;}
h3 {font-size: 2em; margin-top: .5em;}
h4{font-size: 1em; font-weight: bold;}
h5{ font-size: .875em;}
h6{ font-size: .875em;}

/*FONT ADJUSTMENTS*/

a:link {color: rgb(0,0,0); text-decoration: none;}
a:visited {color: rgb(0,0,0);}
a:hover {color: #ff0000; font-weight: bold;}

/*used for changing navigation link on current page, need js*/
a.current {
    font-weight: bold;
}

footer{text-align:center;}

li {list-style-type: none; padding: 0; margin: 0;}
ul {padding: 0; margin: 0;}

.container{max-width: 80rem; margin: 0 auto;}

.content{
	max-width: 94%;
	background-color: #ffffff;
	text-align: center; 
	margin: 0 auto;
	border-bottom: 2em solid #c6c9cb;
}

/*IMAGES*/

img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
    padding-bottom: 1rem;
}

/*Slide down slide up panels*/

#panel, #floorplan, #pricingdiv, .flip {
    padding: 5px;
    border-bottom: solid 1px #c6c9cb;
}

#panel {padding-bottom: 1.5rem;}
#caldiv {padding: .2rem;}

#panel, #floorplan, #caldiv, #wordsdiv, #pricingdiv{
	display: none;
}

.more, .floorp, .caldisp, .wordsdis, .pricedisp {cursor: pointer;}
.more:hover, .floorp:hover, .caldisp:hover, .wordsdis:hover, .pricedisp:hover {color: #ff0000; font-weight: bold;}
.more i, .floorp i, .caldisp i, .wordsdis i, .pricedisp i {font-style:normal;}
.more b, .floorp b, .caldisp b, .wordsdis b, .pricedisp b {display: none;}
.more.active i, .floorp.active i, .caldisp.active i, .wordsdis.active i, .pricedisp.active i {display:none;}
.more.active b, .floorp.active b, .caldisp.active b, .wordsdis.active b, .pricedisp.active b{display: block;}

/*Various divs:  centering and thick grey border*/

.housediv, .locationdiv, .photodiv, .closebut, .bookingdiv, .caldivbdr, .mapdiv{
	margin: 0 auto;
	border-top: 2em solid #c6c9cb;
}

/*Header: image of house and heading: SYP*/

.housediv h1 {display: inline-block; vertical-align: middle; max-width: 45%; padding: 1%;}
.housediv img {display: inline-block; vertical-align: middle; padding-bottom: 0; max-width: 52%;}

/*Location and words section*/

.locationdiv p {padding:0 3%; text-align: left; margin: .625em;}
.locationdiv img {max-width: 35%; padding-bottom: 0;}
.wordsdis {display: block; text-align: center;}

/*photos section*/

.photodiv img {display: inline-block; max-width: 30%; margin: 2% 1% 0 1%; padding-bottom: 0;}

/*make a booking section*/
.bookingdiv {Padding: 1.5em 0 .25em 0;}

/*floorplan section*/

.mapdiv {padding-top:  1em;}
.fpimg {max-width: 50px; padding-top: .75rem; padding-bottom: .5rem;}


/*slide down calendar and pricing sections*/

.caldivbdr, .pricebdr {border-bottom: 2em solid #c6c9cb;}
.caldivbdr .flip {border-bottom: 0}
.pricebdr .flip {padding: 1.25em 0 .3em 0;}
iframe {border: .5em solid #c6c9cb; width: 97%; <!--[if IE] allowTransparency="true" -->;}

/*obfuscation*/
.helpfulcontainer {
margin: 0 auto;
max-width: 60rem;
padding: 20px 0 20px 0;
text-align: center;	
}
div.helpful>span:nth-child(2) {
  display: none;
}

/*MEDIA QUERIES, 980, 736, 480*/	

	@media screen and (max-width: 61.25em) {
	.housediv h1 {font-size: 3.75em;}
	h2 {font-size: 2.5em;}
	.locationdiv img {max-width: 40%;}
	select {min-width: 45%;}
	.bookingdiv {Padding: 1em;}
}

	@media screen and (max-width: 46em) {
	.housediv {display:block;}
	.housediv h1 {max-width: 96%; padding: 2% 2% 0 2%; font-size: 3em; margin-bottom: .375em;}
	.housediv img {max-width: 100%;}
	.locationdiv h2 {font-size: 1.75em;}
	.closebut h2, .bkland h2  {font-size: 2em;}
	.photodiv img {max-width: 98%;}
	.locationdiv p {padding: 0 2%;}
	.locationdiv img {max-width: 60%;}
	select {min-width: 50%;}
	.housediv {border-top: 1em solid #c6c9cb;}
}

	@media only screen and (max-width: 30em){
	.housediv h1 {font-size: 2em;}
	.locationdiv h2 {font-size: 1.5em; font-weight: 300;}
	select {width: 94%;}
	.desc {text-align: left;}
}


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}