body {padding: 0; margin: 0; background: #faf4ec; color: #403524; font-family: 'Cabin', Verdana, sans-serif; font-weight: 400; font-size: 16px; line-height: 120%;}
img {border: none;}

a {text-decoration: none;}

#Top {height: 95px; border-bottom: 3px solid #8a472d; position: relative; min-width: 320px; box-sizing: border-box;
background: #4a404a;
background: -moz-linear-gradient(top, #4a404a 0%, #252126 100%);
background: -webkit-linear-gradient(top, #4a404a 0%,#252126 100%);
background: linear-gradient(to bottom, #4a404a 0%,#252126 100%);
}
#HeaderContent {max-width: 980px; width: 100%; margin: 0 auto; position: relative; height: 95px;}
.PageContainer {max-width: 980px; width: 100%; margin: 0 auto; position: relative; padding: 1px 0 0 0; min-width: 320px;}

#Top a:link, #Top a:visited {color: #e9c284;}
#Menu {cursor: default;}

#Menu a:hover {border-bottom: 2px solid #590000; color: #f7dbb0;}
.MnuItmOn a {border-bottom: 2px solid #880000 !important; color: #f7e6cb !important;}

#Top h1 {color: #e9c284; font-family: 'Niconne', cursive; font-size: 42px; font-weight: 400; background: transparent url(/images/site/header_leaves.png) no-repeat; background-position: 156px 10px; background-size: 54px 50px; width: 210px; line-height: 42px; position: absolute; top: 5px; left: 0; margin: 0; text-shadow: 0 5px 5px rgba(0,0,0,0.2);}
#Top h1 a {background-image: -webkit-linear-gradient(top, #ffdb7e 0%, #e9c284 100%);
background-image: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: block;}

.PageContainer a:link, .PageContainer a:visited {color: #996633;}
.PageContainer a:hover {color: #c4884c;}
.PageContainer p img {max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 7px rgba(0,0,0,0.3);}

.RoomPhoto {width: 49%; height: auto;}
.RoomPhoto:first-child {margin-right: 1%;}
.RoomPhoto:last-child {margin-left: 1%;}

.RoomPhotoWide {width: 100%; height: auto;}

.RoomPhotoQuarter {width: 23.5%; height: auto;}
.RoomPhotoQuarter:nth-child(2) {margin-left: 2%; margin-right: 1%;}
.RoomPhotoQuarter:nth-child(3) {margin-left: 1%; margin-right: 2%;}

.RoomBook {display: inline-block; padding: 0.25em 0.65em; margin: 0.25em 0.25em 0.25em 0; border: 1px solid #d9b38c; border-radius: 0.25em; background-color: #b96932; color: #fff !important; text-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);}
.RoomBook:hover {background-color: #932102;}

.RoomBookList {list-style: none; margin: 0; padding: 0 0 0 1em;}
.RoomBookList li {padding-bottom: 0.5em;}

.FreeWiFi {width: 80px !important; height: 80px !important; position: absolute; right: 0; top: 0; box-shadow: none !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;}

.ContentContainer {margin: 0 7.5%; position: relative; line-height: 135%;}
.ContentContainer h1, h2 {font-weight: 400; font-family: 'Niconne', cursive; font-weight: 400;}
.ContentContainer h1 {font-size: 1.75em; text-align: center; line-height: 100%;}
.ContentContainer h2 {font-size: 1.375em;}
.ContentContainer h3 {font-weight: 700; font-size: 1em; line-height: 100%;}

.ContentContainer p {font-family: "Helvetica Neue", Arial, sans-serif;}
.ContentContainer ul {padding-left: 1.25em;}
.ContentContainer li {padding-bottom: 0.25em; padding-top: 0.25em;}

#FooterTag {color: #b96932; font-family: 'Niconne', cursive; font-size: 26px; background: transparent url(/images/site/flying_leaves.jpg) no-repeat; background-position: center; background-size: contain; max-width: 100%; width: 952px; height: 176px; margin: 0 auto; position: relative;}
#FooterTag span {display: block; text-align: right; left: 30%; right: 10px; position: absolute; top: 37%; text-shadow: 0 0 4px #faf4ec, 0 0 4px #faf4ec;}
#Footer {font-size: 12px; text-align: center; padding: 18px 0 10px 0; background: #362f37; color: #bdbdbd;}
#Footer p {margin-top: 0;}
#Footer a:link, #Footer a:visited {color: #c89159;}
#Footer a:hover {color: #d9b38c;}
#Footer span {color: #b96932; padding: 0 5px;}

#FooterToTop {text-align: center; display: none; border-top: 2px dotted #e9c284;}
#FooterToTop a {padding: 1em; display: inline-block;}

#Menu ul {margin: 0; padding: 0; text-align: center;}
#Menu li {display: inline-block;}
#Menu a {padding: 4px 10px; border-bottom: 2px solid rgba(0,0,0,0); transition: 0.5s ease-out;}
#Menu a:hover {transition: 0.1s ease-out;}

#Menu li:nth-child(6) a:link, #Menu li:nth-child(6) a:visited {color: #fffbe7;}
#Menu li:nth-child(6) a {border-radius: 4px; text-shadow: 0 1px 1px rgba(0,0,0,0.3); padding: 2px 9px 4px 9px; border: 1px solid #29d; background: #147194;
background: -moz-linear-gradient(top,  #40bbbf 0%, #147194 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#40bbbf), color-stop(100%,#147194));
background: -webkit-linear-gradient(top,  #40bbbf 0%,#147194 100%);
background: -o-linear-gradient(top,  #40bbbf 0%,#147194 100%);
background: -ms-linear-gradient(top,  #40bbbf 0%,#147194 100%);
background: linear-gradient(to bottom,  #40bbbf 0%,#147194 100%);
}
#Menu li:nth-child(6) a:hover {background: #149294; box-shadow: 0 1px 2px rgba(0,0,0,0.2); color: #fff; border: 1px solid #33bfdd;
background: -moz-linear-gradient(top,  #40bfa3 0%, #149294 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#40bfa3), color-stop(100%,#149294));
background: -webkit-linear-gradient(top,  #40bfa3 0%,#149294 100%);
background: -o-linear-gradient(top,  #40bfa3 0%,#149294 100%);
background: -ms-linear-gradient(top,  #40bfa3 0%,#149294 100%);
background: linear-gradient(to bottom,  #40bfa3 0%,#149294 100%);
}
#Menu li:nth-child(6) {padding-left: 6px;}

#Menu {position: absolute; bottom: 20px; right: 0;}
#HeaderExtrasPhone {position: absolute; color: #faf4ec; font-weight: 700; right: 336px; top: 19px; font-size: 16px; text-align: right;}
#HeaderExtrasAddress {position: absolute; color: #faf4ec; right: 0; top: 10px; font-size: 13px; text-align: right; width: 145px;}
#HeaderExtrasPhone a:link, #HeaderExtrasAddress a:visited, #HeaderExtrasAddress a:link, #HeaderExtrasAddress a:visited {color: #f1e3cc;}
#HeaderExtrasFacebook {height: 36px; position: absolute; right: 176px; top: 11px;}
#HeaderExtrasFacebook img {display: inline-block; height: 100%; border-radius: 4px;}

#ContactForm {width: 400px; margin: 0 auto 1em auto;}
#ContactForm label {display: block; position: relative; padding: 0 0 0.4em 0;}
#ContactForm label span {display: block; position: absolute; left: -1em; color: #880000;}
#ContactSubmit {text-align: right;}
#ContactForm input {padding: 0.5em;}
#ContactForm textarea {padding: 0.5em; box-sizing: border-box; width: 100%;}
.ContactItem {padding: 0 0 0.6em 0;}

/* TripAdvisor */
.TA_cdsscrollingravenarrow > div, .TA_cdsscrollingravewide > div {margin: auto !important;}
.TA_cdsscrollingravewide #CDSSCROLLINGRAVE {width: 100% !important;}
.TA_cdsscrollingravewide {padding-right: 14px;}

/* Banner slider */

#BannerContainer {height: 40vw; min-height: 300px; max-height: 380px; position: relative;}

#BannerSliderContainerTitle {position: absolute; bottom: 0; left: 0; right: 0; top: 50%; background: transparent url(/images/site/title_bg.png) no-repeat center bottom / 498px 84px; z-index: 2000; pointer-events: none;}
.NoTitle {background-image: url(/images/site/quiet_and_comfy.png) !important;}
#BannerSliderContainerTitle h1 {color: #fff; font-family: 'Niconne', cursive; font-size: 2em; font-weight: 400; text-align: center; margin: 0; position: absolute; bottom: 0.5em; left: 0; right: 0; pointer-events: auto;}

#BannerSliderContainer, .BannerSlider {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
#BannerSliderContainer {z-index: 1;}
.BannerSlider {background-color: #3c4048; background-repeat: no-repeat; background-size: cover; background-position: 65% 42%;}
.BannerSlider a {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.BannerSlider p {color: #fff; font-size: 1.5em; left: 17%; position: absolute; text-align: center; text-shadow: 0 4px 9px rgba(0, 0, 0, 0.6); top: 32%; text-indent: -0.5em;}

.Inner {padding: 0 4%;}

#BannerFloatOuter {position: absolute; left: 0; right: 0; z-index: 3000; pointer-events: none; top: 0;}
#BannerFloatInner {position: relative; width: 100%; max-width: 980px; margin: auto;}
#BannerFloat {margin-left: auto; margin-top: 1em; width: 26%; box-sizing: border-box; padding: 0.7em 0.75em 0.55em 0.75em; border-radius: 0.55em; background-color: rgba(255,255,255,0.9); box-shadow: 0 0.25em 1em rgba(0,0,0,0.5); pointer-events: auto;
	border-width: 1px solid #ddd;
}
#BannerFloatBookNow {border-radius: 0.35em; text-shadow: 0 0.075em 0.01em rgba(0, 0, 0, 0.2); padding: 0.4em 0 0.45em 0; font-size: 1.25em; border: 1px solid #29d; background: #147194; display: block; text-align: center; line-height: 100%;
background: -moz-linear-gradient(top,  #40bbbf 0%, #147194 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#40bbbf), color-stop(100%,#147194));
background: -webkit-linear-gradient(top,  #40bbbf 0%,#147194 100%);
background: -o-linear-gradient(top,  #40bbbf 0%,#147194 100%);
background: -ms-linear-gradient(top,  #40bbbf 0%,#147194 100%);
background: linear-gradient(to bottom,  #40bbbf 0%,#147194 100%);
-webkit-animation: BannerPulse 2.6s linear infinite; -moz-animation: BannerPulse 2.6s linear infinite; animation: BannerPulse 2.6s linear infinite;
}
#BannerFloatBookNow:link, #BannerFloatBookNow:visited {color: #fffbe7;}
#BannerFloatBookNow:hover {background: #149294; box-shadow: 0 0 0.5em rgba(100, 230, 250, 0.8); color: #fff;
background: -moz-linear-gradient(top,  #40bfa3 0%, #149294 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#40bfa3), color-stop(100%,#149294));
background: -webkit-linear-gradient(top,  #40bfa3 0%,#149294 100%);
background: -o-linear-gradient(top,  #40bfa3 0%,#149294 100%);
background: -ms-linear-gradient(top,  #40bfa3 0%,#149294 100%);
background: linear-gradient(to bottom,  #40bfa3 0%,#149294 100%);
}
#BannerFloatBookNow span::before {
    content: "";
    display: inline-block;
    height: 1em;
    margin-right: 0.25em;
    width: 1em;
    background: transparent url(/images/site/icons_v4.svg) no-repeat 62.5% / 900% 100%;
    vertical-align: top;
}
#BannerFloatLogo {
	margin-top: 0.35em;
    padding-top: 45%;
    position: relative;
    background: transparent url(/images/site/icons_v4.svg) no-repeat center / 2025% 225%;
}
#BannerFloatLogo span {
    color: transparent;
    font-size: 0.5em;
    position: absolute;
    top: 50%;
    left: 0; right: 0; text-align: center; margin-top: -0.25em;
}
#BannerFloatPhone {color: #3e425d; text-align: center; margin-bottom: 0.6em; font-weight: bold; font-size: 1.3em;}
#BannerFloatPhone a:link, #BannerFloatPhone a:visited {color: #dba628;}
#BannerFloatPhone a:hover {color: #e7b440;}

/* Featured */

.FeatureHolder {display: flex; flex-wrap: wrap;}
.Feature {width: 25%; flex-grow: 1; text-align: center; line-height: 1.625em; padding-top: 0.4em;}
.Feature p {margin-top: 0.4em; margin-bottom: 0.4em;}
.Feature h3 {color: #b96932; margin-top: 0.75em; margin-bottom: 0.4em;}
.Feature h3 a:link, .Feature h3 a:visited, .Feature h3 a:active {color: #b96932 !important;}
.Feature h3 a:hover {color: #e46f21 !important;}

.ColumnHolder {display: flex;}
.Column {flex-basis: 50%; flex-grow: 1; flex-shrink: 1;}
.Column {padding: 0 0.25em;}
.Column:first-child {padding-left: 0;}
.Column:last-child {padding-left: 0;}

/* Featured images */

.FeatureImage {width: 18vw; height: 18vw; display: inline-block; border-radius: 9vw; max-height: 11em; max-width: 11em; box-shadow: 0 0.5em 1em rgba(0,0,0,0.2); background-repeat: no-repeat; background-size: 900% 100%, 100% 400%;}
.FIWiFi {background-color: #a84781; background-position-x: 0%, center; background-position-y: center;
	background-image: url(/images/site/icons_v4.svg), linear-gradient(45deg, #d10bbd, #ce041b);
	-webkit-animation: FeaturePulse 5s ease infinite; -moz-animation: FeaturePulse 5s ease infinite; animation: FeaturePulse 5s ease infinite;
}
.FI5Day {background-color: #4c9682; background-position-x: 12.5%, center; background-position-y: center;
	background-image: url(/images/site/icons_v4.svg), linear-gradient(45deg, #179aae, #05b468);
	-webkit-animation: FeaturePulse 4s ease infinite; -moz-animation: FeaturePulse 4s ease infinite; animation: FeaturePulse 4s ease infinite;
}
.FICorporate {background-color: #ff7b00; background-position-x: 25%, center; background-position-y: center;
	background-image: url(/images/site/icons_v4.svg), linear-gradient(45deg, #ff5200, #ffb300);
	-webkit-animation: FeaturePulse 4.5s ease infinite; -moz-animation: FeaturePulse 4.5s ease infinite; animation: FeaturePulse 4.5s ease infinite;
}
.FISleep {background-color: #5e1ab3; background-position-x: 37.5%, center; background-position-y: center;
	background-image: url(/images/site/icons_v4.svg), linear-gradient(45deg, #721bb3, #0592c5);
	-webkit-animation: FeaturePulse 5.5s ease infinite; -moz-animation: FeaturePulse 5.5s ease infinite; animation: FeaturePulse 5.5s ease infinite;
}

@-webkit-keyframes FeaturePulse { 
	0%{background-position-y: 50%, 0%;}
	50%{background-position-y: 50%, 100%;}
	100%{background-position-y: 50%, 0%;}
}
@-moz-keyframes FeaturePulse {
	0%{background-position-y: 50%, 0%;}
	50%{background-position-y: 50%, 100%;}
	100%{background-position-y: 50%, 0%;}
}
@keyframes FeaturePulse { 
	0%{background-position-y: 50%, 0%;}
	50%{background-position-y: 50%, 100%;}
	100%{background-position-y: 50%, 0%;}
}

@-webkit-keyframes BannerPulse { 
	0%{border-color: #29d;}
	25%{border-color: #5ddeff;}
	50%{border-color: #29d;}
	75%{border-color: #5ee5ff;}
	100%{border-color: #29d;}
}
@-moz-keyframes BannerPulse { 
	0%{border-color: #29d;}
	25%{border-color: #5ddeff;}
	50%{border-color: #29d;}
	75%{border-color: #5ee5ff;}
	100%{border-color: #29d;}
}
@keyframes BannerPulse { 
	0%{border-color: #29d;}
	25%{border-color: #5ddeff;}
	50%{border-color: #29d;}
	75%{border-color: #5ee5ff;}
	100%{border-color: #29d;}
}


/* Responsive */

@media screen and (max-width: 900px) {
	#BannerFloatPhone {font-size: 1.15em;}
	#BannerFloatBookNow {font-size: 1.05em;}
	.ContentContainer {margin: 0 4%;}
}

@media screen and (max-width: 890px) and (min-width: 798px) {
	#Menu {font-size: 15px;}
	#Menu a {padding: 4px 6px;}
}

@media screen and (max-width: 797px) and (min-width: 641px) {
	#Top {height: 140px;}
	#HeaderContent {height: 140px;}
	#HeaderExtrasAddress {font-size: 14px; top: 30px;}
	#HeaderExtrasPhone {right: 176px; top: 13px; font-size: 17.8px;}
	#HeaderExtrasFacebook {top: 44px; height: 38px;}
	#Menu {left: 0;}

	#BannerFloat {width: 30%;}
}

@media screen and (max-width: 687px) and (min-width: 641px) {
	#Menu {font-size: 14px;}
}

@media screen and (max-width: 640px) {
	#Top {height: 240px;}
	#HeaderContent {height: 240px;}
	body {font-size: 20px; line-height: 130%;}
	.ContentContainer h1 {margin: 12px 0;}
	.ContentContainer h2 {margin: 12px 0; text-align: center;}
	#FooterTag {font-size: 36px; line-height: 110%; border-top: 2px dotted #e9c284; height: 120px;}
	#FooterTag span {top: 15%;}
	#Menu li {padding-top: 10px;}
	#Footer {font-size: 17px;}

	#Top h1 {font-size: 52px; line-height: 52px; right: 0; width: auto; margin: 0; text-align: center; top: 12px; background-position: 95% 0;}
	#HeaderExtrasPhone {right: 50%; left: 0; top: 75px; font-size: inherit;}
	#HeaderExtrasFacebook {right: 0; left: 54%; top: 70px;}
	#HeaderExtrasAddress {right: 0; left: 0; top: 110px; text-align: center; font-size: inherit; width: auto;}
	#Menu {right: 0; left: 0;}

	#ContactForm {width: 90%;}

	#FooterToTop {display: block;}

	.Feature {width: 50%; padding-bottom: 0.4em;}
	.FeatureImage {width: 36vw; height: 36vw; border-radius: 18vw; max-height: 16em; max-width: 16em;}

	.ColumnHolder {flex-wrap: wrap;}
	.Column {flex-basis: 100%; padding: 0;}
	.Column ul {margin: 0;}

	#BannerFloatPhone {font-size: 1.1em;}
	#BannerFloatInner {font-size: 3vw;}
	#BannerFloatBookNow {font-size: 1em;}
	#BannerFloat {width: 35vw;}
}

@media screen and (max-width: 480px) {
	#Top h1 {font-size: 44px; top: 8px;}
	#Top {height: 210px;}
	#HeaderContent {height: 210px;}
	#HeaderExtrasPhone {top: 63px; right: 47%;}
	#HeaderExtrasAddress {top: 90px; font-size: 18px;}
	#HeaderExtrasFacebook {height: 29px; top: 62px; left: 58%;}

	.RoomPhoto {width: 100%; height: auto;}
	.RoomPhoto:first-child {margin-right: 0;}
	.RoomPhoto:last-child {margin-left: 0;}

	.RoomPhotoQuarter {width: 49%;}
	.RoomPhotoQuarter:nth-child(2) {margin-left: 2%; margin-right: 0;}
	.RoomPhotoQuarter:nth-child(3) {margin-left: 0; margin-right: 2%;}

	#BannerSliderContainerTitle {background-size: 320px auto;}

	#BannerFloatInner {font-size: 3.5vw;}
	#BannerFloat {width: 40vw;}
}

@media screen and (max-width: 450px) and (min-width: 421px){
	#Menu a {font-size: 18px;}
}

@media screen and (max-width: 420px) {
	body {font-size: 16px;}
	#Top h1 {font-size: 31px; line-height: 31px; background-size: 27px 25px; background-position: 95% 0; top: 10px;}
	#FooterTag {font-size: 28px; height: 90px;}
	#FooterTag span {top: 15%;}
	#Footer {font-size: 12px;}

	#Top {height: 160px;}
	#HeaderContent {height: 160px;}
	#HeaderExtrasPhone {top: 54px; font-size: 17px; right: 48.5%;}
	#HeaderExtrasAddress {top: 80px; font-size: 15px;}
	#HeaderExtrasFacebook {top: 49px; left: 56%;}

	#Menu {bottom: 12px; font-size: 13px; font-weight: 700; line-height: 120%;}
	#Menu a {padding: 3px 9px}

	#BannerContainer {min-height: 220px;}
}

@media screen and (max-width: 320px) {
	#Top h1 {background-position: 98% 0;}
	#FooterTag {font-size: 20px;}
	#FooterTag span {top: 25%;}
	#HeaderExtrasAddress {top: 80px; font-size: 14px;}
}