/* home.css - bearhousemt.com */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
:root {
	scroll-behavior: smooth;

	/* icon up arrow 18px x 18px */
	--icon-top-black: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwBESUcs+bL0QAAAP1JREFUOMtj/P//PwM1ABMDlQAdDZrFyMW4mIGboLr////jxqsYtMzYGdIZhN1zGNb918GnFreLVjNqmccy2J76x8PK8OkoA0OqhwPjegYd0ryGbAgMEDCMiShDiDCMiaAhgUs/r/D88p6QYYzwBInVkLWfGVa6Lf3PwMiwxZ8h3Hc7jyBcjs+agWH2jgP/AxmuIAw6x6hib8XgfAirIQx/oHayYBrmxMCwd+Ou//oMtyBeM2L4rCCE5E4MQxgYGBj+//HZyLByM7I3BeQZGPQZPqGlIwbxZCmGFIawnfEM//+z4E4zDCyb/RiiGVSKMhn+/5eAiTOO5ExLb4MAmVa1cPqR5Y8AAAAASUVORK5CYII=);
	--icon-top-white: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA9QCmACMGBTTyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5QYYFiwsg/JyzgAAAKFJREFUOMvlkzEKwkAQRX/iEXIOJXgVsRe8jI11mpxL7AULcUkjWD4bF5ZlshMhpHFgmmF4+/exWwGao2rNVIuCNpK27hZQ6g54AgPQl3anQgYP9gukCLMcdZL2klYjNnaSek+2BXlLenmwegJkLal1Yd87ngwnd6BJPDTAzXB2Th1ds9NikpDMwkiyS/6ODsDDSJJ3TBaAY5xX//1plwV9ACb6QNcPy9vjAAAAAElFTkSuQmCC);
	--icon-top: var(--icon-top-white);
}

html {
	font-family:"Open Sans",Arial,Helvetica,sans-serif;
	font-size:18px;
	font-weight:400;
	line-height:1.6;
}

h1 { font-size:2.66rem; color:#aaa; text-align:center; }
h2 { font-size:2rem; color:#aaa; }
h3 { font-size:1.77rem; color:#aaa;}
h3>small { display:block;margin-top:-.5em;font-size:66%; line-height:1.2; }
h4 { font-size:1rem; font-weight:bold; margin-bottom:0; }

main,header,footer { max-width:1280px; margin:0 auto; }
main { padding-bottom:40px; } /* space for top-of-page button */
header>h1 { margin-top:0; }

header .logo-wrapper {}
header .logo a { display:block; height:300px;  background-position:center; background-repeat:no-repeat; background-size:contain; background-image: url(/images/logo.jpg); text-align:center; }

footer .logo-wrapper {}
footer .logo a { display:block; height:300px;  background-position:center; background-repeat:no-repeat; background-size:contain; background-image: url(/images/footer-logo.jpg); text-align:center; }

pre { white-space:break-spaces; }

.amenities > div{
	white-space:break-spaces;
}
.amenities h4 { margin-bottom:0; }
.amenities h4:first-child { margin-top:0; }

.pictures { display:flex; }
.small-pictures { display:flex; flex-flow:row wrap; }

.pictures img { max-width:600px; max-height:600px; margin:2px 0px 0px 2px; }
.small-pictures img { max-width:300px; max-height:300px; margin:2px; vertical-align:top; }

#title {
	text-align:center;
}
#title>p>span {
	margin:0 .5em;
	font-weight:500;
	font-size:1.2rem;
}
#reserve_reservation { margin:2em 4em; text-align:center; }

/* Show more/less */
details > summary {
	font-weight:bold;
	cursor:pointer;
	width:fit-content;
}
details > summary::after {
	content:" More";
}
details:open > summary::after {
	content:" Less";
}

/* Reservation button */
.reservation-button {
  border: 0;
  line-height: 2.5;
  padding: 0 20px;
  font-size: 1.3rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 10px;
  border-radius: 30px;
  background-color: tomato;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(0 0 0 / 0.6);
}

.reservation-button:hover {
  background-color: red;
}

.reservation-button:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(0 0 0 / 0.6);
}

/* Top menu */
.top-menu {
	display:flex;
	flex-flow:row wrap;
	justify-content:center;
	background-color:pink;
}
.top-menu a {
	background:pink;
	color:white;
	margin:1px;
	padding:0 .5em;
	text-align:center;
	text-decoration:none;
	font-size:.9rem;
	font-weight:bold;
}
.top-menu a:hover { background-color:red; }

/* Top of page */
.top-of-page {
        display:block;
        width:36px;     /* image width 18px */
        height:32px;    /* image height 18px */
        background: pink var(--icon-top) no-repeat center;
        margin:0 3px 8px 0;     /* use only px units */
}
.top-of-page:hover { background-color:red; }

/* Message dialog */
.dialog-overlay {
	display:block;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:rgb(192,192,192,.65);
	z-index:1000;
}
.dialog-msg,.dialog-error {
	display:block;
	position:fixed;
	top:30%;
	left:50%;
	transform:translate(-50%,-50%);
	padding:2em;
}
.dialog-msg { border-color:green; }
.dialog-error { border-color:red; }

/* Contact form */
#contact_us form {
	margin:0 0 40px 0;
	padding:0 2em 1em;
	border:solid black 2px; 
}
#contact_us label { display:block; margin:2em 0 0 0; }
#contact_us input { width:30em; max-width:100%; font-size:1.2rem; line-height:2; }
#contact_us input:invalid { border-color:red; }
#contact_us textarea { font-size:1.2rem; height:14em; width:80%; min-width:30em; max-width:100%; }
#contact_us button {
	display:block;
	font-size:1.3rem;
	font-weight:bold;
	line-height:2;
	width:8em;
	margin:1em 0 0;
	color:white;
	background-color:pink;
	border:none;
	border-radius:1em;
}
#contact_us button:active,
#contact_us button:hover,
#contact_us button:focus { background-color:red; }
#contact_us button[disabled] { background-color:pink; }


@media screen and (max-width: 1092px) {
	.pictures { display:block; text-align:center; }
}
@media screen and (max-width: 866px) {
	.pictures { display:block; }
}
@media screen and (max-width: 744px) {
	/* dim where airbnb changes to block */
	#featured_pics .small-pictures { display:none; }
	.top-menu a {font-size:1rem; }
}
@media screen and (max-width: 600px) {
	.pictures img { max-width:100%; max-height:600px; margin-top:0px; }
	#contact_us form { padding:1em; }
	#contact_us textarea { width:100%; min-width:0; max-width:100%; }
}