<style type="text/css">
html {height:fit-content}
body {margin:0;padding:0;height:100%;overflow-x:hidden;overflow-y:scroll;font-family:"Nunito",sans-serif;font-optical-sizing:auto;font-style:normal;color:#2A4F1F;font-size:calc(16px + 0.1vw)}
form {padding:0;margin:0}
input[type=text],input[type=submit],button,input[type=button] {-webkit-appearance:none;border-radius:0}
select {border-radius:0}

/* mobile nav */
.mob_nav {position:fixed;z-index:10;top:0;left:0;width:min(100%,600px);height:100vh;background-color:#3E6F2F;transition:0.3s}
.mob_nav.mn_closed {left:-100%;pointer-events:none}
	.close_mn {position:absolute;z-index:2;top:0;right:0;color:#ffffff;text-decoration:none;font-size:20px;line-height:1;padding:15px;outline:none}
	.mn_logo {height:50px;padding:15px}
		.mn_logo img {max-width:100%;height:100%;display:block}
	.mn_pnl {height:calc(100vh - 100px);margin:0 15px;overflow:auto}
		.mn_n1 a {display:block;border-top:solid 1px #B4CC98;padding:10px;color:#ffffff;text-decoration:none}

/* nav */
.nav {justify-content:center;align-items:center;background-color:#B4CC98;border-bottom:solid 3px #ffffff}
	.nav > a {padding:max(1vh,7px) max(1vw,10px);color:#2A4F1F;text-decoration:none}

/* hdr */
.hdr {position:relative;border-bottom:solid 3vh #ffffff}
	.hdr_bg {position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000;background-image:url("images/hdr_bg.jpg");background-repeat:repeat-x;background-size:auto 100%}
	.hdr_floral {position:absolute;bottom:0;left:0;height:100%;display:flex;align-items:flex-end}
		.hdr_floral > div {display:flex;align-items:flex-end;height:calc(100% - 5vh);margin:5vh 0 0}
			.hdr_floral img {max-height:100%;display:block}
	.hdr_logo, .hdr_cart {position:absolute;top:3vh}
		.hdr_logo img, .hdr_cart img {max-height:100%;display:block}
	.hdr_cart_bbl {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
		.hdr_cart_bbl span {position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:calc(10px + 2vmin);height:calc(10px + 2vmin);border-radius:50%;background-color:#3E6F2F;color:#ffffff;font-size:11px;line-height:1}
	.hdr_cart a {cursor:not-allowed}
		
/* hgr */
.hgr {position:absolute;top:3vh;left:5%}
	.hgr a {display:block;width:26px;height:37px;padding:3px 7px 0;margin:0 0 0 -7px}
		.hgr span {display:block;height:3px;background-color:#ffffff;margin:6px 0 0;border-radius:2px}

/* slider */
.slider {display:flex;justify-content:space-between;column-gap:3px;row-gap:3px;border-top:solid 6px #3E6F2F;border-bottom:solid 6px #3E6F2F;padding:3px 0;pointer-events:none}
	.sl_cell {position:relative;flex-grow:1}
	.sl1_hvr .sl_cell:not(#sl1),
	.sl2_hvr .sl_cell:not(#sl2),
	.sl3_hvr .sl_cell:not(#sl3),
	.sl4_hvr .sl_cell:not(#sl4),
	.sl5_hvr .sl_cell:not(#sl5),
	.sl6_hvr .sl_cell:not(#sl6),
	.sl7_hvr .sl_cell:not(#sl7),
	.sl8_hvr .sl_cell:not(#sl8),
	.sl9_hvr .sl_cell:not(#sl9), 
	.sl10_hvr .sl_cell:not(#sl10) {width:5%}

/* slider pnl */
.sl_pnl {background-color:#ffffff;padding:max(2vh,10px) max(1.5vw,15px) max(3vh,15px)}
#sl2 .sl_pnl, #sl5 .sl_pnl, #sl7 .sl_pnl {background-color:#000000;color:#ffffff}	
	.sl_pnl h1 {color:#3E6F2F;margin:0 0 5px;padding:0;font-weight:normal}
	#sl2 h1, #sl5 h1, #sl7 h1 {color:#B4CC98}
	.sl_pnl p {margin:0;padding:0 0 max(2vh,10px);line-height:1.3}
	.sl_btn {display:inline-block;padding:max(1.5vh,10px) max(1vw,15px);background-color:#000000;color:#ffffff;text-decoration:none;border-radius:5px;line-height:1.2;text-align:center}
	#sl2 .sl_btn, #sl5 .sl_btn, #sl7 .sl_btn {background-color:#ffffff;color:#000000}

/* slider imgs */
.sl_img {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center}
#sl1 .sl_img {background-image:url("images/bnr1_1.jpg");background-position:40% center}
#sl2 .sl_img {background-image:url("images/bnr1_2.jpg")}
#sl3 .sl_img {background-image:url("images/bnr1_3.jpg")}
#sl4 .sl_img {background-image:url("images/bnr1_4.jpg")}
#sl5 .sl_img {background-image:url("images/bnr1_5.jpg");background-position:90% center}
#sl6 .sl_img {background-image:url("images/bnr1_6.jpg")}
#sl7 .sl_img {background-image:url("images/bnr1_7.jpg");background-position:20% center}
#sl8 .sl_img {background-image:url("images/bnr1_8.jpg");background-position:90% center}
#sl9 .sl_img {background-image:url("images/bnr1_9.jpg");background-position:70% center}
#sl10 .sl_img {background-image:url("images/bnr1_10.jpg")}

/* bnrs */
.bnr {display:flex;justify-content:center;flex-direction:column;background-repeat:no-repeat;background-size:cover;margin:0 0 3px}
	.bnr h1, .bnr h2 {font-weight:normal;line-height:1.2;font-size:calc(1vw + 30px)}
	.bnr p {margin:0;line-height:1.3}

/* footer */
.ftr_bdr {background-color:#3E6F2F;height:6px;margin:5vmin 0 3px}
.footer {background-color:#B4CC98;text-align:center;padding:5vmin 5% 10vmin}
	.ftr_ttl {font-size:calc(1vw + 30px);margin:0 0 5px;color:#ffffff}
	.ftr_dsc {font-size:12px}

/* page container */
.page {min-height:40vh}
	.page_hdr {text-align:center;padding:0 5% 5vmin}
		.page_hdr h1 {color:#3E6F2F;margin:0;padding:0;font-size:calc(1vw + 30px);font-weight:normal}
		.page_hdr p {margin:0;padding:0}
		
/* contact form */
.contact_form {position:relative;margin:0 auto}
	.cf_fx {display:flex;align-items:center;row-gap:3px;margin:0 0 5px;width:100%}
	.contact_form_ani .cf_fx {opacity:0;transition:opacity 0.2s}
		.cf_fx input[type="text"] {height:30px;border:solid 1px #000000;padding:0 5px;outline:none}
		.cf_fx textarea {height:100px;border:solid 1px #000000;padding:5px;outline:none}
		
		.cf_focus {background-color:#ffffff !important;border-color:#0099C6 !important;box-shadow:0 0 3px 2px rgba(0,153,198,0.1)}
		.cf_fx a {display:inline-block;background-color:#000000;color:#ffffff;padding:10px 20px;margin:5px 0 0;text-decoration:none;border-radius:5px}

/* form sbt */
.cf_done {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;column-gap:10px;margin:-5vmin 0 0}
.cf_done_ani {opacity:1;transition:opacity 0.2s;transition-delay:0.2s}
	.cf_spinner {position:relative;width:50px;height:50px}
		.cf_s_tick {position:absolute;z-index:4;top:5px;left:5px;width:40px;height:40px;background-color:#ffffff;border-radius:50%;text-align:center;font-size:18px;line-height:40px}
			.cf_s_tick span {opacity:0}
			.cf_s_tick_ani {animation:cf_s_tick_ani 0.2s linear both;animation-delay:1.3s}
			@keyframes cf_s_tick_ani {0% {opacity:0} 100% {opacity:1}}
			
		.cf_s_hold {position:absolute;width:100%;height:100%;clip:rect(0,50px,50px,25px);border-radius:100%;background-color:#efefef}
			.cf_s_fill {background-color:#61B500}
			.cf_s_fill {position:absolute;width:100%;height:100%;border-radius:100%;clip:rect(0,25px,50px,0)}
				.cf_s_left .cf_s_fill {z-index:1}
				.cf_s_left_ani .cf_s_fill {animation:cf_s_left_ani 0.5s linear both;animation-delay:0.4s}		
				@keyframes cf_s_left_ani {0% {transform:rotate(0deg)} 100% {transform:rotate(180deg)}}

			.cf_s_right {z-index:3;transform:rotate(180deg)}
				.cf_s_right .cf_s_fill {z-index:3}
				.cf_s_right_ani .cf_s_fill {animation:cf_s_right_ani 0.5s linear both;animation-delay:0.9s}	
				@keyframes cf_s_right_ani {0% {transform:rotate(0deg)} 100% {transform:rotate(180deg)}}		

/* items */
.items {position:relative;display:flex;width:calc(50vw + 200px);margin:0 auto;column-gap:8%;row-gap:10vmin;flex-wrap:wrap}
	.item {width:28%;padding:0 0 20px;margin:0;transition:margin 0.5s}
	.item_buffer {background-color:#fff000;margin-bottom:300px;transition-delay:0.5s}
		.item_img {position:relative;width:100%;height:0;padding:0 0 100%}
			.item_img img {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;max-width:100%;max-height:100%}
		.item_ttl {font-size:calc(0.3vw + 20px);line-height:1.2;padding:5px 0;text-align:center}
		.item_price {text-align:center;padding:15px 0}
		.item_link {display:flex;justify-content:center}
			.item_link a {display:block;background-color:#000000;padding:15px 3vmin;color:#ffffff;text-decoration:none;text-align:center;border-radius:5px}
			.item_dsc {display:none}

/* item pnl */
.item_pnl {position:fixed;z-index:9;top:0;right:0;width:540px;height:100vh;background-color:#ffffff;text-align:center;transition:0.5s}
.item_pnl:not(.ip_closed) {box-shadow:0 0 10px rgba(0,0,0,0.3)}
.item_pnl.ip_closed {right:-100%;pointer-events:none}
	.close_ip {position:absolute;z-index:2;top:0;left:0;color:#000000;opacity:0.3;text-decoration:none;font-size:20px;line-height:1;padding:15px;outline:none}
	.ip_scr {height:calc(100vh - 65px);margin:45px 20px 20px;overflow:auto}
		.ip_img img {max-width:100%}
		.ip_ttl {font-size:calc(0.3vw + 30px);line-height:1.2;padding:0 10px}
		.ip_btn {display:flex;justify-content:center}
			.ip_btn a {display:block;background-color:#efefef;padding:15px 3vmin;color:#b4b4b4;text-decoration:none;text-align:center;border-radius:5px;cursor:not-allowed}
		.ip_dsc {padding:20px 0 30px}
		.ip_qty {padding:0 0 10px;display:flex;align-items:center;justify-content:center;column-gap:10px}	

/* item qty */			
.ip_qty {position:relative;display:table;margin:0 auto}
	.ip_qty_form {display:inline-flex;border:solid 1px #000000;color:#000000;background-color:#FFFFFF;overflow:hidden}
		.ip_qty_form span {height:40px;padding:0 15px;line-height:40px}
		#ip_qty_down, #ip_qty_up {cursor:pointer;user-select:none}
			.ip_qty_form input {width:40px;height:40px;padding:0;text-align:center;margin:0;border:0;outline:none !important;color:inherit;background-color:transparent;pointer-events:none}

@media only screen and (orientation:landscape) and (pointer:fine) and (min-width:1201px) {
	.hdr_buffer, .hgr, .mob_nav {display:none}
	
	/* hdr */
	.hdr {height:25vh}
		.nav {display:flex}
		.hdr_fx {margin:0 100px}
		.hdr_logo {left:100px;left:5vw;height:10vh}
		.hdr_cart {right:100px;right:5vw;height:10vh}
			.hdr_cart span {bottom:10vh}
			
	/* slider */
	.slider {height:60vh;margin:0 0 5vmin}
		.sl_cell {position:relative;width:10%;overflow:hidden;transition:width 0.5s}	
		.sl1_hvr #sl1, .sl2_hvr #sl2, .sl3_hvr #sl3, .sl4_hvr #sl4, .sl5_hvr #sl5, .sl6_hvr #sl6, .sl7_hvr #sl7, .sl8_hvr #sl8, .sl9_hvr #sl9, .sl10_hvr #sl10 {width:55%}	
		.sl1_hvr .sl_cell:not(#sl1),
		.sl2_hvr .sl_cell:not(#sl2),
		.sl3_hvr .sl_cell:not(#sl3),
		.sl4_hvr .sl_cell:not(#sl4),
		.sl5_hvr .sl_cell:not(#sl5),
		.sl6_hvr .sl_cell:not(#sl6),
		.sl7_hvr .sl_cell:not(#sl7),
		.sl8_hvr .sl_cell:not(#sl8),
		.sl9_hvr .sl_cell:not(#sl9), 
		.sl10_hvr .sl_cell:not(#sl10) {width:5%}
		
		/* slider pnl */
		.sl_pnl {position:absolute;z-index:1;width:calc(15vw + 200px);overflow:auto;opacity:0;transition:opacity 0.2s 0s}
		.sl_cell:hover .sl_pnl {opacity:1;transition:opacity 0.5s 0.2s}
			#sl1 .sl_pnl, #sl10 .sl_pnl, #sl2 .sl_pnl, #sl7 .sl_pnl {top:max(3vh,15px);right:max(1.5vw,15px)}
			#sl3 .sl_pnl, #sl4 .sl_pnl, #sl6 .sl_pnl, #sl8 .sl_pnl, #sl9 .sl_pnl, #sl5 .sl_pnl {top:max(3vh,15px);left:max(1.5vw,15px)}
				.sl_pnl h1 {font-size:calc(1vw + 15px)}
	
	/* bnrs */
	.bnr {padding:10vmin}
	.bnr2, .bnr4 {background-position:80% center}
	.bnr3, .bnr5 {background-position:20% center;text-align:right}
	.bnr2 {background-image:url("images/bnr2_bg.jpg")}
	.bnr3 {background-image:url("images/bnr3_bg.jpg")}
	.bnr4 {background-image:url("images/bnr4_bg.jpg")}
	.bnr5 {background-image:url("images/bnr5_bg.jpg")}
		.bnr_pnl {width:calc(40% + 300px);background-color:#ffffff;padding:max(20px,3vmin)}
		.bnr3 .bnr_pnl, .bnr5 .bnr_pnl {margin:0 0 0 auto;text-align:right}
			.bnr_pnl h1, .bnr_pnl h2 {padding:0;margin:0 0 10px;color:#B4CC98}
	
	/* contact form */
	.contact_form {width:calc(162px + 50vw)}
		.cf_fx span:first-child {width:150px}
			.cf_fx input[type="text"] {width:300px}
			.cf_fx textarea {width:50vw}
		.cf_fx input[type="text"]:hover, .cf_fx textarea:hover {background-color:#DCF3FF}
		
	/* hvr states */
	.nav > a:hover {background-color:#ffffff}
	.sl_btn:hover {background-color:#3E6F2F !important;color:#ffffff !important}
	.cf_fx a:hover {background-color:#3E6F2F}
	.item_link a:hover {background-color:#3E6F2F}
	.close_ip:hover {opacity:0.5}
	.ip_qty_form:hover {background-color:#DCF3FF}
}
@media only screen and (pointer:coarse), only screen and (orientation:portrait), only screen and (orientation:landscape) and (pointer:fine) and (max-width:1200px) {
	.mob_nav, .hgr, .hdr_buffer {display:block}
	.nav {display:none}
	
	/* hdr */
	.hdr {position:fixed;z-index:4;top:0;left:0;width:100%}
	.hdr_sha {box-shadow:0 0 10px rgba(0,0,0,0.2)}
	.hdr {height:max(20vh,100px)}
	.hdr_buffer {height:max(20vh,100px);margin:0 0 3vh}
		.hdr_logo {position:absolute;top:3vh;left:50%;transform:translate(-50%,0);height:max(7vh,40px)}
		.hdr_cart {position:absolute;top:3vh;right:5%;height:max(7vh,40px)}
			.hdr_cart_bbl span {top:-2px;left:-2px}

	.home_lyt {display:flex;flex-direction:column}
	
	/* slider */
	.slider {flex-wrap:wrap;order:2;margin:0 0 3px}
	.sl_cell {display:flex;flex-direction:column;align-items:flex-end;width:calc(50% - 2px)}
		.sl_img {position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover}
		.sl_pnl {position:relative;z-index:1;margin:6vmin}
			.sl_pnl h1 {font-size:calc(1vw + 20px)}

	/* bnrs */
	.bnr2 {order:1}
	.bnr3 {order:3}
		.bnr h1, .bnr h2 {background-size:cover;padding:max(3vmin,20px) 5%;margin:0}
		.bnr2 h1 {background-image:url("images/bnr2_bg.jpg");background-position:80% center;padding-right:35%;color:#ffffff}
		.bnr3 h2 {background-image:url("images/bnr3_mob_bg.jpg");padding-right:40%}
		.bnr4 h2 {background-image:url("images/bnr4_bg.jpg");padding-right:35%}
		.bnr5 h2 {background-image:url("images/bnr5_mob_bg.jpg");padding-right:30%;color:#ffffff}
		.bnr2 p, .bnr3 p, .bnr4 p, .bnr5 p {padding:max(3vmin,20px) 5% max(6vmin,40px)}
		
	/* contact form */
	.contact_form {width:70%}
		.cf_fx {flex-direction:column}		
			.cf_fx span:first-child, .cf_fx span {width:100%}
				.cf_fx input[type="text"], .cf_fx textarea {width:calc(100% - 12px)}
				.cf_fx:last-child span:last-child {text-align:center}
				.cf_fx:not(:last-child) {margin:0 0 10px}
	
	/* items */	
	.items {column-gap:10%}
		.item {width:45%}
}
@media only screen and (pointer:coarse) and (max-width:600px), only screen and (orientation:portrait) and (max-width:600px) {
	.hdr_logo, .hdr_cart {height:5vh}
		.hdr_cart_bbl span {top:-5px;left:-5px}
		.hgr a {margin:-6px 0 0 -7px}
	.sl_cell {width:100%}
		.bnr3 h2 {padding:6vmin 30% 6vmin 5%}
	.contact_form {width:90%}
	
	.items {width:70%}
		.item {width:100%}
	.item_pnl {width:100%}
}
@media only screen and (pointer:coarse) and (max-width:400px), only screen and (orientation:portrait) and (max-width:400px) {
	.hdr_logo, .hdr_cart {height:4vh}
}
</style>