/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */



/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html, button, input, select, textarea { color: #2b4042; }
body { font-size: 1em; line-height: 1.4; }

a:focus { outline: none; }

/* Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design. */
::-moz-selection { background: #FFF; text-shadow: none; }
::selection { background: #FFF; text-shadow: none; }

/* A better looking default horizontal rule */
hr { display: block; height: 1px; margin: 1em 0; padding: 0;border: 0; border-top: 1px solid #EEE;  }

/* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */
img { vertical-align: middle; }

/* Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* COLORS
red:		bf2e1a	191,46,26
blue:		37939b
green:	b4cd95
gray:		95a1aa
dk gray:	535a5f
*/



/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== 
font-family: 'Gotham SSm A', 'Gotham SSm B'; font-style: normal; font-weight: 700; 
font-family: 'Gotham SSm A', 'Gotham SSm B'; font-style: normal; font-weight: 500; 
font-family: 'Gotham SSm A', 'Gotham SSm B'; font-style: normal; font-weight: 400; 
font-family: 'Gotham SSm A', 'Gotham SSm B'; font-style: normal; font-weight: 400; font-style: italic; 
font-family: 'Gotham SSm A', 'Gotham SSm B'; font-style: normal; font-weight: 300; 
*/

body { font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, Helvetica, sans-serif; font-weight:400; }

#menu a,
h2,
#slide-1 p { font-weight:300; }

p { font-weight:400; }

h1,
h2 span,
h3,
#slide-1 p.hours span,
#slide-1 p.location span { font-weight:700; }



/* ==========================================================================
   MENU
   ========================================================================== */

#masthead { 
	z-index:1000; 
	position:fixed; top:0; left:0; width:100%; height:59px; 
	text-align:center; 
	background:#F7FAFB; border-bottom:1px solid #cad0d4;
}
#masthead .inner { max-width:960px; position:relative; margin:0 auto; text-align:left; }

#branding { display:inline-block; padding:0 24px; }
#branding a { opacity:1; 
	-webkit-transition: opacity 250ms ease-out;
	-moz-transition: opacity 250ms ease-out;
	transition: opacity 250ms ease-out;
}
#branding a:hover { opacity:.75; } 

#mobile_menu { float:right; display:block; }
#mobile_menu a { float:right; display:block; width:42px; height:42px; margin:9px 12px 0 0; background:#76964e; border-radius:4px; }
#mobile_menu a.on { background:#37939b; }
#mobile_menu a img { margin:9px; }
#mobile_menu a:hover { cursor:pointer; }
	
#menu { display:none; }
#menu ul { margin:0; padding:12px 0; font-size:0; background:#FFF; }
#menu li { display:block; padding:0px 24px; }
#menu li a { 
	display:block; padding:12px;
	font-size:18px; line-height:18px; text-decoration:none; color:#76964e; 
	-webkit-transition: color 300ms ease-out, background 300ms ease-out;
	-moz-transition: color 300ms ease-out, background 300ms ease-out;
	transition: color 300ms ease-out, background 300ms ease-out;
}
#menu li a:hover { text-decoration:none; color:#FFF; background:#bf2e1a; }

.mq_small #menu ul { padding:0; }
.mq_small #menu li { padding:0; }
.mq_small #menu li a { padding:12px 24px; font-size:20px; line-height:20px; color:#FFF; background:#37939b; border-bottom:1px solid #FFF; }


/* ==========================================================================
   Parallax Scroll
   ========================================================================== */
   
body, html { height: 100%; min-height: 100%; background-color: #FFF; /* D7E9EB; */}
body {  }
.no-js { padding-top: 60px; }

.loading { background: #BEDCDE url('../img/ico_loading.gif') no-repeat center center; }
.loading #bg_back,
.loading #bg_front_1,
.loading #bg_front_2,
.loading #bg_mid_1,
.loading #bg_mid_2,
.loading #bg_mid_3 { opacity:.01; }

.skrollable { position: fixed; z-index: 100; }

#bg_color, 
#bg_back,
#bg_front_1,
#bg_front_2,
#bg_mid_1,
#bg_mid_2,
#bg_mid_3 {
    top: 0; left: 0; z-index: 2;
    width: 100%; height: 100%; }
#bg_color { z-index:1; }
#bg_back { background: url("../img/bubbles_back.png") no-repeat scroll 0 0; background-size:300% auto; }
#bg_front_1 { z-index:5; background: url("../img/bubble_front_1pr.png") no-repeat scroll 0 0; background-size:100px auto; } /* 315x300*/
#bg_front_2 { z-index:5; background: url("../img/bubble_front_2pr.png") no-repeat scroll 0 0; background-size:80px auto; } /* 257x275 */
#bg_mid_1 { background: url("../img/bubble_mid_3.png") no-repeat scroll 0 0; background-size:70px auto; } /* 146x133 */
#bg_mid_2 { background: url("../img/bubble_mid_5.png") no-repeat scroll 0 0; background-size:56px auto; } /* 117x113 */
#bg_mid_3 { background: url("../img/bubble_mid_1pr.png") no-repeat scroll 0 0; background-size:75px auto; } /* 151x139 */


section { position:relative; min-width: 320px; min-height:auto; opacity: 0; }
.loaded section,
.no-js section {
	opacity: 1;
	-webkit-transition: opacity 300ms ease-out;
	-moz-transition: opacity 300ms ease-out;
	transition: opacity 300ms ease-out;
}

main { position:absolute; top:60px; width:100%; /* left:50%; margin-left:-480px;*/ z-index:50; overflow-x: hidden; }
#preload { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; }

.bcg {
	position: relative; width: 100%; height:auto; /*height: 100%; 
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover; */
}
.hsContainer { width: 100%; height:auto; /* height: 100%; overflow: hidden; */ position: relative; }
.hsContent { /* position: absolute; left: 0%; top: 60px; */ max-width: 960px; position:relative; margin:0 auto; padding:72px 12px 24px 12px; font-size:0; }

/* Slide 1 */
#slide-1 .bcg { height: 100%; /* background:#ebf4f5; /* background-image:url('../img/bcg_slide-1.jpg'); */ }
#slide-1 .hsContainer,
#slide-1 .home { position:relative; text-align:center; }
#slide-1 .hsContent { padding:60px 0 24px 0; /* bottom: 200px; top: auto; */ }

/* Slide 2 */
#slide-breakfast .bcg { /* background:#d9eaec; /* background-image:url('../img/bcg_slide-2.jpg'); */ }
#slide-breakfast .hsContent { /* margin-left: -450px; bottom: 200px; top: auto; */ }

/* Slide 3 */
#slide-lunch .bcg { /* background:#c8e1e4; /* background-image:url('../img/bcg_slide-3.jpg'); */ }
#slide-lunch .hsContent { /* margin-left: -239px; */ }

/* Slide 4 */
#slide-togo .bcg { /* background:#b9d9dd; /* background-image:url('../img/bcg_slide-4.jpg'); */ }
#slide-togo .hsContent { /* margin-left: -450px; */ }

/* Slide 5 */
#slide-about .bcg { /* background:#acd2d6; /* background-image:url('../img/bcg_slide-4.jpg'); */ }
#slide-about .hsContent { /* margin-left: -450px; */ }

/* Slide 6 */
#slide-map .bcg { 
	min-height:660px; overflow:hidden; 
	background-image:url('../img/wood.jpg'); 
	background-position: center center;
	background-repeat: no-repeat;
	/* background-attachment: fixed;
	background-size: cover; */
	border-top:3px solid #95a1aa;
}
#slide-map .hsContainer { /* height: 100%; overflow: hidden; */ text-align:center; }
#slide-map .hsContent { /*position:relative; */ max-width:none; padding:72px 24px 36px 24px; /* margin-left: -450px; */ }

#slide-last .bcg { background:#95a1aa; }
#slide-last .hsContent { padding:12px 24px; }
#slide-last .hsContent a { color:##535A5F; }


/* ==========================================================================
   MAIN
   ========================================================================== */

.slide { position: relative; }

h1 { font-size: 36px; color:#95a1aa; }
h2 {
	padding: 10px 5px; margin: 0 0 18px 0;
	font-size: 27px; line-height: 30px;
	color:#bf2e1a; background-color: rgba(255,255,255,0.9);
}
h2 span { display:block; font-size:20px; color:#95a1aa; }
h2.small { line-height: 21px; }
h3 { font-size:18px; text-transform:uppercase; color:#000; }
#slide-map h3 { text-transform:lowercase; }
h4 { font-size:15px; text-transform:uppercase; color:#000; }
a { color:#bf2e1a; }

.hsContent p { margin:0; padding:0; font-size:15px; color: #2b4042; }
.hsContent a { text-decoration: underline; }
.hsContent a.btn {
	display:inline-block; padding:12px;
	text-decoration:none;
	color:#FFF; background:#bf2e1a; 
	-webkit-transition: color 300ms ease-out, background 300ms ease-out;
	-moz-transition: color 300ms ease-out, background 300ms ease-out;
	transition: color 300ms ease-out, background 300ms ease-out;
}
.hsContent a.to_top.btn { background:#76964e; }
.hsContent a.btn:hover,
.hsContent a.to_top.btn:hover { cursor:pointer; background:#535a5f; }

.info { }
.whale { padding:12px 0 0 0; text-align:center; }
.whale img { width:40%; height:auto; margin:0 auto 12px; }


#slide-1 h1 { display:none; }
#slide-1 p { margin:0 0 24px; }
#TA { margin-top:24px; text-align:center; }
#TA .inner { display:inline-block; width:160px; min-height:78px; }
#slide-1 #TA_cdsratingsonlynarrow186 { display:none; margin:0 auto; }
#slide-1 #TA_cdsratingsonlynarrow186 .cdsROW.narrow { /* border:1px solid #95a1aa; */ }
/* #slide-1 p.hours { font-size:30px; color:#bf2e1a; }
#slide-1 p.hours span { display:block; font-size:18px; color:#95a1aa; } */
#slide-1 p.hours,
#slide-1 p.location { font-size:21px; line-height:24px; color:#37939b; }
#slide-1 p.hours span,
#slide-1 p.location span { font-size:16px; color:#95a1aa; }
#slide-1 p.contact,
#slide-1 p.contact a { font-size:18px; text-decoration:none; color:#37939b;  }

.item { padding-bottom:24px; font-size:15px; }
.item.separated { padding-top:24px; border-top:3px dotted #f4f9fa; }

.item h3 { margin:0; padding:0 18px 6px; }
.item h4 { margin:0; padding:0; }
.item p { padding:0 18px 6px 18px; }
.hsContent p em { color:#60686f; }
.items_more { padding: 12px 0 0 36px; }
.items_more p { padding:0 0 18px 0; }

#slide-about p { padding:0 0 24px 0; }
#slide-about a:hover { color:#FFF; }

#slide-map .inner { }
#map-canvas,
#map_frame { display:none; z-index:200; width:100%; height: 480px; margin:0 auto 0; border:3px solid #95a1aa; }

.hsContent p.btn_wrap { padding: 0 0 24px 0; text-align:center; }

#slide-last p,
#slide-last p a { font-size:12px; color:#535a5f; }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/* Image replacement */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}
.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { clip: rect(0 0 0 0); position: absolute; width: 1px; height: 1px;  overflow: hidden; margin: -1px; padding: 0; border: 0; }

/* Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; position: static; width: auto; height: auto; overflow: visible; margin: 0; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements. */
.clearfix:before,
.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
/* For IE 6/7 only: Include this rule to trigger hasLayout and contain floats. */
.clearfix { *zoom: 1; }



/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */


@media only screen and (min-width: 320px) {

	#map-canvas,
	#map_frame { display:block; height: 240px; }

}

@media only screen and (min-width: 768px) {

	#mobile_menu { display:none; }
	#menu { display:inline-block; /* float:right; text-align:right; */ padding-top: 9px; }
	#menu ul { padding:0 0 0 24px; background:none; border-left:2px dotted #b4cd95; }
	#menu li { display: inline-block; padding:0 6px; }
	#menu li a { 
		display:inline-block; padding:12px;
	}

	#bg_back { background-size:200% auto; }
	#bg_front_1 {background-size:auto auto; }
	#bg_front_2 { background-size:auto auto; }
	#bg_mid_1 { background-size:auto auto; }
	#bg_mid_2 { background-size:auto auto; }
	#bg_mid_3 { background-size:auto auto; }

	.hsContent { padding:72px 24px 24px 24px; }
	
	/* #slide-1 .hsContent { padding-top:18px; } */
	#slide-1 .home { margin:0 auto; }
	#slide-1 p.hours,
	#slide-1 p.location { font-size:24px; line-height:27px; }
	#slide-1 p.hours span,
	#slide-1 p.location span { font-size:16px; }
	#slide-1 p.contact,
	#slide-1 p.contact a { font-size:18px; }

	.item { width:50%; display:inline-block; vertical-align: top; }
	.column1of2 { width:50%; display:inline-block; vertical-align: top; }
	.column1of2 .item { width:90%; padding-right:10%; display:block; }
	.column1of2 .inner { width:90%; padding-right:10%; display:block; }

	#slide-map .hsContent { padding:84px 84px 24px 84px; }
	#map-canvas,
	#map_frame { display:block; height: 480px; }

}

@media only screen and (min-width: 769px) {

	#branding { padding:0 24px 0 0; }

}

@media only screen and (min-width: 1024px) {
	
	#bg_back { background-size:100% auto; }

	h2 { margin: 0 0 36px 0; padding-left:18px; font-size: 35px; line-height: 38px; }

	.hsContent { padding:72px 0 24px 0; }

	#slide-1 .hsContent { padding-top:72px; }
	#slide-1 .home { text-align:left; }
	.info { float:left; width:420px; margin:24px 0 0 0; }
	.whale { float:right; width:500px; }
	.whale img { width:auto; height:auto; margin:0; }

	#slide-1 #TA { text-align:left; }
	#slide-1 #TA_cdsratingsonlynarrow186 { margin:24px 0 0 0; }

	#slide-map .bcg { 
		height:100%;
	}

}

@media only screen and (min-width: 1025px) {

	#slide-map .bcg {
		height: 728px; 
		background-attachment: fixed;
		background-size: cover;
	}

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}



/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}