@font-face {
    font-family: 'knockout';
    src: url('../font/knockout-htf67-fullbantamwt-webfont.eot');
    src: url('../font/knockout-htf67-fullbantamwt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/knockout-htf67-fullbantamwt-webfont.woff') format('woff'),
         url('../font/knockout-htf67-fullbantamwt-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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; outline:none; }
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; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration: none;outline:none; outline-style: none; }
a:active,a:focus { outline: none; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

body { font: 12px "Courier New"; color: #000; background: #f0f0f0; }

::selection {
	background: #535050;
	color:#fff; /* Safari */
	}
::-moz-selection {
	background: #535050;
	color:#fff; /* Firefox */
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 .title { padding-top: 20px; }

.tablet-nav { display: block; background: #fff; height: auto; }

#content { width: 275px; min-height: 580px; height: 580px; position: absolute; left: 50%; margin-left: -137.5px; }

.left-block { background: #fff; height: 116px; left: 0px; top: 0px; position: relative; width: 275px; z-index: 2; }
.left-block img { width: 97px; height: 97px; float: left; margin-top: 0px; margin-left: 0px; }
.left-block ul { margin-top: 28px; width: 119px; margin-left: 0px; display: none; }
	
.tablet-nav a.nav-click { background:url(../img/menu.png) no-repeat left 55px; background-color: #fff; color: #000; text-transform: uppercase; display: block; float: right; margin-right: 15px; line-height: 102px; display: block; position: relative; z-index: 2; }

.left-block .tablet-nav ul { background: #fff; margin: 0px; width: 275px; padding-bottom: 30px; top: 100px; display: none; z-index: 999; position: absolute; }
.left-block .tablet-nav ul li { height: 24px; text-align: right; }
.left-block .tablet-nav ul li a { border-top: none; color:#534F51; display: block; float: right; clear: both; font-size: 14px; font-weight: bold; line-height: 24px; width: 119px; margin-right: 15px; position: relative; z-index: 99999; }
.left-block .tablet-nav ul li a:hover { text-decoration: underline; }

.mini-cart { display: none; }

.history ul li a.active { color:#E57D5C; }
.home ul li a.active { color:#E57D5C; }
.coffee ul li a.active { color:#E57D5B; }

.article { display: block; margin-top: 90px; left: 30px; position: absolute; }
.tagline { display: inline-block; width: 0; padding: 1px 0; }
.article h1, .article p.title, .tagline h1 { display: inline; padding: 0px; color: #F4605E; font-family: 'knockout'; font-size: 53px; line-height: 35px; text-transform: uppercase; position: relative; z-index: -1; }
.article p.title { color:#E57D5C; }
.coffee p.title { color: #E57D5C; }
.home p.title { color:#E57D5C; }
.tagline span { position: relative; left: 0px; }
	
.article p { line-height: 20px; margin-bottom: 10px; margin-top: 10px; width: 202px; }
	
a.readMore { font-family: 'knockout'; font-size: 23px; text-transform: uppercase; }
a.readMoreNew { font-family: 'knockout'; font-size: 23px; text-transform: uppercase; color:#e57d5c; }
a.readMoreNew:hover { color:#534f51; }
.history a.readMore { color: #E57D5C; }
.home a.readMore { color: #E57D5C; }
.coffee a.readMore { color:#E57D5C; }
a.readMore2 { font-family: 'knockout'; font-size: 23px; text-transform: uppercase;color: #ece3d2 }
a.readMore2:hover { color:#fff; }

.right-arrows { background: none; height: 39px; position: absolute; right: 15px; top: 140px; width: 55px; z-index: -1; }
.right-arrows a { background:url(../img/arrow.png) no-repeat; display: block; height: 39px; left: 0; margin-left: 0px; text-indent: -9999px; width: 19px; position: absolute; }
.right-arrows a#next { background-position: 0px bottom; top: 0; margin-top: 0px; left: 36px; }
.right-arrows a#prev { background-position: -19px bottom; top: 0; margin-top: 0px; right: 0px; }
	
.slide-caption { font-weight: bold; position: absolute; display: none; right: 0px; top: auto; bottom: 0px; margin-top: 0px; z-index: 1; background: #fff; padding-bottom: 18px; padding-top: 0px; width: 275px; height: 40px; text-align: right; }
.slide-caption p { width: 190px; float: right; padding-right: 15px; padding-top: 18px; color:#fff; }

.history .article { display: none; }
.history .right-arrows { display: none; }

.home .article { display: block; }
.home .right-arrows { display: block; }

.history div.backstretch { height: 391px !important; }
.home div.backstretch { height: 100% !important; }

.page-content { background: none; height: 267px; position: relative; right: 0px; bottom: 0px; width: 275px; margin-top: 0px; z-index: -1; }
.page-content .tagline { display: block; height: 273px; position: relative; }
.page-content .tagline h1 { color: #fff; position: absolute; bottom: 20px; padding-left: 30px; line-height: 40px; }

.page-content-tablet { display: none; }

a.closeContent { display: none; }

.tablet-cover { background: #fff; padding-top: 7px; padding-bottom: 50px; }
.tablet-cover p { color: #534F51; padding: 25px 30px 0px 25px; line-height: 20px; }
.history div.tablet-cover img { width: 134px; height: auto; }
.coffee div.tablet-cover img { width: 275px; height: auto; }

button.showAgain { display: none; }

.vertical { margin-top: 30px; }

p.note-tablet { display: none; }

.subheading { display: none; }

div.status { display: none; color:#fff; }

.social { display: block; float: left; margin-top: 46px; margin-left: 22px; width: 76px; position: absolute; }
	.social a.fb-icon, .social a.ig-icon { background:url(../img/social.png) no-repeat 0px 0px; color: #fff; display: block; float: left; height: 21px; margin-left: 9px; overflow: hidden: position: relative; text-indent: -999px; width: 21px; background-size: 42px; }
	.social a.ig-icon { background-position: -21px 0px; }
	.social a:hover.fb-icon { background-position: 0px -21px; }
	.social a:hover.ig-icon { background-position: -21px -21px; }

@media only screen and (min-width: 768px) {	
	
	#content { width: 100%; min-height: 800px; height: 100%; position: absolute; left: 0; margin-left: 0px; margin-bottom: 0px; overflow:hidden; }
	
	.left-block { background: #fff; height: 116px; left: 0px; top: 0px; position: relative; width: 100%; }
	.left-block img { width: 97px; height: 97px; float: left; margin-top: -3px; margin-left: -3px; }
	
	.tablet-nav a.nav-click { margin-right: 20px; }
	
	.left-block .tablet-nav ul { background: #fff; margin: 0px; width: 100%; padding-bottom: 30px; top: 100px; display: none; z-index: 1; position: absolute; }
	.left-block .tablet-nav ul li a { margin-right: 20px; }
	
	.mini-cart { display: none; }
	
	.article { display: block; margin-top: 120px; left: 30px; position: absolute; }
	.tagline { display: inline-block; width: 0; padding: 1px 0; }
	.article h1, .article p.title, .tagline h1 { display: inline; padding: 0px; color: #F4605E; font-family: 'knockout'; font-size: 77px; line-height: 52px; text-transform: uppercase; position: relative; z-index: -1; }
	.article p.title { color:#E57D5C; }
	.coffee p.title { color: #E57D5C; }
	.home p.title { color:#E57D5C; }
	.tagline span { position: relative; left: 0px; }
	
	.article p { line-height: 20px; margin-bottom: 10px; margin-top: 10px; width: 165px; }
	
	.right-arrows { background: none; height: 100%; position: absolute; right: 5px; top: 116px; width: 70px; z-index:1; }
	.right-arrows a { background:url(../img/arrow.png) no-repeat; display: block; height: 39px; left: 50%; margin-left: 0px; text-indent: -9999px; width: 19px; position: absolute; }
	.right-arrows a#next { background-position: 0px -39px; top: 40%; margin-top: -39px; }
	.right-arrows a#prev { background-position: -19px -39px; top: 40%; margin-top: 0px; }
	
	.right-arrows a:hover#next { background-position: 0px -78px; }
	.right-arrows a:hover#prev { background-position: -19px -78px; }
	
	.sequence { display: none; }
	
	.slide-caption { font-weight: bold; position: absolute; display: none; right: 15px; top: 173px; margin-top: 0px; z-index: -1; background: none; padding-top: 0px; width: auto; padding-bottom: 0px; height: auto; text-align: right; }	
	.slide-caption p { width: auto; float: right; padding-right: 0px; padding-top: 0px; }
		
	.history div.backstretch { height: 100% !important; }
	
	.page-content { display: none; background: none; height: 267px; position: absolute; right: 20px; bottom: 20px; min-width: 657px; width: 657px; margin-top: 0px; z-index: 2; }
	.page-content .tagline { display: block; height: auto; position: relative; right: -657px; text-align: right; }
	.page-content .tagline h1 { color: #fff; position: absolute; bottom: 20px; right: 0px; line-height: 56px; }
	
	.page-content-tablet { display: block; background: none; height: 267px; left: 20px; position: absolute; right: 20px; bottom: 20px; width: auto; margin-top: 0px; z-index: 2; }
	.page-content-tablet .tagline { display: block; height: auto; position: absolute; right: 0px; text-align: right; }
	.page-content-tablet .tagline h1 { color: #fff; position: absolute; bottom: 20px; right: 0px; line-height: 56px; }
	
	a.closeContent { background: #E57D5C; color: #fff; display: block; font-family: 'knockout'; font-size: 37px; height: 41px; line-height: 41px; position: absolute; right: 15px; text-align: center; top: 18px; width: 41px; }
	a.showContent { background:url(../img/up.png) no-repeat; color: #fff; display: block; font-family: 'knockout'; font-size: 37px; height: 41px; line-height: 41px; position: absolute; right: 15px; text-align: center; top: 18px; width: 41px; overflow: hidden; text-indent: -999px; }
	
	.page-container { margin-left: 0px; margin-top: 0px; height: 202px; padding-top: 65px; background: #fff; }
	.page-container img { display: block; float: right; margin-top: 0px; margin-left: 15px; margin-right: 0px; margin-bottom: 36px; }
	.history .page-container p { padding-left: 0px; color: #534F51; }
	.history .page-container p { clear: none; float: left; margin-left: 36px; margin-top: -5px; padding-top: 0px; margin-bottom: 25px; line-height: 20px; width: 53%; }
	.coffee .page-container p { clear: both; margin-bottom: 20px; line-height: 20px; width: 179px; }
	
	.history div.tablet-cover img { width: 134px; height: auto; }
	.coffee div.tablet-cover img{ height: auto; width: 337px; margin-right: 0px; }
	.coffee .page-container p { clear: none; float: left; margin-left: 36px; margin-top: -5px; padding-top: 0px; margin-bottom: 25px; line-height: 20px; width: 260px; }
	.tablet-cover p { color: #534F51; padding: 0px; line-height: 20px; }
	
	.vertical {  display: block; float: right; width: auto; margin-top: -80px; margin-right: 0px; }
	.vertical img { margin: 0px; float: left; margin-left: 15px; }
	
	.wholesale .page-container img { display: block; }
	
	button.showAgain { background: #E57D5C; border: 0px; color: #fff; display: none; font-family: 'knockout'; font-size: 53px; height: 41px; line-height: 41px; width: 41px; position: absolute; top: 15px; right: 15px; z-index: 1; }
	
	p.note-tablet { display: none; }
	p.subheading {
		display:none;
	}
	
	.social { display: block; float: right; margin-top: -42px; margin-right: 61px; width: 76px; position: relative; }
	.social a.fb-icon, .social a.ig-icon { background:url(../img/social.png) no-repeat 0px 0px; color: #fff; display: block; float: left; height: 21px; margin-left: 9px; overflow: hidden: position: relative; text-indent: -999px; width: 21px; background-size: 42px; }
	.social a.ig-icon { background-position: -21px 0px; }
	.social a:hover.fb-icon { background-position: 0px -21px; }
	.social a:hover.ig-icon { background-position: -21px -21px; }
}


@media only screen and (min-width: 1140px) {
	.tablet-nav { display: none; }
	p.subheading {display:block;
	}
	.history .page-container p.subheading {
	margin-top:30px;
	margin-bottom:0px;
	width:320px;
}
	#content { width: 100%; min-height: 100%; height: auto; position: absolute; left: 0; margin-left: 0px; margin-bottom: 0px; }

	.left-block { background: #fff; min-height: 100%; height: 100%; left: 0px; top: auto; position: absolute; width: 196px; }
	
	.left-block img { width: 149px; height: 149px; float: none; margin-top: -3px; margin-left: -5px; }
	
	.left-block ul { margin-top: 28px; width: 119px; margin-left: 36px; display: block; }
	.left-block ul li { border-bottom: 1px dotted #8D8D8D; height: 24px; }
	.left-block ul li a { color:#534F51; font-size: 14px; font-weight: bold; line-height: 24px; }
	
	.mini-cart { background:url(../img/cart.png) no-repeat center 0px; color: #534F51; cursor: pointer; display: block; margin-left: 36px; margin-top: 32px; padding-top: 46px; width: 100px; position: relative; bottom: auto; right: auto; border-top: none; height: auto; text-align: left; }
	.mini-cart a { color: #534F51 }
	.mini-cart span { line-height: normal; margin-right: 0px; }
	
	.home .left-block ul li a { }
	
	.history ul li a.active { color:#E57D5C; }
	.home ul li a.active { color:#E57D5C; }
	.coffee ul li a.active { color:#E57D5C; }	
	
	.article { display: block; margin-top: 192px; margin-left: 51px; left: 196px; position: absolute; }
		
	.tagline { display: inline-block; width: 0; padding: 1px 0; }
	.article h1, .article p.title, .tagline h1 { display: inline; padding: 0px; color: #F4605E; font-family: 'knockout'; font-size: 98px; line-height: 70px; text-transform: uppercase; }
	
	.article p.title { color:#E57D5C; }
	.coffee p.title { color: #E57D5C; }
	.home p.title { color:#E57D5C; }
	.tagline span { position: relative; left: 0px; }
	
	.article p { line-height: 20px; margin-bottom: 10px; margin-top: 10px; }
	
	a.readMore { font-family: 'knockout'; font-size: 30px; text-transform: uppercase; }
	body .article:hover a { color: #fff !important; }
	
	.history a.readMore { color: #E57D5C; }
	.home a.readMore { color: #E57D5C; }
	.coffee a.readMore { color:#E57D5C; }
	
	.right-arrows { background: #fff; height: 100%; position: absolute; right: 0px; top: 0px; width: 70px; z-index: 2; }
	.right-arrows a { background:url(../img/arrow.png) no-repeat; display: block; height: 39px; left: 50%; margin-left: -9px; text-indent: -9999px; width: 19px; position: absolute; }
	.right-arrows a#next { background-position: 0px 0px; top: 50%; margin-top: -39px; }
	.right-arrows a#prev { background-position: -19px 0px; top: 50%; margin-top: 0px; }
	
	.right-arrows a:hover#next { background-position: 0px -39px; }
	.right-arrows a:hover#prev { background-position: -19px -39px; }
	
	.sequence { display: none; }
	
	.slide-caption { font-weight: bold; position: absolute; display: block; right: 120px; top: 73px; margin-top: 0px; z-index: -1; background: none; padding-top: 0px; width: auto; text-align: right; }
	
	.page-content { display: block; background: #fff; height: 100%; position: absolute; right: 0px; top: 0px; bottom: 0px; min-width: 514px; width: 514px; margin-top: 0px; margin-left: 0px; margin-right: 0px; z-index: 2; }
	.page-content .tagline { display: block; height: auto; position: relative; right: auto; text-align: left; }
	.page-content .tagline h1 { color: #534F51; position: relative; bottom: 0; right: auto; padding-left: 0px; line-height: 70px; }
	
	.page-content-tablet { display: none; }
		
	.history div.backstretch { height: 100% !important; }
	
	.tablet-cover { background: #fff; padding-top: 0px; padding-bottom: 0px; }
	.history div.tablet-cover img { width: auto; }	
	.tablet-cover p { padding: 0px; line-height: normal; }
	
	a.closeContent { background: #E57D5C; color: #fff; display: block; font-family: 'knockout'; font-size: 37px; height: 41px; line-height: 41px; position: absolute; right: 14px; text-align: center; top: 14px; width: 41px; }
	
	.page-container { margin-left: 70px; margin-top: 171px; height: auto; padding-top: 0px; background: none; }
	.page-container img { display: block; float: left; margin-top: 41px; margin-right: 22px; margin-left: 0px; margin-bottom: 36px; }
	.history .page-container p { padding-left: 0px; color: #534F51; }
	.history .page-container p { clear: both; float: none; margin-left: 0px; margin-top: 0px; margin-bottom: 20px; line-height: 20px; width: 385px; }
	.coffee .page-container p { clear: both; margin-bottom: 20px; line-height: 20px; width: 179px; }
	
	.coffee .page-container img { height: auto; width: auto; margin-right: 0px; margin-top: 41px; }
	.coffee .page-container p { clear: none; float: left; margin-left: 0px; margin-top: 0px; padding-top: 0px; margin-bottom: 25px; margin-right: 50px; line-height: 20px; width: 170px; }
	
	.vertical-text { display: block; float: left; width: 248px; margin-top: 31px; }
	.page-container .vertical-text p { width: 248px; }
	
	.vertical {  display: block; float: right; width: 171px; margin-top: 31px; }
	.vertical img { margin: 0px; float: none; }
	
	.wholesale .page-container img { display: block; }
	
	button.showAgain { background: #E57D5C; border: 0px; color: #fff; display: block; font-family: 'knockout'; font-size: 53px; height: 41px; line-height: 41px; width: 41px; position: absolute; top: 14px; right: 14px; }
	
	p.note-tablet { display: none; }
	
	div.status { display: block; font-weight: bold; position: absolute; right: 120px; top: 120px; z-index: 99999; }
	
	.social { display: block; float: none; margin: 0px auto; margin-top: 25px; width: 76px; position: relative }
	.social a.fb-icon, .social a.ig-icon { background:url(../img/social.png) no-repeat 0px 0px; color: #fff; display: block; float: left; height: 32px; margin: 0px 3px; overflow: hidden: position: relative; text-indent: -999px; width: 32px; }
	.social a.ig-icon { background-position: -32px 0px; }
	.social a:hover.fb-icon { background-position: 0px -32px; }
	.social a:hover.ig-icon { background-position: -32px -32px; }
}
.article:hover p.title { color: #fff !important; }
.article { cursor: pointer !important; }

.popup {
  position:fixed; z-index:9999; top:120px; left:50%; 
  width:405px; height:280px; background:#F5F5F5;
    -moz-transition:top 800ms;
    -o-transition:top 800ms;
    -webkit-transition:top 800ms;
  transition:top 800ms;
}
  .p_content { color: #534F51; height: 208px; width: auto; font-size:12px; margin: 10px; padding: 0px; padding-top: 50px; padding-left: 30px; border: 1px dotted #000000; }
  .p_content h2 { color: #534F51; font-family: 'knockout'; font-size:38px; padding-bottom: 8px; }
  .p_content p { width: 240px; line-height: 1.7em; }
  .p_anch {
    float:left; position:relative; z-index:9999; width:100%;
    margin:80px 0 0 0; text-align:center; font-size:18px;
  }
  #mc-form { margin-top: 15px; width: 320px; }
  #mc-form input[type=text], #mc-form input[type=email] { border: 1px dotted #000; height: 33px; padding: 0px 12px; width: 130px; }
  #mc-form button[type=submit] { background: #E57D5C; border: none; height: 34px; display: block; float: right; line-height: 38px; color: #fff; font-family: 'knockout'; font-size:24.52px; margin-top: 12px; text-transform: uppercase; padding: 0px 27px; }
  
  .p_anch a { color:#000; }
  .p_anch a:hover { text-decoration:none; }
  .p_anch_bottom { margin:1500px 0 0 0; padding:0 0 50px 0; }
  .p_close {
    background: #E57D5C; color: #fff; float:right;font-family: 'knockout'; font-size:37.24px; line-height: 41px; text-align: center; width:41px; height:41px; margin:0; position:absolute; right: 23px; top: 23px; z-index:99999;
  }
  .p_body {
    background:#000; left:0; top:0; position:fixed; width:100%; height:100%; opacity:0.7;
      -moz-transition:opacity 800ms;
      -o-transition:opacity 800ms;
      -webkit-transition:opacity 800ms;
    transition:opacity 800ms;
  }


/* JS-styles — declaratively */
.js__popup {}
  .js__p_start {}
  .js__p_close {}
  .js__p_body {}
  .js__slide_top { height:0; overflow:hidden; top:0; }
  .js__fadeout { height:0; overflow:hidden; opacity:0; }