@import url('https://fonts.googleapis.com/css?family=Sarina');
@font-face {
    font-family: 'zona_probold';
    src: url('zonapro-bold-webfont.woff2') format('woff2'),
         url('zonapro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'zona_proregular';
    src: url('zonapro-regular-webfont.woff2') format('woff2'),
         url('zonapro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*CSS reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing:border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* site styles*/
html, body{min-height:100%;}

body{
    font-family: 'zona_proregular'; 
    font-size:14px;
}

main h1{font-family: 'Sarina', cursive;
    font-size: 2em;
   color:#ed1c24;
}

main h3{font-size: 1.25em;
margin: .5em 0;
}

#frame h1{color: #000;
font-family:'zona_probold';
}
#openHours h1{margin-left: .75em; color: #fff;}
p{margin-bottom: .75em; line-height:1.33em;}

.bold, b{font-family: 'zona_probold'; }
.ital, i{font-style: oblique; }
.zlite{font-family: 'zona_proregular';}

            body{
                background-position: center center;
                background-size: cover;
                color:#575757;
            }


            a{text-decoration: none; color:#999;}

            .white{color: #fff;}

            div#contact{
               line-height:31px;
                margin-right:2em;
            }
            
            #grid{
                height:100vh;
                display:grid;
                grid-template-rows:  50px 1fr 50px;
            }
           #grid>header{
                display:flex;
                justify-content:center;
               padding-top:.75em;
                overflow:visible;
               background: none;
               z-index:20;
            }
            main{ 
                margin:auto;
                max-width:1200px;
            }




            #hero-logo{max-width:100%;}
            footer{
                display:flex;
                justify-content:center;
                padding-bottom: .75em;
                font-size: 1.1em;
            }
            
#address{cursor:pointer;}
            
.elastic{max-width:100%;}

.active{opacity:.4;}
     
.blue{color:#1569db;}
            /* nav bar */


header img{width:133px;
    }
          

           
            
#hours h1{
font-family: 'Sarina', cursive;
    font-size: 2em;
}
            
            
            #hours{
                padding:1em;
                width:500px;
                height:300px;
                position:absolute;
                top:50vh;
                left:50vw;
                margin-top:-150px;
                margin-left:-250px;
                z-index:21;
                background:#383432;
                box-shadow: 2px 3px 10px #000;
                opacity:0;
                transition: all .4s;
                pointer-events: none;
                color:#fff;
            }

            #cover{
                
                background: rgba(0,0,0,.55);
                position:absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                z-index:20;
                opacity:0;
                transition: all .4s;
                pointer-events: none;
            }
            
            nav li.active{opacity:.4;}
            
            .x{
                cursor: pointer;
                font-size: 2em;
                position:absolute;
                right:5px;
                top:2px;
            }
            
        #text{width: 70%;}

#photo, #text, #pic{margin-right:2em;}
/* #photo hides on small screens, pic doesn't */

#pic{margin:auto;}

nav>ul{text-transform: uppercase; position:relative;}
nav ul ul{text-transform:none; z-index:5;}
nav>ul li{
    display:inline-block;
    padding: 0 .7em;
    position:relative;
}

nav ul ul{display:none; position:absolute; padding-top: .5em;}

nav>ul>li:hover ul{display:block; background: rgba(255,255,255,.9);}
nav.darkBG>ul>li:hover ul{background: rgba(0,0,0,.4);}


nav ul ul li{display:block; padding: .5em 1em;}



nav a{transition:all .5s; }

nav>ul>li{padding-bottom: .5em ;}

nav a:hover {color: #000;}

nav.darkBG a{color: #fff;}
nav.darkBG a:hover {color: #ccc;}

.hfls{display:none;}


button{border:none;
border-radius:0;
padding:1em 1.2em;
font-size: 1.1em;
color: #fff;
background: #1569db;}
button a {color: #fff;}



            
            @media only screen and (min-width:601px) and (max-width: 830px){
                body{font-size: 12px;}
            }

@media only screen and (max-width:600px) {
    
     body{font-size: 14px;}
    nav{padding-left: 200px;}
    nav label img{width:40px;}
    
    nav>ul>li:hover ul{background:none;}
    nav a:hover {color: #fff;}    
    nav ul ul{top:0;} 
    
    .hfls{display:inherit;}
    .hfss{display:none;}
    main{width:98%;}
    #text{width: 90% !important;}
    #pic{margin-right:0;}
    #hours{max-width:320px; margin-left:-160px;}
    footer{flex-wrap:wrap; padding-top:0 !important; text-align:center; }
    #columns{flex-wrap:wrap; }
    #columns div{margin-top: 2em;}
    
   
    
            }