@charset "UTF-8";

/*---------------------------------------------------------------------------------

	Is it too late for coffee?
	v0.1
	
	
/* -------------------------------------------------------------------------------- */
/*	0. CSS Reset
/* -------------------------------------------------------------------------------- */


html, body { margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6, p, blockquote, address, big, cite, code, em, font, img, small, strike, sub, sup, li, ol, ul, fieldset, form, label, legend, button, table, caption, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:normal;
	font-style:normal;
	font-size:100%;
	line-height:1;
	font-family:inherit;
	text-align:left;
}

ol, ul { list-style:none; }

a { outline:none; }


/* -------------------------------------------------------------------------------- */
/*	1. Document setup
/* -------------------------------------------------------------------------------- */


body {
	margin: 0;
	padding: 0;
	border: none;
	color: #222;
	background: #f1f1f1;
	font-family: 'proxima-nova', Helvetica, sans-serif;
	font-size: 18px;
	text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
}

body a {
	color: #B0803E;
	text-decoration: none;
}

body a:hover {
	color: #B0803E;
	text-decoration: none;
}

* { 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
	box-sizing: border-box; 
}

img {
	max-width: 100%;
	height: auto;
}

.hidden { display: none; }
.clear { clear: both; }
.clearleft { clear: left; }
.left { float: left; }
.right { float: right; }

::selection {
	background: #1d1d1d;
	color: #FFF;
}


/* Fonts */


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

}


/* -------------------------------------------------------------------------------- */
/*	2.	Structure
/* -------------------------------------------------------------------------------- */


.fleft { float: left; }
.fright { float: right; }

.one-half, 
.one-third, 
.two-thirds, 
.one-fourth,
.two-fourths,
.three-fourths,
.two-fifths,
.three-fifths { float: left; }

.one-half { width: 47.5%; margin-left: 5%; }
.one-third { width: 30%; margin-left: 5%; }
.one-fourth { width: 21.25%; margin-left: 5%; }
.two-fourths { width: 47.5%; margin-left: 5%; }
.two-thirds { width: 65%; margin-left: 5%; }
.three-fourths { width: 73.75%; margin-left: 5%; }

.one-half:first-child,
.one-third:first-child,
.one-fourth:first-child,
.two-thirds:first-child,
.two-fourths:first-child,
.three-fourths:first-child { margin-left: 0; }


/* Specifically... */


.section {
	width: 100%;
	padding: 100px 0;
	position: relative;
}

.section:last-child:after { content: none; }

.big-padding { padding: 200px 0; }
.small-padding { padding: 50px 0; }

.section.screen-height { height: 94vh; }

.section-inner {
	width: 1240px;
	max-width: 86%;
	margin: 0 auto;
	position: relative;
}

.section-inner.thin { width: 700px; }

.bg-shade {
	background: rgba(0,0,0,0.25);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.bg-shade.medium { background: rgba(0,0,0,0.5); }
.bg-shade.strong { background: rgba(0,0,0,0.75); }


/* -------------------------------------------------------------------------------- */
/*	3.	Intro
/* -------------------------------------------------------------------------------- */


.intro { 
    	-webkit-box-align: center;
        -ms-flex-align: center;
    align-items: center;
	background: #161618;
	color: #B0803E;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
    display: flex;
    	-webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
}

.intro .arrow {
	display: block;
	height: 50px;
	width: 50px;
	border: 25px solid transparent;
	border-top-color: #161618;
	position: absolute;
	z-index: 10;
	bottom: -50px;
	left: 50%;
	margin-left: -25px;
}

.intro-block {
	width: 600px;
	margin: 0 auto;
	border: 6px solid #B0803E;
	font-family: 'proxima-nova-condensed', sans-serif;
}

.top-block,
.bottom-block { 
	position: relative; 
}


/* top block */


.intro p { 
	padding: 20px; 
	font-size: 24px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.top-block {
    	display: -ms-flexbox;
        display: -webkit-box;
        display: -webkit-flex;
    display: flex;
    border-bottom: 6px solid #B0803E;
}

.top-block .question {
    border-right: 6px solid #B0803E;
    font-family: 'proxima-nova', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    width: 50%;
}

.top-block .coffee-icons {
    	-webkit-box-align: center;
        -ms-flex-align: center;
    align-items: center;
    	display: -ms-flexbox;
        display: -webkit-box;
        display: -webkit-flex;
    display: flex;
    	-webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
    width: 50%;
}

.top-block .coffee-icons img {
    height: 3.6rem;
}

.top-block .coffee-icons img + img {
    margin-left: 2rem;
}


/* title */


.intro h1 {
	padding: 28px 0 50px;
	font-family: 'Cubano', sans-serif;
	font-size: 250px;
	line-height: 1;
	text-align: center;
}


/* bottom block */


.bottom-block { border-top: 6px solid #B0803E; }

.bottom-block:after {
	content: "";
	display: block;
	width: 100%;
	height: 6px;
	background: #B0803E;
	position: absolute;
	top: 50%;
	margin-top: -3px;
}

p.weight {
	width: 145px;
	min-height: 122px;
	padding: 13px 0 0;
	border-right: 6px solid #B0803E;
	background: #161618;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}

.weight .number,
.weight .grams {
	display: block;
	text-align: center;
}

.weight .number {
	display: block;
	font-family: 'ministry', sans-serif;
	font-size: 73px;
}

.weight .grams {
	padding-left: 1px;
	font-family: 'proxima-nova', sans-serif;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 5px;
}

p.blend,
p.llc { 
	margin-left: 145px;
}

p.llc { padding-left: 17px; }

p.blend {
	padding: 19px 0 20px;
	font-family: 'proxima-nova', sans-serif;
	font-size: 22px;
	letter-spacing: 2px;
	font-weight: 700;
	text-align: center;
}

p.llc,
p.city {
	padding-bottom: 17px;
	font-weight: 700;
	letter-spacing: 2px;
}

p.city {
	padding-left: 19px;
	border-left: 6px solid #B0803E;	
	position: absolute;
	bottom: 0;
	right: 0;
}

.city span {
	font-family: 'Arial', sans-serif;
	font-weight: 400;
}


/* -------------------------------------------------------------------------------- */
/*	4.	About
/* -------------------------------------------------------------------------------- */


.about { 
	background: #f1f1f1;
	color: #111; 
	padding-bottom: 0;
}

.about:after { content: none; }

.about h3 {
	padding-bottom: 22px;
	margin-bottom: 55px;
	font-family: 'proxima-nova-extra-condensed', sans-serif;
	font-size: 3.5em;
	font-weight: 900;
	text-transform: uppercase;
	color: #B0803E;
	text-align: center;
	position: relative;
}

.about h3:before {
	content: "";
	display: block;
	height: 3px;
	width: 256px;
	background: #B0803E;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -128px;
}

.about h3:after {
	content: "\2666";
	display: block;
	width: 30px;
	padding: 5px 0;
	background: #f1f1f1;
	font-family: 'Arial', sans-serif;
	font-size: 29px;
	line-height: 0;
	color: #333;
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-bottom: -2px;
	margin-left: -15px;
}

.about p { 
	font-family: 'abril-text', serif;
	font-size: 1.3em; 	
	line-height: 1.55; 
	margin-top: 1.25em;
}

.about p:first-child { margin-top: 0; }

.about a { 
	color: #222; 
	border-bottom: 1px solid #222;
}

.about a:hover { 
	color: #B0803E; 
	border-bottom-color: #B0803E;
	text-decoration: none;
}

.about blockquote {
	width: 397px;
	float: right;
	padding: 0 0 20px 52px;
	margin-right: -150px;
	margin-left: 20px;
	font-family: 'proxima-nova-condensed', sans-serif;
	font-size: 1.5em;
	line-height: 1.2;
	font-weight: 700;
	text-align: left;
	position: relative;
}

.about blockquote:before { 
	content: "“";
	display: block;
	font-weight: 900;
	font-size: 84px;
	line-height: 78px;
	color: #B0803E;
	position: absolute;
	top: 0;
	left: 0;
}

.about blockquote cite {
	display: block;
	margin-top: 14px;
	font-size: 1.1rem;
	line-height: 1.1;
	font-weight: 700;
	color: #666;
	text-align: left;
}

.about blockquote cite:before { content: "— "; }

.about em { font-style: italic; }



/* -------------------------------------------------------------------------------- */
/*	5.	Credits
/* -------------------------------------------------------------------------------- */


.credits { 
	background: #f1f1f1; 
	padding: 100px 0;
	text-align: center;
}

.credits h4 { 
	display: inline-block;
	padding: 0 0 12px;
	background: #f1f1f1;
	font-family: 'proxima-nova-extra-condensed', sans-serif;
	font-size: 1.15em;
	font-weight: 900;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: #666;
	position: relative;
	z-index: 2;
}

.credits span {
	display: block;
	margin-bottom: 4px;
	font-family: 'proxima-nova', sans-serif;
	font-size: 0.7em;
	font-weight: 700;
	text-align: center;
}

.credits h4:before {
	content: "";
	display: block;
	height: 2px;
	width: 150px;
	background: #B0803E;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -75px;
}

.credits h4:after {
	content: "\2666";
	display: block;
	width: 24px;
	padding: 5px 0;
	background: #f1f1f1;
	font-family: 'Arial', sans-serif;
	font-size: 24px;
	line-height: 0;
	color: #333;
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-bottom: -3px;
	margin-left: -12px;
}


.credits a { color: #B0803E; }
.credits a:hover { text-decoration: underline; }


/* -------------------------------------------------------------------------------- */
/*	6.	Media queries
/* -------------------------------------------------------------------------------- */


@media (max-height: 620px) {

	/* intro */
	
	.intro-block h1 { font-size: 175px; }

}

@media (max-height: 520px) {

    /* intro */
    
    .top-block {
        display: none;
    }

}


@media (max-width: 1080px) {
	
	
	.section.screen-height { height: 90vh; }
	
	/* about */
	
	.about blockquote { margin-right: 0; }
	
	
}


@media (max-width: 680px) {
	
	
	/* intro */
	
	.intro-block { 
		width: 500px; 
	}
    
    .top-block .coffee-icons img + img {
        margin-left: 1rem;
    }
	
	.intro-block h1 { font-size: 220px; }
	
	.weight { display: none; }
	
	p.blend,
	p.llc { 
		margin-left: 0; 
		text-align: left;
		padding: 20px;
	}
	
	p.llc,
	p.city { padding: 20px 20px 17px 20px; }
	
	/* about */
	
	.about .post-content { font-size: 0.9em; }
	
	.about blockquote {
		float: none;
		width: 100%;
		margin-left: 0;
		padding-bottom: 0;
		font-size: 1.6em;
	}
	
	.about blockquote:before { line-height: 74px; }
	
	
}


@media (max-width: 600px) {
	

	/* about */	
	
	.about { padding: 80px 0 0; }
	
	.about .post-content { font-size: 0.9em; }
	
	/* credits */
	
	.credits { padding: 75px 0; }
	
	
}


@media (max-width: 600px) and (orientation: landscape) {
	
	
	/* intro */
	
	.intro-block { 
		width: 332px;
	}
	
	.intro-block h1 { 
		font-size: 100px; 
		padding: 6px 0 10px;
	}
	
	.bottom-block:after { display: none; }
	
	p.blend { 
		padding: 15px 15px 13px;
		border-bottom: none; 
		font-family: 'proxima-nova-extra-condensed', sans-serif;
		text-align: center;
	}
	
	p.llc,
	p.city { display: none; }
	
	/* credits */
	
	.credits { padding: 50px 0; }
	
	
}


@media (max-width: 500px) {
	
	
	/* intro */
	
	.intro-block { 
		width: 288px; 
	}
    
    .top-block {
            -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .top-block .question,
    .top-block .coffee-icons {
        width: 100%;
    }
    
    .top-block .question {
        border-bottom: 6px solid #B0803E;
        border-right: none;
        font-size: 21px;
        line-height: 1.1;
        padding: 12px 0 12px 0;
        text-align: center;
    }
    
    .top-block .coffee-icons {
        padding: 15px 0 15px 0;
    }
    
    .top-block .coffee-icons img {
        height: 3rem;
        width: auto;
    }
    
    .top-block .coffee-icons img + img {
        margin-left: 2.6rem;
    }
	
	.intro-block h1 { 
		font-size: 145px; 
		padding: 10px 0 25px;
	}
	
	.bottom-block:after { display: none; }
	
	p.blend {
		padding: 15px 0;
		border-bottom: 6px solid #B0803E;
		font-family: 'proxima-nova-extra-condensed', sans-serif;
		font-size: 21px;
		letter-spacing: 1px;
		text-align: center;
	}
	
	p.llc,
	p.city {
		padding: 15px 15px 12px 15px;
		font-family: 'proxima-nova-extra-condensed', sans-serif;
		font-size: 17px;
		letter-spacing: 1px;
	}
	
	p.city { padding-left: 16px; }
	
	/* about */
	
	.about { padding: 60px 0 0; }
	
	.about h3 { 
		font-size: 2.35em; 
		padding-bottom: 14px;
		margin-bottom: 30px;
	}
	
	.about h3:before { 
		width: 180px; 
		margin-left: -90px;
	}
	
	.about .post-content { font-size: 0.8em; }
	
	.about p { line-height: 1.45; }
		
}

@media (max-width: 400px) {
	
	
	/* intro */
	
	.intro .arrow {
		width: 40px;
		height: 40px;
		border-width: 20px;
		margin-left: -20px;
		bottom: -40px;
	}
	
	/* about */
	
	.about h3 { 
		font-size: 2.1em; 
		padding-bottom: 15px;
	}
	
	.about .post-content { font-size: 0.75em; }
	
	.about p { line-height: 1.5; }
	
	.about blockquote { 
		padding-left: 48px; 
		font-size: 1.6em;
		line-height: 1.2;
	}
	
	.about blockquote:before { line-height: 73px; }
	
	.about blockquote cite { font-size: 1rem; }
	
	/* credits */
	
	.credits { padding: 50px 0; }
	
	
}