body
{
font-family: brandon-grotesque, sans-serif;
height:100%;
width:100%;
max-width:100%;
overflow-x:hidden;
margin:0;
padding:0;
color:##000;
}
div
{
display:inline-block;
width:100%;
padding:0;
margin:0;
position:relative;
}
a
{
text-decoration:none;
color:#000000;
}
p
{
font-family: brandon-grotesque, sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.4vw;
color:#000;	
}
p.subheader-text	
{
font-family: brandon-grotesque, sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.6vw;
color:#000;	
}	
p.white-text
{
color:#fff;	
}
h1
{
font-family: brandon-grotesque, sans-serif;
font-weight: 900;
letter-spacing: 0.05em;
font-size:4.0vw;
font-style: normal;
color:#fff;
}
h2
{
font-family: brandon-grotesque, sans-serif;
font-weight: 900;
font-style: normal;
letter-spacing: 0.05em;
line-height: 1.2em;
font-size:3.5vw;
font-weight:900;
}	
h3
{
font-family: brandon-grotesque, sans-serif;
font-weight: 400;
font-style: italic;
letter-spacing: 0.0em;
font-size:3.0vw;
color:#fff;
}
h4
{
font-family: brandon-grotesque, sans-serif;
font-weight: 900;
font-style: normal;
letter-spacing: 0.05em;
font-size:1.4vw;
color:#000;	
}
a.callout-button
{
text-transform: uppercase;
border: solid 1px;
padding: 0.4vw 1.6vw;
display: inline-block;
width: auto;
margin-top: 2vw;
margin-bottom: 2vw;
font-size: 1.2vw;
}
.red-button
{
color:#fff;
background:#893126;
}
.red-button:hover
{
background:#aa6b29;
}
.callout-button.red-button-hover:hover
{
color:#fff;
background:#893126;
}
.orange-button
{
color:#fff;
background:#aa6b29;
}
.orange-button-hover:hover
{
color:#fff;
background:#aa6b29;
}
.yellow-button
{
color:#fff;
background:#be9b45;
}
.yellow-button-hover:hover
{
color:#fff;
background:#be9b45;
}
.red-text
{
color:#7e1917 !important;
}
.orange-text
{
color:#aa6b29 !important;
}
.yellow-text
{
color:#be9b45 !important;
}
.brown-text
{	
color:#4f3728 !important;
}
.white-text
{	
color:#fff !important;
}
span.dot
{
width: 4.5vw;
height: 4.5vw;
display: inline-block;
border-radius: 5vw;
position: absolute;
left: 4vw;
top: 10vw
}
div.page-wrapper
{
background:#fff;
background-size:100vw;
background-position:50% 50%;
height:100%;
max-height: 100%;
text-align:center;
}
div.inner-wrap
{
text-align: center;
float: none;
width: 76vw;
max-width: 1460px;
}
div.main-menu
{
padding:0;
margin:0;
position:relative;
background-color:#000;		
}
div.menu-top
{
padding:0;
margin:0;
position:relative;
max-height: 7.5vw;
}
div.menu-top p
{
color:#fff;
}
div.menu-top-left
{
text-align: left;
width: 40%;	
float:left;
}
div.menu-top-left h1
{
font-size:2.5vw;
}
div.menu-top-right
{
text-align:left;
width: 60%;
float:right;
}
div.menu-top-right ul
{
display:inline-block;
width:100%;
float:left;
margin:0;
padding:0;
text-align:right;
}
div.menu-top-right ul li
{
display:inline-block;
width:auto;
margin:0;
padding:0;
color:#fff;
min-width:10%;
margin-right:5%;
height: 7vw;
line-height: 7vw;
}
div.menu-top-right ul li.buy-beans-link
{
margin-right:0%;
}
div.menu-top-right ul li a
{
color: #fff;
font-weight: 700;
height: 100%;
display: block;
font-size: 1.2vw;
}
div.menu-top-right ul li a:hover
{
text-decoration:underline;
}
div.header
{
background: url(../images/header-beans.png) no-repeat;
background-position: 100% 0%;
background-size: contain;
background-color: #000;
height: 64vw;
}
div.callout-header-text
{
color: #4F3728;
text-align:left;
width:40%;
float:left;
padding-top: 5.5vw;
}
div.logo-area
{
width:100%;	
}	
div.callout-logo
{
width: 15.25vw;
padding-top: 5.5vw;
}
div.callout-text-paragraph
{
width: 100%;
max-width: 44vw;
display: block;
float: none;
margin: 0 auto;
}
div.how-it-works
{
width:100%;	
}
div.how-it-works p.subheader-text
{
width: 100%;
max-width: 44vw;
display: block;
float: none;
margin: 0 auto;
padding-top:4vw;
}
div.how-it-works-steps
{
width:100%;	
}
div.how-it-works-steps h4
{
width:90%;	
margin-left:5%;
margin-right:5%;
}
div.how-it-works-steps p
{
font-size:1.0vw;
}
div.shop-button a.callout-button
{
margin-top:3vw;
margin-bottom:7vw;
}
div.how-it-works-step-1
{
display:inline-block;
background:url(../images/choose-your-flavour-bw.png) no-repeat;
background-position:50% 0;
padding-top:10vw;
width:21%;	
float:left;
margin:2%;
background-size: 10vw;
}
div.how-it-works-step-1:hover
{
background:url(../images/choose-your-flavour-hover.png) no-repeat;
background-position:50% 0;
background-size: 10vw;
}
div.how-it-works-step-2
{
display:inline-block;
width:21%;	
float:left;
margin:2%;
padding-top:10vw;
background:url(../images/grind-coffee-bw.png) no-repeat;
background-position:50% 0;
background-size: 10vw;
}
div.how-it-works-step-2:hover
{
background:url(../images/grind-coffee-hover.png) no-repeat;
background-position:50% 0;
background-size: 10vw;
}
div.how-it-works-step-3
{
display:inline-block;
width:21%;	
float:left;
margin:2%;
padding-top:10vw;
background:url(../images/we-deliver-icon-bw.png) no-repeat;
background-position:50% 0;
background-size: 10vw;
}
div.how-it-works-step-3:hover
{
background:url(../images/we-deliver-icon-hover.png) no-repeat;
background-position:50% 0;
background-size: 10vw;
}
div.how-it-works-step-4
{
display:inline-block;
width:21%;	
float:left;
margin:2%;
padding-top:10vw;
background:url(../images/brew-coffee-icon-bw.png) no-repeat;
background-position:50% 0;
background-size: 10vw;
}
div.how-it-works-step-4:hover
{
background:url(../images/brew-coffee-icon-hover.png) no-repeat;
background-position:50% 0;
background-size: 10vw;
}
div.middle-callout-image
{
display:inline-block;
width:100%;
background:url(../images/barista.png) no-repeat;
height:36vw;
}
div.callout-quote
{
width: 37%;
float: right;
text-align: left;
padding-top: 6%;	
}
div.flavour-profiles
{
width:100%;	
}
div.product-area
{
width:100%;	
}
div.product-area-left
{
display:inline-block;
width:29.33%;
margin-left:2%;
margin-right:2%;
background:url(../images/coffee-jar.png) no-repeat;
background-position:50% 0;
background-size: 9.5vw;
padding-top:16vw;
float:left;
}
div.product-area-middle
{
display:inline-block;
width:29.33%;
margin-left:2%;
margin-right:2%;
background:url(../images/coffee-jar.png) no-repeat;	
background-position:50% 0;
background-size: 9.5vw;
padding-top:16vw;
float:left;
}
div.product-area-right
{
display:inline-block;
width:29.33%;
margin-left:2%;
margin-right:2%;
background:url(../images/coffee-jar.png) no-repeat;	
background-position:50% 0;
background-size: 9.5vw;
padding-top:16vw;
float:left;
}
div.newsletter-section
{
background:#000;
padding:5vw 0;
}
div.featured-roaster-left
{
width:50%;
float:left;
}
div.featured-roaster-right
{
width:50%;
float:left;
text-align:left;
}
div.content-wrapper
{
z-index:10;
}
div.content-wrapper h2
{
font-size:2vw;
margin-top:0;
margin-bottom:0;
}
div.content-wrapper p
{
font-size:1vw;
}
div.featured-roaster-left img
{
margin-top:5vw;
height:auto;
width:80%;
max-width:20vw;
}
div.featured-roaster-right
{
}
div.featured-roaster-right h3
{
font-family: brandon-grotesque, sans-serif;
font-weight: 900;
font-style: normal;
letter-spacing: 0.0em;
line-height: 1.2em;
font-size: 3.0vw;
font-weight: 900;
margin-top:5vw;
margin-bottom:0vw;
}
div.featured-roaster-right h4
{
margin-top:0vw;
margin-bottom:0vw;
}
div.footer
{
}
div.footer-top
{
background:url(../images/Beans-Chevron-White-BG.png) no-repeat;
background-position:50% 0;
background-size:100vw;
height:29vw;
overflow:visible;
}
div.footer-top div.callout-logo
{
position: relative;
bottom: -17.6vw;
z-index: 10;
width: 10vw;
}
div.footer-bottom
{
background:#000;
height:20vw;
padding-top:7vw;
}
div.footer-bottom-left
{
width:30%;
float:left;
}
div.footer-bottom-middle
{
width:40%;
float:left;
}
p.ribbon-text
{
background:url(../images/electric-city-banner.png) no-repeat;
background-size:100%;
line-height:4.75vw;
font-weight:500;
}
div.footer-bottom-right
{
width:30%;
float:right;
}



/*********************************************************************
Mobile Responsiveness
**********************************************************************/


/*********************************************************************
1400px
**********************************************************************/
@media(max-width:1400px){
div.inner-wrap
{
width: 90vw;
}
div.how-it-works-steps p
{
font-size: 1.4vw;
}

}

/*********************************************************************
1200px
**********************************************************************/
@media(max-width:1200px){
div.callout-text-paragraph 
{
max-width: 80vw;
margin-bottom:5vw;
display:inline-block;
}
div.header
{
height: 66vw;
} 
div.how-it-works p.subheader-text
{
max-width: 80vw;
}
div.menu-top-right ul li a
{
font-size: 1.6vw;
}
p
{
font-size: 2.0vw;
}
p.subheader-text
{
font-size: 2.0vw;
}
div.how-it-works-steps p
{
font-size: 1.8vw;
}
p.ribbon-text
{
font-size: 2.0vw;
line-height:5.5vw;
}
a.callout-button
{
font-size: 1.8vw;
}
h4
{
font-size: 2.0vw;
}

}

/*********************************************************************
768px
**********************************************************************/
@media(max-width:768px){
p
{
font-size:4.25vw;
}
p.subheader-text	
{
font-size:4.25vw;
}
h1
{
font-family: brandon-grotesque, sans-serif;
font-weight: 900;
letter-spacing: 0.05em;
font-size:8vw;
font-style: normal;
color:#fff;
}
h2
{
font-size:7vw;
}	
h3
{
font-size:6.0vw;
}
h4
{
font-size:5vw;
}
a.callout-button
{
padding: 2vw 4vw;
font-size: 3.8vw;
}
div.main-menu
{
height: 14vw;
}
div.menu-top-left
{
width: 60%;
}
div.menu-top-left h1
{
font-size: 4.0vw;
margin-top: 4.5vw;
}
div.menu-top-right
{
width: 40%;
}
div.menu-top-right ul li
{
display:none;
} 
.buy-beans-link
{
display:inline-block !important;
}
div.menu-top-right ul li a
{
font-size: 3.6vw;
margin-top: 4.2vw;
}
div.header
{
height: 138vw;
}
div.callout-header-text
{
color: #4F3728;
text-align: left;
width: 70%;
float: left;
padding-top: 5.5vw;
}
div.header
{
background: url(../images/header-beans.png) no-repeat;
background-position: 43% 0%;
background-size: 310vw;
}
div.logo-area
{
width: 100%;
text-align: left;
}
div.callout-header-text h2
{
font-size:8vw;
}
div.callout-logo
{
width: 25vw;
padding-top: 0vw;
}
div.callout-text-paragraph
{
max-width: 100vw;
margin-bottom: 5vw;
display: inline-block;
width: 100vw;
margin-left: -5vw;
background: #000;
padding: 5vw 0;
margin-top: 5vw;
}
div.callout-text-paragraph p.white-text
{
display:inline-block;
width:90vw;
margin-left:5vw;
text-align: center;
}
div.how-it-works p.subheader-text
{
padding-top: 6vw;
}
div.how-it-works-step-1
{
display:inline-block;
background:url(../images/choose-your-flavour-bw.png) no-repeat;
background-position:50% 0;
padding-top:24vw;
width:100%;	
float:left;
margin:0%;
background-size: 25vw;
}
div.how-it-works-step-1:hover
{
background:url(../images/choose-your-flavour-hover.png) no-repeat;
background-position:50% 0;
background-size: 25vw;
}
div.how-it-works-step-2
{
display:inline-block;
background:url(../images/grind-coffee-bw.png) no-repeat;
background-position:50% 0;
padding-top:24vw;
width:100%;	
float:left;
margin:0%;
background-size: 25vw;
}
div.how-it-works-step-2:hover
{
background:url(../images/grind-coffee-hover.png) no-repeat;
background-position:50% 0;
background-size: 25vw;
}
div.how-it-works-step-3
{
display:inline-block;
background:url(../images/we-deliver-icon-bw.png) no-repeat;
background-position:50% 0;
padding-top:24vw;
width:100%;	
float:left;
margin:0%;
background-size: 25vw;
}
div.how-it-works-step-3:hover
{
background:url(../images/we-deliver-icon-hover.png) no-repeat;
background-position:50% 0;
background-size: 25vw;
}
div.how-it-works-step-4
{
display:inline-block;
background:url(../images/brew-coffee-icon-bw.png) no-repeat;
background-position:50% 0;
padding-top:24vw;
width:100%;	
float:left;
margin:0%;
background-size: 25vw;
}
div.how-it-works-step-4:hover
{
background:url(../images/brew-coffee-icon-hover.png) no-repeat;
background-position:50% 0;
background-size: 25vw;
}
div.how-it-works-steps p
{
font-size:4.25vw;
}
div.how-it-works
{
width: 100%;
padding: 6vw 0;
}











div.product-area-left
{
width:100%;
margin-left:0%;
margin-right:0%;
background:url(../images/coffee-jar.png) no-repeat;
background-position:50% 0;
background-size: 25vw;
padding-top:50vw;
}
div.product-area-middle
{
width:100%;
margin-left:0%;
margin-right:0%;
background:url(../images/coffee-jar.png) no-repeat;	
background-position:50% 0;
background-size: 25vw;
padding-top:50vw;
}
div.product-area-right
{
width:100%;
margin-left:0%;
margin-right:0%;
background:url(../images/coffee-jar.png) no-repeat;	
background-position:50% 0;
background-size: 25vw;
padding-top:50vw;
}
span.dot
{
width: 12vw;
height: 12vw;
display: inline-block;
border-radius: 10vw;
position: absolute;
left: 26vw;
top: 28vw;
}
div.middle-callout-image
{
display: inline-block;
width: 100%;
background: url(../images/barista.png) no-repeat;
height: 128vw;
background-position: 17% 0%;
margin-bottom:5vw;
}
div.featured-roaster-left img
{
margin-top: 10vw;
width: 80%;
max-width: 40vw;
margin-bottom: 5vw;
}
div.featured-roaster-left
{
width: 100%;
float: left;
}
div.featured-roaster-right
{
width: 100%;
float: left;
}
div.featured-roaster-right
{
text-align: center;
}

}