/*	reset	*/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {margin: 0; padding: 0; border: 0; vertical-align: baseline; outline: 0}


/*   basis   */
:root {font-size: 16px}
html, body { font-family: 'Poppins', Helvetica,Arial,sans-serif; letter-spacing: 0.3px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust:100%; line-height: 24px; background: #344032}


h1, h2, h3, h4, h5{font-family: 'IBM Plex Serif', serif; }
h1 {font-size: 24px; line-height: 34px; font-weight: normal; font-style: italic; text-align: center; letter-spacing: 0.6px;}
h2 {font-size: 30px; line-height: 36px; font-weight: normal; font-style: italic; letter-spacing: 0.6px;}
h3 {font-size: 22px; line-height: 30px; font-weight: normal; letter-spacing: 0.2px;}
h4 {font-size: 15px; line-height: 24px; letter-spacing: 0.2px;}
h5 {font-size: 17px; line-height: 24px; font-weight: normal; letter-spacing: 0.2px;}
h6 {font-size: 12px; line-height: 18px; font-weight: normal; letter-spacing: 0.2px;}
p {margin-bottom: 1em}
blockquote { margin: 0 0 10px 0; padding: 10px 20px; border-left: 5px solid #E2E2E2; font-size: 18px; line-height:22px}
.center{text-align: center} .right{text-align: right} .bold, .strong{font-weight: bold}
label{font-size: 14px; font-weight: bold; display: inline-block; color: #000;}
.breakline{ border-top: 1px solid #D6D0CE; height: 0}
/*   btn & links   */
a{text-decoration: none; color: #000; }

@media (min-width: 1024px) {}
@media (min-width: 1281px) {}


.btn{font-size: 14px; font-weight: bold; display: inline-block; color: #000; text-decoration: none; border-radius: 1px;  height: 50px; line-height: 49px; background: none; border: 2px solid #000; border-radius: 2px ;  width: 94%; max-width: 280px; margin: auto; text-align: center; display: block}
.btn:hover{ color: #fff; background: #000; }
.btn.red{background: #CD6865; border-color: #CD6865; color: #fff}
.btn.red:hover{background: #a93331; border-color: #a93331;}


/* form   */
input.btn{line-height: 44px}
div#ajaxresponse { margin-bottom: 10px; min-height: 15px; }
span#error { color: #CF5A5A; }
span#success { color: #6D8F1A; }
form #websites{ display:none; }
label{width: 100%; display: inline-block}

[type=date], input[type=email], input[type=number], input[type=tel], input[type=text], textarea {--input-border-width: 1px; --input-border-color: #e3e5e8; --input-border-radius: 0.2rem; --input-background-color: #fff; --input-text-color: #17191c; --input-placeholder-color: #5c6370; --input-hover-border-color: #e3e5e8; --input-hover-background-color: #fff; --input-hover-text-color: #17191c; --input-focus-border-color: #e3e5e8; --input-focus-background-color: #fff; --input-focus-text-color: #17191c; --input-invalid-border-color: #fa3d56; --input-valid-border-color: #21d492; box-shadow: none; outline: none; -moz-appearance: none; -webkit-appearance: none; margin: 0; border: 1px solid #e3e5e8; border-radius: 1px; background-color: #fff; font-family: inherit; font-size: inherit; font-weight: normal; line-height: inherit; color: #17191c; transition: border-color 0.1s ease-out, color 0.1s ease-out; display: block; width: 100%; height: auto; padding: 0 10px; }

[type=date], input[type=email], input[type=number], input[type=tel], input[type=text]{	height: 3rem; }

textarea{padding: 10px}

input:focus, textarea:focus {border-color: #e3e5e8; background-color: #fff; outline: #b3d9ff solid 0.2rem; color: #17191c; }

select {--input-border-width: 1px; --input-border-color: #e3e5e8; --input-border-radius: 0.2rem; --input-background-color: #fff; --input-text-color: #17191c; --input-placeholder-color: #5c6370; --input-hover-border-color: #e3e5e8; --input-hover-background-color: #fff; --input-hover-text-color: #17191c; --input-focus-border-color: #e3e5e8; --input-focus-background-color: #fff; --input-focus-text-color: #17191c; --input-invalid-border-color: #fa3d56; --input-valid-border-color: #21d492; box-shadow: none; outline: none; -moz-appearance: none; -webkit-appearance: none; margin: 0; border: 1px solid #e3e5e8; border-radius: 1px; background-color: #fff; font-family: inherit; font-size: inherit; font-weight: normal; line-height: inherit; color: #17191c; transition: border-color 0.1s ease-out, color 0.1s ease-out; display: block; width: 100%; height: 3rem; padding:0 10px; 
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='16' viewBox='0 0 30 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 16L0 0h30z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem; 
}

optgroup {margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }



/*  header  */
#background{display: none}
.showheader #background{position: fixed; top:0; z-index: -1; width: 100%; height: 50vh; background-size: cover; border-bottom: #b0a889 solid 10vh; display: block}
#movetop{margin-top: 50vh; padding-top: 6vw; color: #fff}
#movetop:before{background: -webkit-linear-gradient(#C5908C 0%, #C58884 100%);}
#top{position: absolute;width: 80%;left:10%;top: -16vw; text-align: center; }
#top img{ max-width: 80vw;	width: Calc(30vh + 30vw); max-width: 100%;}
h3.title {font-family: 'Playfair Display', serif; font-style: italic; text-transform: uppercase; font-size: 28px;  font-size: 9vw; line-height: 0.7em; font-optical-sizing: 1px; letter-spacing: 0.03em; text-shadow: 0 5px 17px rgba(0, 0, 0, 0.1), 0 10px 80px rgba(0, 0, 0, 0.05)}
h3.title b{font-size: 1.15em;}
h3.title span{font-size: 0.5em;position: relative;display: inline-block;right: -2%;bottom: 1vw;font-family: 'IBM Plex Serif', serif;font-weight: bold}

@media (max-width: 1023px) {#top{top: Calc(-13vh + -10vw);}#intro h1{text-align: center}h3.title {font-size: 10.5vw;}#intro{ order: -1;}}
@media (min-width: 1024px) {.showheader #background{height: 75vh; }#movetop{margin-top: 72vh;}}

#intro{padding: 2.5vw; color: #000}
/* photos */
#photos p{font-size: 14px; line-height: 22px}

/* weddings */
#weddings:before{background:#FFF1F1}

/* facilitate */
#facilitate li{line-height: 28px;padding: 6px 0 6px 50px;
list-style: none;
position: relative;}
#facilitate li:before{content: '';
background: no-repeat url('../assets/sprite.svg');
width: 50px;
height: 50px;
position: absolute; left: 0;
top: 6px;
background-position-x: 60px;
}
li#f11:before{background-position-x: -1426px;}
li#f12:before{background-position-x: -1376px;}
li#f13:before{background-position-x: -1320px;}
li#f14:before{background-position-x: -1264px;}
li#f15:before{background-position-x: -1208px;}
li#f16:before{background-position-x: -1157px;}
li#f17:before{background-position-x: -1108px;}

li#f21:before{background-position-x: -1058px;}
li#f22:before{background-position-x: -1010px;}
li#f23:before{background-position-x: -1010px;}
li#f24:before{background-position-x: -1010px;}


li#f31:before{background-position-x: -812px;}
li#f32:before{background-position-x: -715px;}
li#f33:before{background-position-x: -715px;}
li#f34:before{background-position-x: -666px;}
li#f35:before{background-position-x: -615px;}
li#f36:before{background-position-x: -559px;}
li#f37:before{background-position-x: -511px;}
li#f38:before{background-position-x: -464px;}
li#f39:before{background-position-x: -418px;}
li#f30:before{background-position-x: -373px;}

li#f41:before{background-position-x: -321px;}
li#f42:before{background-position-x: -270px;}
li#f43:before{background-position-x: -213px;}
li#f44:before{background-position-x: -156px;}
li#f45:before{background-position-x: -98px;}
li#f46:before{background-position-x: -49px;}
li#f47:before{background-position-x: 2px;}

/* floorplan */
--#floorplan{padding: 2em}
#floorplan:before{background: #E8ECEF;}
#floorplan img{max-height: 50vh; max-width: 100%}




/* calendar  */
#calendar{overflow: hidden; position: relative;white-space: nowrap;}
#calendar .container{white-space: nowrap; overflow: hidden; }
.calendar{margin-top: 20px; position: relative;z-index: 1; width: 50%; display: inline-block;}
.calendar table{margin-top: 20px; width: 94%;border: 1px solid rgba(32, 37, 44, 0.08);border-top: none;border-left: none;}
.calendar td span{ min-height: 44px; display: block;     text-align: center;     line-height: 52px;     font-size: 15px;     margin: 4px 0;     font-weight: bold}
.calendar th{color: #333; font-size: 14px; line-height: 24px; height: 32px; font-weight: normal}
.calendar td{width: 14.28%;position: relative;border: 1px solid rgba(32, 37, 44, 0.08);border-bottom: none;border-right: none;}
.calendar td.occupied:after{content: ""; background: #e2e7eb; height: 50px; position: absolute; bottom: 5px; width: 100%; z-index: -3;}
.calendar td.occupied{color: #888}
.calendar td.occu-first{color: #000;}

.calendar td.select, .calendar td.select1, .calendar td.select2{color: #fff; }
.calendar td.select:before{content: ""; background: #679D87; height: 50px; position: absolute; bottom: 5px; width: 106%; z-index: -4;  }


.calendar td.occu-first:after{content: "";position: absolute; bottom: 5px; width: 100%;border-top: 50px solid transparent;border-bottom: 0;border-right: 40px solid #e2e7eb; height: 0; right: 0;  z-index: -5; background: none}
.calendar td.occu-end:after{content: ""; position: absolute; bottom: 5px; border-bottom: 50px solid transparent;border-top: 0;border-left: 40px solid #e2e7eb;  height: 0 ; z-index: -5; background: none}
.occupied ~ .occu-first{color: #888 !important }
td.occupied ~ td.occu-first:after{background: #e2e7eb; height: 50px; border: none }

.calendar td.select1:before, .calendar td.select2:before{content: ""; background: #679D87; height: 50px; position: absolute; bottom: 5px; width: 106%; z-index: -4; }
.calendar h3{ font-family: Helvetica,Arial,sans-serif; font-size: 18px; font-weight: normal; text-align: center; width: 94%; padding:  1.5em 0 0}
#prevMonth, #nextMonth{cursor: pointer;}
-#prevMonth{padding-left: 5%;top: 2.5em;height: 52px;width: 40px; z-index: 2; cursor: pointer;font-size: 1.5em;}

#input{background: #e2e7eb; padding: 2em}

@media (max-width: 767px) {
	#calWrapper { padding: 0;}
	.calendar table{margin-left: 6%}
	#calendar .container{ overflow-x: scroll;}
	.calendar {display: inline-block;min-width: 289px;}
	#input{padding: 5%}
}




/*   margins   */
.m0 { margin:0 }
.mtb05 { margin-top: .5em; margin-bottom:.5em }
.mtb1 { margin-top: 1em; margin-bottom:1em }
.mtb2 { margin-top: 2em; margin-bottom:2em }
.mtb3 { margin-top: 3em; margin-bottom:3em }
.mt05 { margin-top:.5em }
.mt1 { margin-top:1em }
.mt15 { margin-top:1.5em }
.mt2 { margin-top:2em }
.mt3 { margin-top:3em }
.mb05 { margin-bottom:.5em }
.mb15 { margin-bottom:1.5em }
.mb1 { margin-bottom:1em}
.mb2 { margin-bottom:2em }
.mb3 { margin-bottom:3em }
.mtvh2{ margin-top: 2.25vh}
.mtvh4{ margin-top: 4.5vh}
.mbvh2{ margin-bottom: 2.25vh}
.mbvh4{ margin-bottom: 4.5vh}

/*   grid   */
.c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12, .c13, .c14, .c15, .c16, .c17, .c18, .c19, .c20, .c21, .c22, .c23, .c24
.p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9, .p10, .p11, .p12, .p13, .p14, .p15, .p16, .p17, .p18, .p19, .p20, .p21, .p22, .p23, .p24
.t1, .t2, .t3, .t4, .t5, .t6, .t7, .t8, .t9, .t10, .t11, .t12, .t13, .t14, .t15, .t16, .t17, .t18, .t19, .t20, .t21, .t22, .t23, .t24
.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9, .d10, .d11, .d12, .d13, .d14, .d15, .d16, .d17, .d18, .d19, .d20, .d21, .d22, .d23, .d24
.e1, .e2, .e3, .e4, .e5, .e6, .e7, .e8, .e9, .e10, .e11, .e12, .e13, .e14, .e15, .e16, .e17, .e18, .e19, .e20, .e21, .e22, .e23, .e24
{display: inline-block; }

wrapper{padding: 2.5vw 5vw 7.5vw; display: grid; grid-gap: 12px; grid-template-columns: repeat(24, 1fr); grid-template-rows: auto;  position: relative; z-index: 1}.r1{grid-row: span 2} .r2{grid-row: span 2} .r3{grid-row: span 3} .r4{grid-row: span 4; }
.wrap{ display: grid; grid-gap: 12px; }
.fw{width: 100%}

.c1{grid-column: span 1} .c2{grid-column: span 2} .c3{grid-column: span 3} .c4{grid-column: span 4} .c5{grid-column: span 5} .c6{grid-column: span 6} .c7{grid-column: span 7} .c8{grid-column: span 8} .c9{grid-column: span 9} .c10{grid-column: span 10} .c11{grid-column: span 11} .c12{grid-column: span 12} .c13{grid-column: span 13} .c14{grid-column: span 14} .c15{grid-column: span 15} .c16{grid-column: span 16} .c17{grid-column: span 17} .c18{grid-column: span 18} .c19{grid-column: span 19} .c20{grid-column: span 20} .c21{grid-column: span 21} .c22{grid-column: span 22} .c23{grid-column: span 23} .c24{grid-column: span 24} 

#floorplan{padding: 2.5vw 2vw 7.5vw ;}


/*   grid tablet  */
@media (min-width: 768px) { 
wrapper{padding: 2.5vw 4vw 7.5vw ; display: grid; grid-gap: 14px;}
#floorplan{padding: 2.5vw 2.5vw 7.5vw ;}

.t1{grid-column: span 1} .t2{grid-column: span 2} .t3{grid-column: span 3} .t4{grid-column: span 4} .t5{grid-column: span 5} .t6{grid-column: span 6} .t7{grid-column: span 7} .t8{grid-column: span 8} .t9{grid-column: span 9} .t10{grid-column: span 10} .t11{grid-column: span 11} .t12{grid-column: span 12}.t13{grid-column: span 13} .t14{grid-column: span 14} .t15{grid-column: span 15} .t16{grid-column: span 16} .t17{grid-column: span 17}.t18{grid-column: span 18} .t19{grid-column: span 19} .t20{grid-column: span 20} .t21{grid-column: span 21} .t22{grid-column: span 22} .t23{grid-column: span 23} .t24{grid-column: span 24} 

.tr1{grid-row: span 1} .tr2{grid-row: span 2} .tr3{grid-row: span 3} .tr4{grid-row: span 4}
.t2c{column-count: 2}
.t18-4{grid-column: 4 / span 18;}
}

/*  grid desktop  */
@media (min-width: 1024px) {
wrapper{padding: 2.5vw 8vw 7.5vw ; }
#floorplan{padding: 2.5vw 4.5vw 7.5vw ;}

.d1{grid-column: span 1} .d2{grid-column: span 2} .d3{grid-column: span 3} .d4{grid-column: span 4} .d5{grid-column: span 5} .d6{grid-column: span 6} .d7{grid-column: span 7} .d8{grid-column: span 8} .d9{grid-column: span 9} .d10{grid-column: span 10} .d11{grid-column: span 11} .d12{grid-column: span 12} .d13{grid-column: span 13} .d14{grid-column: span 14} .d15{grid-column: span 15} .d16{grid-column: span 16} .d17{grid-column: span 17} .d18{grid-column: span 18} .d19{grid-column: span 19} .d20{grid-column: span 20} .d21{grid-column: span 21} .d22{grid-column: span 22} .d23{grid-column: span 23} .d24{grid-column: span 24} 

.dr1{grid-row: span 1} .dr2{grid-row: span 2} .dr3{grid-row: span 3} .dr4{grid-row: span 4}

.d10-3{grid-column: 3 / span 10;}
}

/*   grid extended  */
@media (min-width: 1281px) { 
wrapper{padding: 2.5vw 12vw 7.5vw ; }
#floorplan{padding: 2.5vw 10vw 7.5vw ;}

.e1{grid-column: span 1} .e2{grid-column: span 2} .e3{grid-column: span 3} .e4{grid-column: span 4} .e5{grid-column: span 5} .e6{grid-column: span 6} .e7{grid-column: span 7} .e8{grid-column: span 8} .e9{grid-column: span 9} .e10{grid-column: span 10} .e11{grid-column: span 11} .e12{grid-column: span 12} .e13{grid-column: span 13} .e14{grid-column: span 14} .e15{grid-column: span 15} .e16{grid-column: span 16} .e17{grid-column: span 17} .e18{grid-column: span 18} .e19{grid-column: span 19} .e20{grid-column: span 20} .e21{grid-column: span 21} .e22{grid-column: span 22} .e23{grid-column: span 23} .e24{grid-column: span 24} 

.er1{grid-row: span 1} .er2{grid-row: span 2} .er3{grid-row: span 3} .er4{grid-row: span 4}
}

wrapper:before{content: '';
position: absolute;
height: 106%;
width: 100%;
z-index: -1;
transform: skew(0, -3.5deg);margin-top: -4vw;
 background: -webkit-linear-gradient(#fff 0%, #fff 100%);
}

-wrapper#photos:before{background: -webkit-linear-gradient(#8C9689 0%, #E1E0E2 100%);}

.hidden{display: none}

#moreinfo{padding-bottom: 0}