@font-face {
    font-family: 'aloha';
    src: url('../resources/fonts/KonTikiJF-Aloha.otf') format('opentype');
}
body {
	margin: 0; padding: 0; font-family: 'aloha', sans-serif; color: #000; height: 100%; 
}

footer {
	margin-top: 100px
}
.footer_cell_left {
	width: 33%; display:table-cell; text-align: left
}
.footer_cell_center {
	display:table-cell; text-align: center
}
.footer_cell_right {
	width: 33%; display:table-cell; text-align: right
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #d2d2d2;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #d2d2d2;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #d2d2d2;
}

.box_overflow {	box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

a {color: #0092bc; text-decoration: none}
a:hover { color: #005B8C;}
h1.header { font-size: 45px }
h1.main {color: #006A52; font-size: 45px}
p.body { line-height: 30px; font-size: 18px }
.grey{color: #5f5f5f}
.menu_head { font-size: 18px; color: #8A5825 }
p.menu_body { font-size: 18px; color: #0092bc; line-height: 20px }
img.slider { height: 600px }
.btn {padding: 15px; border: 1px solid #fff; background: #F2A900; float: left; font-size: 20px; cursor: pointer}
.btn:hover {background: #008264}

.mobile_spacer {display: none; margin-top: 500px}

.mailing_container {display: table; margin: auto; width: 500px; padding: 10px; text-align: center; font-size: 25px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2)}

.book_container {display: table-cell; background: #BD9B6B; color: #fff; padding: 10px; border-right: 2px solid #fff}
.book_container:hover { opacity: 0.9; color: #000;  -webkit-box-shadow:inset 0px 0px 0px 2px #F2A900;
    -moz-box-shadow:inset 0px 0px 0px 2px #F2A900;
    box-shadow:inset 0px 0px 0px 2px #F2A900; }
.mail_container {display: table-cell; background: #62A558; color: #fff; padding: 10px; border-left: 2px solid #fff}
.mail_container:hover { opacity: 0.9; color: #000;  -webkit-box-shadow:inset 0px 0px 0px 2px #F2A900;
    -moz-box-shadow:inset 0px 0px 0px 2px #F2A900;
    box-shadow:inset 0px 0px 0px 2px #F2A900;   }
.cta_container {display: table-cell; background-color: #000; color: #fff; padding: 10px; border-left: 2px solid #fff;background-image: repeating-linear-gradient(transparent, transparent 50px, purple 50px, purple 53px, transparent 53px, transparent 63px, purple 63px, purple 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),  
  repeating-linear-gradient(270deg, transparent, transparent 50px, purple 50px, purple 53px, transparent 53px, transparent 63px, purple 63px, purple 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px);}
.cta_container:hover { opacity: 0.9; color: #000;  -webkit-box-shadow:inset 0px 0px 0px 2px #F2A900;
    -moz-box-shadow:inset 0px 0px 0px 2px #F2A900;
    box-shadow:inset 0px 0px 0px 2px #F2A900;   }

.logo_container {width: 100%}
.logo {margin: 45px auto 0 auto; width: 150px; height: 187px}
.mobile_menu {display: none}
.no_menu_msg {
	text-align: center; font-weight: bold; margin-top: 100px; font-size: 20px
}
.menu_fixed {top: 0; width: 100%; text-align: center; font-size: 23px; position: fixed; background: #fff; padding: 50px 0 50px 0; display: none; z-index: 9998}
.menu_static {margin-top: 50px; width: 100%; text-align: center; font-size: 23px}

.banner_container {margin-top: 175px; width: 100%; height: 450px; background: #62A558; border-top: 10px solid #F2A900}
.banner_tbl {left: 0; right: 0; width: 1280px; height: 600px; margin: -75px auto 0 auto; display: table; color: #fff; position: absolute}
.banner_cell_left {display: table-cell; padding: 75px 20px 20px 20px; vertical-align: top}
.banner_cell_right {display: table-cell; height: 600px; width: 600px}
.slider_tbl {display: table; width: 100%; height: 600px}

.find_container {width: 1280px; margin: 0px auto 0 auto}
.find_tbl {display: table; width: 100%; height: 350px}
.find_cell_left {display: table-cell; width: 50%}
.find_cell_right {display: table-cell; text-align: center; vertical-align: top; padding: 10px}
.booking_container {max-width: 900px; margin: 100px auto 0 auto; text-align: center; padding: 20px}
#calendar {
	max-width: 100%;
	margin: 100px auto 0 auto;
	position: relative;
	z-index: 0
}

.insta_container {width: 1280px; margin: 300px auto 0 auto; text-align: center}
.insta_img {text-align: center; overflow: hidden; width: 50%; margin: auto}


.os_container {display: table; width: 1280px; margin: 150px auto 0 auto}
.os_left {display: table-cell; width: 400px; vertical-align: top}
.os_right {display: table-cell; vertical-align: top}
.os_img_container {border-top: 5px solid #BD9B6B; margin-top: 70px; float: left; padding: 0px 40px 0px 40px}
.os_img_bg {background: #BD9B6B; width: 400px; height: 550px; position: absolute; margin-top: 30px; padding: 40px}
.os_content_container {width: 100%; padding: 0px 40px 40px 40px}


.menu_container {margin: 100px auto 0 auto; width: 1280px; padding-top: 100px; border-top: 1px solid #5f5f5f}
.menu_cell_left {width: 50%; display: table-cell; padding: 20px 40px 10px 10px}
.menu_cell_right {width: 50%; display: table-cell; padding: 20px 10px 10px 40px}

.catering1 {display:block; margin: 0px auto 0 auto; width: 100%; height: 850px; background-image: url('../img/catering.jpg'); background-size: contain; background-position: top center; background-repeat:no-repeat}
.catering2 {display:none; margin: 0px auto 0 auto; width: 100%; height: 350px; background-image: url('../img/[210917162530]LBL_RoastedCoconut_093.jpg'); background-size: contain; background-position: top center; background-repeat:no-repeat}
.catering3 {display:none; margin: 0px auto 0 auto; width: 100%; height: 350px; background-image: url('../img/catering2.jpg'); background-size: contain; background-position: top center; background-repeat:no-repeat}

.join_tbl_cell_left {
	display: table-cell; background: #006A52; height: 475px; width: 25%; top: 10; z-index: 2; border-right:1px solid #fff
}
.join_img1 {
	height: 34%; width: 100%; background-size: cover; background-position: center; rotate: 10deg; filter: drop-shadow(2px 0px 2px #000); border: 3px solid #fff
}
.join_img2 {
	height: 37%; width: 100%;; background-size: cover; background-position: center; rotate: -5deg; filter: drop-shadow(2px 0px 2px #000); border: 3px solid #fff; margin-left: 15px; er: drop-shadow(2px 0px 2px #000); border: 3px solid #fff; margin-top: -20px
}
.join_img3 {
	height: 34%; width: 100%; background-size: cover; background-position: center; rotate: 7deg; filter: drop-shadow(2px 0px 2px #000); border: 3px solid #fff
}
.join_main_img {
	display: table-cell; height: 450px; background-size: cover; background-position: center
}
.menu_sel {
	width: 800px; font-size: 25px; padding: 10px; text-align-last:center; border: 1px solid #d2d2d2; color: #F9423A
}

.loyalty_input_container {width: 500px; margin: auto}
.loyalty_main_container {width: 800px; margin: auto}
.loyalty_tbl_cell_left {display: table-cell; width: 350px; vertical-align: top; padding: 20px}
.loyalty_tbl_cell_right {display: table-cell; vertical-align: top; padding: 20px}


.notification_btn {display: none}
.instructions_btn {display: block}
.catering_mobile {display: none}
.catering_desktop {display: block}
.cdesktop {
	margin: auto; background-size: contain; background-repeat: no-repeat; max-width: 1000px; height: 1500px
}
.cmobile {
	margin: auto; background-size: auto 100%; background-repeat: no-repeat; width: 80%; aspect-ratio: 1/1; background-position: center;
}

.landing_cell_left {display: table-cell; width: 70%; text-align: left}
.landing_cell_right {display: table-cell; padding-left: 20px; vertical-align: top; text-align: left}
.landing_banner_img {background-position: center; width: 100%; height: 450px; background-repeat: no-repeat; background-size: contain}

@media (max-width: 1400px) {
	h1.header {font-size: 35px}
	h1.main {font-size: 35px}
	p.body {line-height: 25px; font-size: 17px}
	.banner_container {height: 400px;}
	.banner_tbl {width: 1000px; height: 550px;}
	img.slider {height: 550px}
	
	.find_container {width: 1000px}
	
	.os_container {width: 100%; margin: 150px auto 0 auto}
	
	.menu_container {width: 100%}
}

@media (max-width: 1080px) {
	.footer_cell_left {
		width: 100%; display:block; text-align: left; margin-bottom: 10px
	}
	.footer_cell_center {
		width: 100%; display:block; text-align: left; margin-bottom: 10px
	}
	.footer_cell_right {
		width: 100%; display:block; text-align: left; margin-bottom: 10px
	}
	.mobile_spacer {display: block}
	.mailing_container {width: 100%}
	.logo_container {width: 100%; position: fixed; z-index: 9998; top: 0; background: #fff; background: #F8F8F8; 
	border: solid #BDBDBD 1px; 
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2)  ; 
	-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2)  ; 
	-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2)  ; }
	.logo {margin: 0 0 0 20px; width: 90px; height: 115px; float: left}
	.mobile_menu {display: block; float: right; margin: 20px 20px 0 0}
	
	.menu_fixed {display: none !important}
	.menu_static {display: none !important}
	
	.banner_container {height: 600px}
	.banner_tbl {display: block; width: 100%; height: auto}
	.banner_cell_left {display: block; width: 100%; padding: 20px 20px 20px 20px; margin-top: 100px}
	.banner_cell_right {display: block; width: 600px; margin: 100px auto 0 auto}
	.slider_tbl {display: table; width: 100%; height: 600px}
	
	.find_container {width: 100%; margin: 0px auto 0 auto}
	.find_tbl {height: auto}
	.find_cell_left {display: block; width: 100%}
	.find_cell_right {display: block; padding: 20px}
	
	.insta_container {width: 100%; margin: 200px auto 0 auto}
	.insta_img {width: 100%}
	
	.os_left {display: block; width: 100%}
	.os_right {display: block; width: 100%}
	.os_img_container {padding: 0px 20px 0px 20px}
	.os_img_bg {width: 100%}
	.os_content_container {padding: 0px 20px 40px 20px}
	
	.menu_cell_left {width: 100%; display: block; padding: 10px 20px 10px 20px}
	.menu_cell_right {width: 100%; display: block; padding: 10px 20px 10px 20px}
	
	.no_menu_msg {
		margin-top: 300px
	}
	.menu_sel {
		width: 90%;
	}
	
	.loyalty_input_container {width: 90%}
	.loyalty_main_container {width: 90%}
	.loyalty_tbl_cell_left {display: block; width: 100%; padding: 0px}
	.loyalty_tbl_cell_right {display: block; width: 100%; padding: 0px; margin-top: 50px}
	.notification_btn {display: block}
	.instructions_btn {display: none}
	/*.catering_mobile {display: block}
	.catering_desktop {display: none}*/
	
	.landing_cell_left {display: block; width: 100%}
	.landing_cell_right {display: block; padding-left: 20px; padding-right: 20px; width: 100%}
	.landing_banner_img {background-position: center; width: 100%; height: 575px; background-repeat: no-repeat; background-size: contain}
	
	.cdesktop {
		height: 1300px
	}
}

@media (max-width: 600px) {
	.banner_cell_right {width: 400px; height: 400px}
	.slider_tbl {height: 400px !important}
	.component-fullwidth {height: 400px !important}
	.catering1 {display:none; margin: 0px auto 0 auto; width: 100%; height: 850px; background-image: url('../img/catering.jpg'); background-size: contain; background-position: center; background-repeat:no-repeat}
	.catering2 {display:none; margin: 0px auto 0 auto; width: 100%; height: 350px; background-image: url('../img/[210917162530]LBL_RoastedCoconut_093.jpg'); background-size: contain; background-position: center; background-repeat:no-repeat}
	.catering3 {display:block; margin: 0px auto 0 auto; width: 100%; height: 1000px; background-image: url('../img/catering2.jpg'); background-size: contain; background-position: top center; background-repeat:no-repeat}
	.fc-center {margin-top: 40px}
	
	.join_tbl_cell_left {
		display: block; height: 155px; width: 100%; top: 10; border-right:0; text-align: center; background: #fff
	}
	.join_main_img {
		display: block; height: 250px; background-size: cover; background-position: center
	}
	.join_img1 {
		height: 150px; width: 32%; background-size: cover; background-position: center; rotate: 0deg; filter: drop-shadow(0px 0px 0px #000); border: 1px solid #fff; display: inline-block
	}
	.join_img2 {
		height: 150px; width: 32%;; background-size: cover; background-position: center; rotate: 0deg; filter: drop-shadow(0px 0px 0px #000); border: 1px solid #fff; margin-left: 0px; margin-top: 0px; display: inline-block
	}
	.join_img3 {
		height: 150px; width: 32%; background-size: cover; background-position: center; rotate: 0deg; filter: drop-shadow(0px 0px 0px #000); border: 1px solid #fff; display: inline-block
	}
	.cmobile {
		margin: auto; background-size: auto 100%; background-repeat: no-repeat; width: 100%; aspect-ratio: 1/1; background-position: center;
	}
	.landing_banner_img {width: 100%; height: 275px; background-repeat: no-repeat; background-size: contain}
	
	.cdesktop {
		height: 700px
	}
}

@media (max-width: 500px) {
	.banner_container {margin-top: 250px}
	.menu_container {margin: 175px auto 0 auto}
	.banner_cell_right {width: 300px; height: 300px}
	.slider_tbl {height: 400px !important}
	.component-fullwidth {height: 400px !important}
	.catering2 {height: 250px}
	.catering3 {height: 850px}
	
	.cdesktop {
		height: 650px
	}
}

@media (max-width: 300px) {
	.banner_cell_right {width: 100%;}
	.cdesktop {
		height:350px
	}
}