@charset "utf-8";

.date { background:url(/images/2014/store/text-holder.png) no-repeat; width:50%; position:relative; margin:2rem auto; height:7.5rem; background-size:cover; color:#0E7369; }
.date p { position:relative; top:2rem; font-size:11px; }

.food_list { text-align:left; }
.food_list.center { display: flex; justify-content: center; }
.food_list.center > .food:first-child { margin-left: 0; }
.food { position:relative; display:inline-block; vertical-align:top; width:40%; margin:2rem 0% 1rem 6.5%; text-align:center; }
.thumb { background:url(/images/2014/store/frame-store.png) no-repeat; position:relative; width:100%; margin:auto; background-size:100% auto; height:40rem; }
.thumb .image_holder { width:75%; position:relative; left:13.5%; top:5rem; }
.thumb .image_holder img { border-radius:2rem; }
.food .remarks, .food .food_name { width:90%; position:relative; margin:auto; }
.food .food_name { margin:0.5rem auto; }
.food .food_name .verdana { font-size:11px; }

.desc { margin:2rem auto; }
.how { background:url(/images/2014/store/how-to-btn.png) no-repeat; position:relative; margin:auto; width:98%; height:15rem; background-size:cover; cursor:pointer; }
.how .text { position:absolute; top:8.5rem; left:30%; font-size:11px; }

.button { background:url(/images/2014/button/circle.png) no-repeat; width:7%; height:7rem; position:absolute; background-size:cover; right:1%; top:6.5rem; color:#529900; font-size:3rem; font-weight:bold; text-align:center; }
.button p { margin-top:2rem; margin-left:8%; }

.layerpop .top { background:url(/images/2014/store/popup-how-top.png) no-repeat; height:4.7rem; }
.layerpop .middle { background:url(/images/2014/store/popup-how-body.png) repeat-y; height:auto; min-height:5rem; }
.layerpop .bottom { background:url(/images/2014/store/popup-how-bottom.png) no-repeat; height:5.7rem; }
.layerpop .top, .layerpop .middle, .layerpop .bottom { width:100%; background-size:100% auto !important; }

.layerpop .mushroom_head { position:absolute; top:-7.5rem; left:3%; width:30%; }
.layerpop .tree { position:absolute; top:-6rem; right:3%; width:65%; }
.layerpop .tree img { max-width:800%; width:100%; }
.layerpop .button { right:4%; top:1.9rem; text-align:center; cursor:pointer; }
.layerpop .button p { position:relative; margin-top:1.2rem; }

.layerpop .title { position:absolute; top: 4rem; left: 41%; font-size: 2.8rem; }

.steps { width:92%; position:relative; border:1px solid transparent; margin-left:4.5%; }
.steps .step .step_thumb { width:35%; text-align:right; }
.steps .step.s1 .step_thumb img, .steps .step.s2 .step_thumb img { width:80%; }
.steps .step_thumb, .steps .step_content { position:relative; display:inline-block; vertical-align:middle; }
.steps .step_content { position:relative; margin-left:3%; width:55%; }
.steps .desc { margin:1rem auto; }
.note { text-align:center; }

.clickbtn { background:url(/images/2019/button_updates/btn-clickhere-1.png) no-repeat; width:50%; background-size:cover; height:7.8rem; float:right; cursor:pointer; }
.clickbtn:hover { background:url(/images/2019/button_updates/btn-clickhere-2.png) no-repeat; background-size:cover; }

.bm .clickbtn { background:url(/images/2019/button_updates/btn-clickhere-1-bm.png) no-repeat; width:50%; background-size:cover; height: 6.8rem; float:right; cursor:pointer; }
.bm .clickbtn:hover { background:url(/images/2019/button_updates/btn-clickhere-2-bm.png) no-repeat; background-size:cover; }
.disclaimer { margin-left: 6rem; }


@media only screen and (max-width: 450px) {
	.page_title { background-size: 100%; }
	.how { background-size: 100%; width: 98%; height: 17rem; }
	.how .text { top: 9.5rem; }
	.how .button { top: 7.5rem; }
	.bm .how .text { top: 8.5rem; }
	.bm .how .button { top: 6.5rem; }
	.bm .clickbtn { height: 7.8rem; }
}

@media only screen and (min-width: 480px) {
	.date p { top:2.5rem; }
	.food { width:30%; margin-left:2%; }
	.food .thumb { height:31rem; }
	.food .thumb .image_holder { left:14.5%; top:4.2rem; }
	.layerpop .button p { top:0.5rem; margin-left:20%; }
	.food .food_name .verdana { font-size:2.2rem; }
	.date p { font-size:3rem;}
	.how .text { font-size:3.5rem; }
}

@media only screen and (min-width: 700px){
	.food { width:20%; margin-left:10%; }
	.food .thumb { height:20rem; }
	.food .thumb .image_holder { left:13%; top:2.6rem; }
	.food img { max-width:800%; width:100%; }
	/*.food { width:213px; margin-left:3%; }*/
	/*.food .thumb { height:213px; }*/
	/*.food .thumb .image_holder { width:155px; height:155px; top:30px; left:0px; margin:auto; }*/

	.layerpop { width:640px; left:50%; margin-left:-320px; }
	.layerpop .top, .layerpop .middle, .layerpop .bottom { width:640px; }
	.layerpop .top, .layerpop .bottom { height:40px; }
	.layerpop .tree { width:340px; height:46px; }
	.layerpop .mushroom_head { width:244px; height:170px; top:-69px; left:25px; }
	.layerpop .tree { width:340px; height:46px; top:-37px; right:33px; }

	.layerpop .button { width:60px; height:60px; font-size:30px; }
	.layerpop .button p { margin-left:0; top:0px; }

	.layerpop .title { font-size:20px; top:30px; }

	.steps .step.s1 .step_thumb img { width:143px; }
	.steps .step.s2 .step_thumb img { width:117px; }
	.clickbtn { width:200px; height:70px; }

	.extra-left { margin-left: 40% !important }
}

@media only screen and (min-width: 939px){
	/*.food { margin-left:5%; }*/
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1024px) {
	.date { width:39%; height:6rem; }
	.date p { top:1.8rem; }
	.layerpop .button p { top:-3px; }


}

@media only screen and (min-width: 1025px) {
	.how { background:url(/images/2014/store/how-to-btn.png) no-repeat; position:relative; margin:auto; width:90%; height:15rem; background-size:cover; cursor:pointer; }
	.how .text { top:9rem; }
	.food .food_name .verdana { font-size:1.3rem; }
	.date p { font-size:2rem;}
	.how .text { font-size:1.5rem; }
}