@font-face {
    font-family: 'gotham_bold';
    src: url('gotham-bold-webfont.eot');
    src: url('gotham-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('gotham-bold-webfont.woff2') format('woff2'),
         url('gotham-bold-webfont.woff') format('woff'),
         url('gotham-bold-webfont.ttf') format('truetype'),
         url('gotham-bold-webfont.svg#gotham_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'gotham_light';
    src: url('gotham-light-webfont.eot');
    src: url('gotham-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('gotham-light-webfont.woff2') format('woff2'),
         url('gotham-light-webfont.woff') format('woff'),
         url('gotham-light-webfont.ttf') format('truetype'),
         url('gotham-light-webfont.svg#gotham_bookregular') format('svg');
    font-weight: 300;
    font-style: normal;

}

@font-face {
    font-family: 'gotham';
    src: url('gotham-book-webfont.eot');
    src: url('gotham-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('gotham-book-webfont.woff2') format('woff2'),
         url('gotham-book-webfont.woff') format('woff'),
         url('gotham-book-webfont.ttf') format('truetype'),
         url('gotham-book-webfont.svg#gotham_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
*{margin:0; padding:0; }

body{font-family: 'gotham', sans-serif;}
        nav li{display:inline-block; 
            padding: 0 1em; 
            line-height:50px;
            text-transform: uppercase;
}

a{color:#fff; text-decoration:none;}
.whitebox a{color:#333; font-family: gotham}
section a:hover{text-decoration:underline;}
nav img{margin-left:2em;}
        nav ul{float:right; padding-right:2em}
        nav{position:fixed; width:100%;
        height:50px; color:#fff; background: #000; z-index:2;}
        
        .slicknav_menu {
	display:none; 
}
.corral{
    width:100%;
    max-width:1000px;
    margin:auto;
    box-sizing:border-box;
}
.bigcorral{
  width:100%;
  max-width:1280px;
    margin:auto;
}
section{position:relative; overflow:hidden;}

#callouts{
   z-index:1;
   position:relative;
    top:-130px;
    
}
#callouts div{
    width:100%;
height:166px;
    position:absolute;
    
}

#co-moving{background:url(../images/promo-moving.png) no-repeat center top /contain;}
#co-happyhour{background:url(../images/promo-HH.png) no-repeat center top /contain;}
#co-fridaytastings{background:url(../images/promo-FFT.png) no-repeat center top /contain;
opacity:0;}

.threeCol, .fourCol{
    position: relative;
    top:-100px;
}

.threeCol figure{
    width:33%;
    float:left;
    height:300px;
    line-height:280px;
    display:inline;
    text-align:center;
    background:#333;
    box-sizing:border-box;
    border: 16px solid #fff;
}

.fourCol figure{
    width:25%;
    float:left;
    height:250px;
    line-height:150px;
    display:inline;
    text-align:center;
    background:#333;
    box-sizing:border-box;
    border: 16px solid #fff;
	position:relative;
}

figcaption{
    
    font-family:gotham_bold;
   
    line-height:44px;
    padding: 0 2em;
    box-sizing:border-box;
    background:#fff;
    text-transform: uppercase;
	width:75%;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-20px;
	margin-left:-37%;
}

figcaption.short{line-height: 20px; padding: 5px 0;}
figcaption a{color:#333;}
.clearfix{clear:both;}

/*   SECTION 2   */

#promos{height:550px; color:#fff; position:relative; font-family:gotham_bold;}

#promoBG{background: url(../images/BG-parchment.jpg) no-repeat center center / cover;
position:absolute;
bottom:0px;
width:100%;
height:500px;}



#promo1{background: url(../images/promo-wines.jpg) no-repeat center center / cover;
border-right: 8px solid #fff;
}
#promo2{background: url(../images/promo-oliveoil.jpg) no-repeat center center / cover;
 border-left: 8px solid #fff; border-right: 8px solid #fff; }
#promo3{background: url(../images/promo-coffee.jpg) no-repeat center center / cover;
    border-left: 8px solid #fff;
}
#promo4{background: url(../images/promo-sandwich.jpg) no-repeat center center / cover;
    border-left: 8px solid #fff;
}

.floatright{float:right;}
.floatleft{float:left;}
.w50{width:50%;}
.mt10{margin-top:10px;}
img.new{border:2px solid #fff; margin: 0 8px 28px 0; max-width: 45%;}

#newarrivals{position:relative; top: 100px;}
#newarrivals p{font-weight: bold; line-height: 1.6em;}
#newarrivals h1{text-transform: uppercase; font-size: 2.2em}

#heroshot{position: absolute; top:0; max-width:50%;}

/* SECTION 3 */

#tastings, #authentic, #craftbeers, #sandwiches{
position:relative;
}

#tastings .sidepic{ background: url(../images/tastings-background.jpg) center center no-repeat; 
    background-size: cover;
    position: absolute; top:0; bottom: 0; right:0; left:50%;}
	
	#craftbeers .sidepic{ background: url(../images/craftbeers-background.jpg) center center no-repeat; 
    background-size: cover;
    position: absolute; top:0; bottom: 0; left:0; right:50%;}
	
	#sandwiches .sidepic{ background: url(../images/sandwiches-background.jpg) center center no-repeat; 
    background-size: cover;
    position: absolute; top:0; bottom: 0; right:0; left:50%;}
	
#authentic .sidepic{ background: url(../images/authentic-background.jpg) center center no-repeat; 
    background-size: cover;
    position: absolute; top:0; bottom: 0; left:0; right:50%;}
	
#authentic .whitebox, #craftbeers .whitebox{margin-left:50%;}

.whitebox{background: #fff;
    color:#333;
 	min-height:300px;
	padding: 4em;
    box-sizing:border-box;
    text-align:center;
    line-height: 1.6em;
    font-family: gotham_light;
}

a.button{
	padding: 6px 10px;
	border: 1px #0A8FE0 solid;
	color:#0A8FE0;
	transition: all .4s;
	text-decoration:none;
	}
	
	a.button:hover{ color:#fff;
	background-color:#0A8FE0; text-decoration:none;}

h2{font-size: 1em; text-transform:uppercase;margin-bottom: 1em; font-family:gotham_bold}

#events{background:url(../images/BG-planks.jpg) no-repeat center center / cover; padding:5em; text-align: center; line-height:1.6em;}


/* SECTION 4*/
#reviews{
     padding: 4em 0 5em 0;
background: #000;
    text-align:center;
}

.white{color:#fff;}

span.box{cursor:pointer;}

span.box:hover span.dd{display: inline-block; opacity:1;}

span.dd{
	position:absolute;
	transform:translateX(-35px);
	font-size:.8em; 
	opacity:0;
	display:none;
	transition: all .5s;
	}
	
	span.button{display: block;background: #333;
padding: .5em; border-bottom: 1px solid #000;
transition: all .3s;
}

span.button:hover{background: #555;}

/* SECTION 5*/
#contact{
    padding: 5em 0 7em 0;
font-family: gotham_bold;
}

#contact a{color: #333;}

#contact>div{
width:33%;
    float:left;
    position:relative;
    text-align:center;
}
#phoneNumber{font-size: 1.85em;}
#phoneNumber a{padding-left:30px;
background: url(../images/icon-phone-03.svg)no-repeat;}

#map p{padding-left:30px; 
background: url(../images/icon-map-04.svg)no-repeat;
max-width:160px;
    margin:auto;
}
#hours p{padding-left:40px; 
background: url(../images/icon-clock.svg)no-repeat;
max-width:180px;
    margin:auto;
 font-family: 'gotham';
}

#contact>#icons{width:100%; margin-top:1.3em;}

footer{
    color:#fff;
    padding: 5em 0;
background: #64605e;
    background: -moz-linear-gradient(top, #6b6865 55%,  #413e3c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #6b6865 55%,#413e3c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #6b6865 55%,#413e3c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    text-align:center;
    text-transform:uppercase;
}
footer p{margin-bottom: 2em;}
.fiveCol{

    -webkit-column-count:5;
    -moz-column-count:5;
    column-count:5;
}


div#form{
	text-align:center;
	
	width:100%;
	padding:2em;
	margin:0;
	box-sizing:border-box;
	}
#form p{
	margin-bottom: .7em;
	}

@media screen and (min-width:550px) and (max-width: 820px) {
    nav{font-size: .8em;} 
    
  
    .threeCol{
    position: relative;
    top:0px;
}
    
    figcaption{
    height: 40px;
    line-height:40px;
    font-size: .9em;
        padding:0 7px;;
}
    
    .threeCol figure{
    width:33%;
  height:240px;
    line-height:240px;
    border: 8px solid #fff;
}
    .fourCol figure{
    width:50%;
  height:240px;
    
    border: 8px solid #fff;
}
	
	
    #phoneNumber{font-size:1.33em;} 
    
    
}


@media screen and (max-width: 549px) {
    #callouts{ display:none; }
    #home{height:300px;}
    #owl-demo{display:none!important;}
    #heroshot{display:none;}
    .w50{width:100%; }
    .corral{padding: 100px 10px;}
    .fiveCol{
    -webkit-column-count:3;
         -moz-column-count:3;
       column-count:3;
        font-size: .8em;
    }
    .threeCol{
    position: relative;
    top:100px;
}
.threeCol figure{
    width:100%;
  height:150px;
    line-height:150px;
    border: 8px solid #fff;
}

.fourCol figure{
    width:50%;
	height:150px;
}
figcaption{
    font-size: .9em;
    line-height:22px;
    padding: 0 ;
   
}

figcaption.short{min-height:auto;}
    #events{padding:2em; }
   #contact>div{
width:100%;
    float:none;
  
} 
    #map{margin: 2em 0;} 
    
    #contact{
    padding: 3em 0 3em 0;
    }
    
    
    #tastings .sidepic, #sandwiches .sidepic{ 
        background-position:right -160px center;
        position: absolute; top:0; bottom: 0; right:0; left:80%;}
    
#authentic .sidepic, #craftbeers .sidepic{    position: absolute; top:0; bottom: 0; left:0; right:80%;}
    
#authentic .whitebox, #craftbeers .whitebox{margin-left:20%;}
    
    .whitebox{width:80%;padding: 2em;}
    
	 #menu, nav {
		display:none;
	}
	
	 .slicknav_menu {
		display:block;
         font-size: 1.2em;
         line-height: 1.6em;
         background-image:url(../images/logo.png);
         background-repeat:no-repeat;
         background-position:9px 9px;
	}
}
        
        #owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
            max-height: 700px;
}