html { background: #fff; }
html, body { margin: 0; text-align: center; position: relative; font-family: "brandon-grotesque"; font-weight: 400; font-style: normal; color: #000; overflow-x: hidden; }
img { outline: none; width: auto; max-width: 100%; margin: 0 auto; margin-bottom: -3px; }

h1 { font-size: 4.25vw; line-height: 1.25em; }
h2 { font-size: 2.7vw; line-height: 1.25em; }
h2.major { font-size: 3vw; line-height: 1.25em; }
h2.minor { font-size: 2.5vw; line-height: 1.25em; }
h3 { font-size: 1.65vw; line-height: 1.25em; }
h3.fixed { font-size: 18px; line-height: 1.25em; }
h4 { font-size: 18px; line-height: 1.25em; }

hr {
    border: 0;
    height: 1px;
    background: #333;
    width: 70%;
}
.smoothy { font-family: 'smoothysans'; }

span.break { display: block; }
span.alwaysBreak { padding-top: 30px;}

a { color: #000; transition: all 0.3s cubic-bezier(.25,.8,.25,1); }
a:hover { text-decoration: none; }

.button, header .social .button { display: inline-block; background-color: #99d5c6; font-size: 18px; width: auto; padding: 14px 30px; color: #fff; border-radius: 2px; text-decoration: none; letter-spacing: 2px; font-family: 'smoothysans'; background: -webkit-linear-gradient(70deg, #d53369 0%, #dd5917 100%); background: -moz-linear-gradient(70deg, #d53369 0%, #dd5917 100%); background: -o-linear-gradient(70deg, #d53369 0%, #dd5917 100%); background: linear-gradient(70deg, #d53369 0%, #dd5917 100%); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); transform: scale(1) translateZ(0); -webkit-font-smoothing: subpixel-antialiased; }
.button:hover, header .social .button:hover { transform: scale(1.1) translateZ(0); box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }
.button:active, header .social .button:active { transform: scale(1.08) translateZ(0); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.16) inset, 0 3px 6px rgba(0,0,0,0.23) inset; }

.button.centered { position: absolute; bottom: 50px; left: 50%; transform: scale(1) translateZ(0) translateX(-50%); display: none; }

.button.color { transition: all 0.5s ease; padding: 16px 32px; transform: scale(1.0) translateZ(0); margin-top: 20px; margin-right: 10px; }
.button.color:hover { transform: scale(1.0) translateZ(0); }
.button.color:active { transform: scale(1.0) translateZ(0); } 

.button.flat { background: rgba(0,0,0,0); border: 2px solid #fff; box-shadow: none; margin-top: 20px; transition: all 0.5s ease; }
.button.flat:hover { transform: scale(1) translateZ(0); box-shadow: none; border: 2px solid #000; color: #000; }
.button.flat:active { transform: scale(1) translateZ(0); box-shadow: none; border: 2px solid #000; background: rgba(0,0,0,1); color: #fff; } 

.button.flat.white { background: rgba(255,255,255,0); border: 2px solid #fff; color: #fff; opacity: 0.99; }
.button.flat.white:hover { background: rgba(255,255,255,1); color: #000; }
.button.flat.white:active { border: 2px solid #000; background: #000; color: #fff; } 

.button.flat.black { background: rgba(0,0,0,0); border: 2px solid #000; color: #000; }
.button.flat.black:hover { background: rgba(0,0,0,1); color: #fff; }
.button.flat.black:active { border: 2px solid #fff; background: #fff; color: #000; } 

.button .tooltip { visibility: hidden; opacity: 0; font-family: "brandon-grotesque"; font-weight: 400; letter-spacing: 0; background-color: rgba(0,0,0,0.5); color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; width: 280px; top: 150%; left: 50%; margin-left: -140px; z-index: 99; transition: all ease-in 0.5s; }
.button .tooltip::after { content: " "; position: absolute; bottom: 100%;  /* At the top of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent rgba(0,0,0,0.5) transparent; }

.button:hover .tooltip { visibility: visible; opacity: 1.0; top: 120%; }

a.pagination { position: absolute; top: 0; padding: 20px; }
a.pagination.left { left: 0; }
a.pagination.right { right: 0; }

h2 a.button { line-height: 18px; }
.footerLinks a { padding: 0px 8px; text-decoration: none; line-height: 2em; }
.footerLinks a i { margin-right: 6px; }
.footerLinks a:hover { text-decoration: underline; }
.footerLinks a:hover i { text-decoration: none; }

p { padding: 10px 0; font-size: 18px; line-height: 21px; }

#santa { background-image: url('/resources/santa-hat.png'); background-size: 100%; width: 100px; height: 75px; position: absolute; top: 5px; left: 50vw; transform: translateX(-199px); z-index: 300; pointer-events: none; }
#christmasLights { max-width: none; height: 310px; pointer-events: none; user-select: none; z-index: 1; width: auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%); mix-blend-mode: multiply; }

#circleLogo { position: fixed; left: -50px; width: 170px; top: -60px; -webkit-animation: rotation 20s infinite linear; animation: rotation 20s infinite linear; z-index: 999; }

@-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } }
@keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } }


header { height: auto; width: 100vw; padding: 0;  z-index: 100; position: relative; }
header h1 { margin: auto; padding: 5vw 0 10px 0; display: block; transition: letter-spacing 0.5s ease; }
header h4 { font-size: 14px; padding-bottom: 5vw; letter-spacing: 2px; text-transform: uppercase; opacity: 0; height: 0; }
header h1:hover { letter-spacing: 2px; }
header .social { padding: 0px 30px; font-size: 18px; position: absolute; top: 10px; }
header .social.left { left: 10px; }
header .social.right { right: 10px; }
header .social a { display: inline-block; color: #000; text-decoration: none; padding: 5px 8px; border-radius: 3px; font-family: 'smoothysans'; }
header .logo { width: 300px; height: auto; outline: none; margin-top: 10px; position: relative; }

header nav { position: relative; top: 0; left: 0; right: 0; height: 36px; margin: 0; padding: 100px 0 0 0; text-align: center; }
header nav a { position: relative; height: 36px; font-family: 'smoothysans'; font-size: 18px; color: #000; font-weight: normal; line-height: 36px; text-transform: uppercase; letter-spacing: 1px; padding: 0 20px; text-decoration: none; display: inline-block; border-bottom: 0px solid #000; transition: all 500ms ease; top: 0; -webkit-transform: translate3d(0,0,0); }
header nav a:nth-of-type(1) { margin-right: 400px; margin-left: -36px; }
header nav a:nth-of-type(3) { position: absolute; right: 25px; top: 35px; }


section { position: relative; padding-left: 10vw; padding-right: 10vw; }
section.fullPage { height: 56.25vw; }
section.halfPage { height: 35vw; }
section.noPadding { padding-left: 0vw; padding-right: 0vw; }

section.gradient { background: -webkit-linear-gradient(70deg, #d53369 0%, #dd5917 100%); background: -moz-linear-gradient(70deg, #d53369 0%, #dd5917 100%); background: -o-linear-gradient(70deg, #d53369 0%, #dd5917 100%); background: linear-gradient(70deg, #d53369 0%, #dd5917 100%); }

#home { background: url('/resources/home-bg.jpg') center center no-repeat scroll; background-size: 100%; margin-top: -70px; min-height: 600px; }
#home.slant { background: url('/resources/home-bg.jpg') center center no-repeat scroll; background-size: 100%; margin-top: -70px; }
#home.chemex { background: url('/resources/chemex.png') center right no-repeat scroll; background-size: 100%; margin-top: -205px; min-height: 100vh; height: auto; }
#home.new { background: url('') center right no-repeat scroll; background-size: 100%; margin-top: -205px; min-height: 100vh; height: auto; }
#home h3.verticalAlign { top: 37.5%; }
#home h2.alignRight { position: relative; right: 50%; }
#home h3.bottom20 { position: absolute; bottom: 20%; }
#home .button.bottom20 { position: absolute; bottom: 30%; left: 10vw; }
#home .button.bottom { position: absolute; bottom: -20px; }

#home.splash { padding: 0; background: #F0B1A0; background: linear-gradient(315deg, #F0B1A0, #BD9EB7); text-align: left; }
#home.splash.christmas { padding: 0; background-color: #F0B1A0; text-align: left; background: linear-gradient(315deg, #F0B1A0, #BD9EB7);
}



#home.splash .pattern { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url('/resources/coffeepattern.png') repeat-x center center; background-size: cover; opacity: 0.5; }
#home.splash .colorWash { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #e2bda3; background: linear-gradient(218deg, rgba(226,189,163,1) 0%, rgba(164,119,87,1) 100%); opacity: 0.4; }
#home.splash .slides .colorWash { background: rgba(255,255,255,0.0); opacity: 1.0; }
#home.splash .hero { position: relative; top: calc(50vh + 205px); transform: translateY(calc(-50% - 120px)); padding-left: calc(450px + 10vw); }
#home.splash.christmas .hero { position: relative; top: 220px; transform: translateY(0); padding-left: 10vw; }
#home.splash .linkSlider { position: absolute; width: 450px; height: 560px; top: calc(50vh + 205px); transform: translateY(calc(-50% - 120px)); left: 5vw; }
#home.splash .linkSlider .slides li { float:left; display: block; position: relative; width: 450px; height: 560px; background-size: 450px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  transition: all 0.3s cubic-bezier(.25,.8,.25,1); overflow: hidden; }
#home.splash .linkSlider .slides li:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); }


#home.splash li.global { background-color: #fff; background-image: url('/resources/global-roaster.jpg'); } 
#home.splash li.producing { background-color: #fff; background-image: url('/resources/producing-country.jpg'); } 

#home.splash a .linkBlock { display: block; position: absolute; bottom: 0; width: 100%; margin: 0; padding: 30px; background: rgba(255,255,255,0.85); }
#home.splash a .linkBlock:hover { cursor: pointer; }
#home.splash a .linkBlock .button { display: none; }

#home.splash .subTitle:before, #home.splash .subTitle:after { display: none; }
#home.splash .subTitle { font-size: 32px; }


@keyframes floatY {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translateY(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translateY(-10px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translateY(0px);
	}
}

#upcomingRoaster { position: relative; width: 50vw; margin-left: 50vw; }
#upcomingRoaster .roasterProfile { max-width: 600px; min-width: 300px; width: 40vw; border-radius: 50%; position: absolute; right: -40px; top: 200px; 
	box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
	transform: translateY(0px) translateX(0px) translateZ(0);
	animation: floatY 6s ease-in-out infinite;
}
#upcomingRoaster .roasterLogo { width: 450px; position: relative; padding: 10px; background: rgba(255,255,255,.75); }
#upcomingRoaster p, #upcomingRoaster h2, #upcomingRoaster h3 { position: relative; padding: 10px; background: rgba(255,255,255,.75); display: inline-block; clear: both; }
#upcomingRoaster .date { text-transform: uppercase; font-weight: 700; font-size: 20px; letter-spacing: 2px; }
#aboutTheRoaster { position: absolute; left: 20%; top: 600px; }

#smallerWorld { position: absolute; bottom: 30px; }

#map { position: absolute; top: 0; left: 0; width: 55vw; opacity: 0.7; }

#subBox { position: absolute; left: 55%; top: 30%; width: 30%; }
#subBox img { width: 100%; box-shadow: 40px 40px 0 #f69797, 40px 40px 59px 0px rgba(0,0,0,0.2); margin-bottom: 50px; }
#subBox.grower img { box-shadow: 40px 40px 0 #4ABAE4, 40px 40px 59px 0px rgba(0,0,0,0.2); }

#subBox .tooltip { visibility: hidden; opacity: 0; font-family: "smoothysans"; font-size: 16px; font-weight: 400; letter-spacing: 2px; background-color: rgba(0,0,0,0.5); color: #fff; text-align: center; padding: 14px 0; border-radius: 6px; position: absolute; width: 140px; top: -100px; left: 50%; margin-left: -70px; z-index: 99; transition: all ease-in 0.5s; }
#subBox .tooltip::after { content: " "; position: absolute; top: 100%;  /* At the top of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(0,0,0,0.5) transparent transparent transparent; }
#subBox:hover .tooltip { visibility: visible; opacity: 1.0; top: -60px; }


#rotator.new { padding-top: 280px; }

#globallyInspired1 { display: block; }
#globallyInspired2 { display: none; }

#aboutUs p { font-style: oblique; }
#aboutUs p.alignLeft { text-align: justify; }
#aboutUs article { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; margin: auto; padding: 30px 0; max-width: 850px; vertical-align: text-top; }

#christmas { background-color: #99d5c6; background: -webkit-linear-gradient(70deg, #d74933 0%, #de1616 100%); background: -moz-linear-gradient(70deg, #d74933 0%, #de1616 100%); background: -o-linear-gradient(70deg, #d74933 0%, #de1616 100%); background: linear-gradient(70deg, #d74933 0%, #de1616 100%); }
#christmas .bg { background-image: url('/resources/wrappingpaper.png'); background-size: cover; background-position: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }


#intro { }
#intro .col img { height: 120px; padding-bottom: 10px; }

#globe .textBox { background: rgba(153, 213, 198, 0.7); padding: 10px 20px; width: 75%; margin: auto; }
#globe .textBox.pink { background: rgba(246, 151, 151, 0.7); }
#globe .textBox.yellow { border-radius: 5px; background: rgb(250,172,168); background: linear-gradient(219deg, rgba(250,172,168,0.7) 0%, rgba(221,214,243,0.7) 100%); }

#globe .col { height:39.583333333333336vw; }
#timelineVid { width: 100vw; height: auto; }
#unboxVid { width: 33.333333vw; height: auto; position: absolute; left: 4vw; top: 50%; transform: translateY(-50%); }

.subscriptionOption { display: inline-block; width: 300px; height: 400px; border-radius: 12px; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.06); padding: 20px 10px; position: relative; -webkit-font-smoothing: subpixel-antialiased; }
.subscriptionOption:nth-of-type(2) { transform: scale(1.1); box-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.13); position: absolute; left: calc(50vw - 150px); z-index: 30; }
.subscriptionOption:nth-of-type(1) { margin-right: 300px; }

.subscriptionOption img { width: 50%; }
.subscriptionOption h2 { font-weight: 100; padding: 1vw 0 0 0; }
.subscriptionOption p { font-size: 14px; font-style: oblique; }
.subscriptionOption p.monthly { margin: -15px 0 0 0; }


.subBlock { width: 80%; padding: 0 0 10px 0; margin: auto; }
.subBlock:nth-of-type(2) { border-top: 1px solid #333; padding: 10px 0 0 0; }

.strong, strong { font-weight: 700; }
.stronger { font-weight: 500; }

#product #container { position:relative;top:-20px; }
#product .content { height:50vw; background-size:100%; }
#terms .content { max-width: 800px; text-align: left; margin: auto; }
#terms ul { list-style: inside disc; }

em, .oblique { font-style: oblique; } 

.subscriptionOption .ribbon {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 0;
	height: 50px;
	position: absolute;
	top: 0; right: 20px;
	border: 25px solid #f75e4d;
	border-top: 0 solid;
	border-bottom: 15px solid rgba(255,255,255,0);
	font-weight: 700;
	color: #fff;
	-o-text-overflow: clip;
	text-overflow: clip;
	opacity: 0.75;
}
.subscriptionOption .ribbon p { position: relative; left: -12px; font-size: 16px; text-align: center; }
.subscriptionOption .ribbon p span { font-size: 18px; }


.accent { position: relative; opacity: 0.99; }
.accent:after { content: ''; z-index: -1; position: absolute; display: block; top: 1.1vw; bottom: -0.2vw; left: -0.25vw; right: -0.25vw; background: #f69797; }
.accent.grower:after { background: #4ABAE4; }


#giftcard { background-color: #7fc6be; background-image: url('/resources/coffeepattern.png'); background-attachment: scroll; background-position: center center; }
#giftcard .box { background: #fff; width: auto; display: inline-block; padding: 30px; margin: 30px auto; clear: both; position: relative; }
#giftcard h2 { color: #7cc7c0; }

.giftcardOption { display: inline-block; width: 150px; height: 200px; color: #880c0c; background: rgba(124,199,192,0.7); box-shadow: 0 3px 6px rgba(0,0,0,0.06); padding: 20px 10px; position: relative; -webkit-font-smoothing: subpixel-antialiased; padding: 15px; margin: 20px 10px; border: 5px solid transparent; outline: 5px solid rgba(124,199,192,0.7); background-clip: padding-box; } 
.producing .giftcardOption { width: 300px; } 
#giftcard .producing .giftcardOption .ribbon { top: -10px; right: 10px; }

#giftcard .giftcardOption h2 { color: rgba(255,255,255,0.8); padding-bottom: 30px; }

#giftcard .subscriptionOption img { padding-top: 30px; }

#giftcard .ribbon {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	width: 0;
	height: 60px;
	position: absolute;
	top: 0; right: 35px;
	border: 30px solid #e5232a;
	border-top: 0 solid;
	border-bottom: 20px solid rgba(255,255,255,0);
	font-weight: 700;
	color: #fff;
	-o-text-overflow: clip;
	text-overflow: clip;
	opacity: 0.75;
}

#giftcard .ribbon p { position: relative; left: -12px; font-size: 16px; text-align: center; }
#giftcard .ribbon p span { font-size: 18px; }


.giftCardBox { width: 450px; margin: 30px auto; background: #fff; padding: 30px 12px; border-radius: 12px; position: relative; }
.giftCardBox h4 { color: #89d3da; text-align: left; }
.giftCardBox .button { position: absolute; right: 20px; top: 20px; }

.paddingTop { padding-top: 60px; }
.paddingBottom { padding-bottom: 60px; }
.paddingTopSM { padding-top: 30px; }
.paddingBottomSM { padding-bottom: 25px; }
.letterSpacing { letter-spacing: 0.2em; }
.letterSpacing1 { letter-spacing: 0.1em; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.alignCenter { text-align: center; }
.whiteText, .whiteText a { color: #fff; }
.underline { text-decoration: underline; }
.hasMargin { margin: 30px auto; }
.marginMinus { margin-bottom: -10px; }
.marginMinusTop { margin-top: -10px; }
.uppercase { text-transform: uppercase; }


.verticalAlign { position: relative; top: 50%; transform: translateY(-50%); }  
.horizontalAlign { left: 50%; transform: translateX(-50%); }  

.flex-grid { display: flex; }
.col { flex: 1; }
#coffeeArchive .flex-grid article { flex: 0 0 35vw; background-image: url('/resources/coffeepattern.png'); background-attachment: scroll; background-position: center center; padding: 15px; margin: 20px 0; border: 5px solid transparent; outline: 5px solid rgba(255,255,255,0.3); background-clip: padding-box; justify-content: space-evenly; }
#coffeeArchive .flex-grid article:nth-of-type(5) { flex: 0 0 60vw; }
#coffeeArchive .flex-grid article.producing country { flex: 0 0 60vw; }

#coffeeArchive a { text-decoration: none; color: #000; transition: color 0.5s ease; }
#coffeeArchive a:hover { color: #fff; }

#coffeeArchive .bodyText { padding: 30px 15vw;}

.flex-grid-two, .flex-grid-three, .flex-grid-four { display: flex; justify-content: space-around; flex-wrap: wrap; }
.flex-grid-two .col { width: 40%; }
.flex-grid-three .col { width: 32%; }

.flex-pad .col { margin: 15px; }

.socialLink a { text-decoration: none; padding: 5px 10px; }

.bio { display: flex; margin: 30px 0; }
.bio .image { flex: 0 0 25vw; }
.bio img { border-radius: 50%; }
.bio .content { flex: 0 0 50vw; margin-left: 5vw; }
.bio .content p { text-align: left; }

.logoList { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.logoList a { flex: 17.5% 0 0; opacity: 0.5; padding-bottom: 20px; }
.logoList a img { padding: 0 2%; max-height: 80px; width: auto; }
.logoList a:nth-of-type(3), .logoList a:nth-of-type(8) { flex: 30% 0 0; }
.logoList a:nth-of-type(10) ~ a { flex: 10% 0 0; padding: 10px; }
.logoList a:nth-of-type(10) ~ a img { padding: 0; max-height: 50px; }

.logoList div.break { flex-basis: 100%;  height: 0; }
.logoList a:hover { opacity: 1.0; }

.logoList.upcoming { flex-wrap: wrap; }
.logoList.upcoming a { flex: 20% 0 0; }
.logoList.upcoming a:nth-of-type(3) { flex: 20% 0 0; }
.logoList.upcoming a:nth-of-type(4) { flex: 60% 0 0; margin-top: 30px; }
.logoList.upcoming a:nth-of-type(4) img { max-height: 40px; }

.logoList.featuredIn a:nth-of-type(1), .logoList.featuredIn a:nth-of-type(3) { flex: 30% 0 0; }
.logoList.featuredIn a:nth-of-type(2) { flex: 10% 0 0; margin: 0 30px; }

.text-wrapper { text-align: center; padding: 10px 0 30px 0; }
.text-wrapper h2 { display: inline-block; font-size: 36px; position: relative; font-weight: 400; font-style: oblique; }

.animated-city { display: inline-block; font-size: 36px; text-align: left; }
.animated-country { display: inline-block; font-size: 36px; text-align: right; }

#giftcardGrid { display: grid; justify-content: center; align-items: center; gap: 50px; grid-auto-flow: column; }
#giftcardGrid h3 { font-size: 28px; }
#giftcardGrid div { text-align: left; }
#giftcardButton { border-radius: 14px; padding: 150px 110px 80px 110px; margin: 0; position: relative; font-size: 22px; }
#giftcardButton:after { content: ''; background: #f0f0f0; width: 100%; height: 40px; position: absolute; left: 0; right: 0; top: 40px; }


#gallery { margin-bottom: 30px; }
#gallery .grid-sizer { width: 25vw; }
#gallery .item { background: #fff; display: block; float: left; width: 25vw; height: 14.0625vw; margin: 0; border: none; overflow: hidden; }
#gallery .item.w2 { width: 50vw; height: 28.125vw; }
#gallery .item.h2 { height: 28.125vw; }
#gallery .item.full { width: 100vw; height: 56.25vw; }

#gallery img { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: auto; max-width: 100%; }
#gallery .item.h2 img { width: auto; height: 100%; max-height: 100%; max-width: 300%; }

#gallery img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
#gallery .item:hover img { width: 120%; max-width: 120%; }
#gallery .item.h2:hover img { height: 120%; max-height: 120%; width: auto; max-width: 400%; }

.arrow {
  width: 40px;
  height: 40px;
  background-image: url('/resources/arrow.svg');
  background-size: contain;
}

.arrow.bottom {
  position: fixed;
  bottom: 30px;
  left: 50%;
  margin-left:-20px;
}

.arrow.left {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.arrow.right {
	-webkit-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	float: right;
}


.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media only screen and (max-width: 1200px) and (min-width: 1100px) {
	span.break12 { display: block; }
	.button.color .tooltip {  top: 3px; left: calc(100% + 50px); margin-left: 0;  }
	.button.color .tooltip::after { bottom: 50%; /* At the top of the tooltip */ left: 0; right: 100%; margin-bottom: -5px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent rgba(0,0,0,0.5) transparent transparent; }
	.button.color:hover .tooltip { visibility: visible; opacity: 1.0; top: 3px; left: calc(100% + 10px); }
}
@media only screen and (max-width: 1100px) {
	section { padding-left: 2vw; padding-right: 2vw; }
	#home h3.verticalAlign { padding-right: calc(25px - 2vw); }
	#home .button.bottom20 { left: 2vw; }

	#home.splash { padding: 0 0 30px 0; }
	#home.splash .hero { position: relative; top: 0; padding: 215px 5vw 50px 5vw; transform: none; }
	#home.splash .linkSlider { position: relative; width: 90vw; height: 400px; top: 0; left: 0; transform: none; margin: 20px 5vw;  }
	#home.splash .linkSlider .slides li { width: 90vw; height: 400px; background-size: auto 400px; background-repeat: no-repeat; background-position: right center; }
	#home.splash a .linkBlock { display: block; position: absolute; bottom: 50%; left: 0; transform: translateY(50%); width: 60%; margin: 0; padding: 30px; background: transparent; }
	#home.splash a .linkBlock .button { display: inline-block; }

	#home.splash.christmas { height: 1100px; }


	h2.major { font-size: 4vw; padding-top: 50px; }
	#home.splash.christmas h2.major { padding-top: 0px; }

	#upcomingRoaster { width: 100vw; margin-left: 0vw; }
	#upcomingRoaster .roasterLogo { width: 275px;  }
	#aboutTheRoaster { left: auto; right: 320px; top: 320px; }
	#upcomingRoaster .date, #upcomingRoaster h3 { font-size: 14px; }


	.bio .image { flex: 0 0 33vw; }
	.bio .content { flex: 0 0 58vw; margin-left: 5vw; }

	#giftcardGrid { display: block; gap: 0; grid-auto-flow: unset; }
	#giftcardGrid h3 { font-size: 28px; }
	#giftcardGrid div { text-align: center; margin-top: 50px; }

}

@media only screen and (max-width: 950px) {
	.subscriptionOption { width: 240px; height: 360px; }
	.subscriptionOption:nth-of-type(2) { left: calc(50vw - 120px); }
	.subscriptionOption:nth-of-type(1) { margin-right: 240px; }
	.subscriptionOption h2 { font-size: 4vw; }
	.logoList a img { max-height: 60px; }
	.logoList.upcoming a:nth-of-type(4) img { max-height: 30px; }


}

@media only screen and (max-width: 900px) {
	#intro .flex-grid { display: flex; flex-wrap: wrap; }
	#intro .col { flex: 0 0 50%; padding-top: 10px; margin: 0 25%; }
	#home.new { background-size: auto 100%; }

	h2.major { font-size: 6vw; padding-top: 50px; }
	#home.splash a .linkBlock { width: auto; }

	#aboutTheRoaster { left: auto; right: 190px; top: 260px; }

}

@media only screen and (max-width: 850px) {

	header .social { padding: 0px 10px; }
	header .social.left { left: 10px; }
	header .social.right { right: 10px; }
	header .social a.button { display: none; }
	header nav { position: absolute; top: 35px; right: 15px; padding: 0; z-index: 30; text-align: right; }
	header nav a { padding: 0 10px;  }
	header nav a:nth-of-type(1) { margin-right: 0; margin-left: 0; }
	header nav a:nth-of-type(3) { position: relative; right: 0; top: 0; }
	a.button.centered { display: inline-block; }
	#home a.button.bottom { bottom: 20px; }
	#home a.button.bottom:hover {transform: translateX(-50%); }
	
	#subBox { left: 25%; top: 20%; width: 50%; z-index: 4; }
	#home h2.alignRight { z-index: 15; right: 25%; margin-top: 35%; text-shadow: 0 0 30px #000; margin-bottom: 100px; }
	.accent { text-shadow: none; }
	.accent:after { box-shadow: 0 0 30px rgba(0,0,0,0.5); }


	
	#globallyInspired2 { display: block; }
	#globallyInspired1 { display: none; }

	#product #container { top:30px; }
	#product .content { height:75vw; background-size: cover; background-position: bottom right; }

	#coffeeArchive .flex-grid article { flex: 0 0 90vw; max-width: 500px; margin: 20px auto; flex-wrap: wrap; }

	#globe .textBox { display: none; }


	h1 { font-size: 6vw; }
	h2 { font-size: 3.5vw; }
	h2.minor { font-size: 3.25vw; }
	h3 { font-size: 3vw; }
	h4 { font-size: 18px; }
	
	a.pagination { font-size: 10px; }


	#home { margin-top: 0px; }
	#home.new { margin-top: -210px; }
	#home h3.verticalAlign { top: 25%; }
	#home h3.bottom20 { display: none; font-size: 14px; }
	#home .button.bottom20 { display: none; }

	#home.splash.christmas { height: 1160px; }

	
	#rotator.new { padding-top: 200px; }
	h2.minor.paddingBottom { padding-bottom: 30px; }

	#home .text-wrapper { z-index: 20; position: relative; top: -50px; }
	.text-wrapper h2 { padding-top: 42px; }

	#timelineVid { width: 120vw; height: auto; margin-left: -10vw; margin-right: -10vw; }
	
}

@media only screen and (max-width: 750px) {
	
	#home.splash .slides li.global { background-color: #efeef3; background-position: left center; text-align: right; } 
	#home.splash .slides li.global a .linkBlock { right: 0; left: auto; }

	#home.splash .slides li.producing { background-color: #dddce4; } 
	#home.splash .slides .colorWash { background: rgba(255,255,255,0.75); }

	
	#upcomingRoaster .roasterProfile { min-width: 225px; right: -20px; top: 210px; }
	#aboutTheRoaster { right: 150px;  }
	#smallerWorld { width: 70vw; }


	.subscriptionOption { width: 90vw; height: 270px; display: flex; flex-wrap: wrap; margin: 30px auto; box-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.13); }
	.subscriptionOption:nth-of-type(2) { position: relative; left: 0; transform: scale(1); }
	.subscriptionOption:nth-of-type(1) { margin-right: auto; }
	.subBlock { flex: 0 0 50%; padding: 0 10px 0 0; margin: auto; }
	.subBlock:nth-of-type(2) { border-top: none; border-left: 1px solid #333; padding: 0 0 10px; }
	.subBlock:nth-of-type(3) { flex: 0 0 100%; height: 48px; padding: 10px 0 0 0; margin-top: -20px; padding: 10px 0 0 0; background: #fff; }
	.subBlock p.desc { padding-top: 20px; }
	.subscriptionOption .ribbon { right: auto; left: 12px; }
	.subscriptionOption h2 { font-size: 7vw; }
	#aboutUs article { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; margin: auto; padding: 30px; }
	.logoList { display: flex; flex-wrap: wrap; }
	.logoList a { flex: 40% 0 0; opacity: 0.5; }
	.logoList.workedWith a:nth-of-type(1) { order: 1; }
	
	.logoList.upcoming a:nth-of-type(2) { order: 2; }
	.logoList.workedWith a:nth-of-type(2) { order: 4; }
	
	.logoList.upcoming a:nth-of-type(4) { flex: 80% 0 0; order: 4; }
	.logoList.workedWith a:nth-of-type(4) { order: 2; }
	.logoList.workedWith a:nth-of-type(3) { order: 3; flex: 100% 0 0; margin: 20px 0; }
	.logoList a:nth-of-type(7) { order: 6; flex: 80% 0 0; margin: 20px 0;  }
	.logoList a:nth-of-type(5) { order: 5; }
	.logoList a:nth-of-type(6) { order: 7; }
	.logoList a:nth-of-type(8) { order: 8; }

	.logoList.upcoming a { flex: 25% 0 0; }

	.logoList.workedWith a:nth-of-type(3) img { max-height: 40px; }
	.logoList.workedWith a:nth-of-type(2) img, .logoList.workedWith a:nth-of-type(5) img { max-height: 80px; }

	.bio { display: flex; flex-wrap: wrap; }
	.bio .image { flex: 0 0 60vw; margin: 10px 16vw; }
	.bio .content { flex: 0 0 90vw; margin: 0 3vw; }

}

@media only screen and (max-width: 620px) {
	header nav a:nth-of-type(2) span { display: none; }
	
	#home.splash { min-height: 100px !important; }
	#home.splash a { background-size: contain; }
	#home.splash a .linkBlock { width: auto; margin: 0 -2vw; background: none; text-shadow: 0 0 10px rgba(255,255,255,0.5); }
	#home.splash a.global { background-position: top left; }
	#home.splash a.global .linkBlock { text-align: right; }
	#home.splash a.producing { background-position: top right; }
	#home.splash a.producing .linkBlock { text-align: left; }
	
	.footerLinks { font-size: 11px; }
	
	#upcomingRoaster .roasterLogo { width: 200px; }
	#upcomingRoaster h3 { font-size: 12px; padding: 0 10px 8px 10px;  }
	#upcomingRoaster .date { font-size: 12px; padding: 10px 8px 0 10px; }
	
}


@media only screen and (max-width: 530px) {
	#christmasLights { max-width: none; height: auto; width: 257vw; position: absolute; top: 0px; left: -20px; transform: translateX(0); mix-blend-mode: multiply; }
	#santa { top: 15px; width: 75px; height: 56px; transform: translateX(-140px); }
	header .logo { margin-top: 20px; max-width: 200px; }
	header nav { position: absolute; top: 15px; right: 125px; }
	header nav a:nth-of-type(1) { display: none; }
	header nav a:nth-of-type(2) { display: none; padding: 2px 6px; color: #fff; background: #000; border-radius: 4px; font-size: 12px; line-height: 14px; height: 18px; }
	header nav a:nth-of-type(3) { font-size: 0px; padding: 0; width: 21px; }
	header nav a:nth-of-type(3) i { font-size: 21px; position: relative; top: -1px; }
	a.button.centered { display: inline-block; }
	#home a.button.bottom { bottom: 20px; }
	.smallBlock { display: block; }

	h1 { font-size: 8vw; }
	h2 { font-size: 5vw; }
	h2.minor { font-size: 4.5vw; }
	h3 { font-size: 4vw; }
	h4 { font-size: 18px; }
	
	.subscriptionOption { height: 240px; }
	.subscriptionOption h2 { font-size: 7vw; }

	.paddingTop { padding-top: 30px; }
	.paddingBottom { padding-bottom: 30px; }


	#home.splash.christmas { height: 1100px; }
	#smallerWorld { font-size: 4.5vw; }
	
	#home, #home.new { }
	#home h3.verticalAlign, #home h3.bottom20 { top: 10%; display: block; }

	#home.splash .linkSlider { width: 96vw; height: 600px; margin: 20px 2vw; }
	#home.splash .linkSlider .slides li { width: 96vw; height: 600px; background-size: auto 600px; }
	#home.splash a .linkBlock {  bottom: 0; transform: none; }
	#home.splash .slides .colorWash { background: rgb(255,255,255,0.75); background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.8) 70%); }
	#home.splash .subTitle { font-size: 24px; }

	.button .tooltip { background: rgba(0,0,0,0.8); }
	.button .tooltip::after { border-color: transparent transparent rgba(0,0,0,0.8) transparent; }

	.button .tooltip { top: -100px; left: 50%; margin-left: -140px; z-index: 99; transition: all ease-in 0.5s; background: rgba(0,0,0,0.8); }
	.button .tooltip::after { top: 100%; bottom: auto; border-color: rgba(0,0,0,0.8) transparent transparent transparent; }
	.button:hover .tooltip { top: -60px; }
	.button.giftcard .tooltip { margin-left: -120px; }


	#subBox { left: 20%; top: 24%; width: 60%; }
	#subBox img { box-shadow: 20px 20px 0 #f69797, 20px 20px 59px 0px rgba(0,0,0,0.2); }
	#subBox.grower img { box-shadow: 20px 20px 0 #4ABAE4, 20px 20px 59px 0px rgba(0,0,0,0.2); }
	#home h2.alignRight { margin-top: 320px; margin-bottom: 30px; }
	#home .text-wrapper { padding-bottom: 100px; position: relative; }
	
	#rotator.new { padding-top: 20px; }
	#rotator p.smoothy { font-size: 16px; }
	
	#globe { flex-direction: column-reverse; }
	#globe .col { height:50vw; }
	#rotator { margin-bottom: 20px; }

	#intro .col { flex: 0 0 100%; padding: 20px 10px; margin: 0; }

	#timelineVid { width: 140vw; height: auto; margin-left: -20vw; margin-right: -20vw; }

	.giftCardBox { width: 300px; }
	.giftCardBox h4 { text-align: center; padding-bottom: 20px; }
	.giftCardBox .button { position: relative; right: 0px; top: 0px; }

	.giftcardOption { padding: 20px 10px; margin: 15px 0px 0px 0px; } 
	.giftcardOption:nth-of-type(odd) { margin-left: 10px; } 
	.producing .giftcardOption:nth-of-type(odd) { margin-left: 0; } 

	.vert { display: block; height: 0; opacity: 0; }

	#giftcardGrid h3 { font-size: 18px; }
	#giftcardGrid p { font-size: 16px; }
	#giftcardGrid div { text-align: center; margin-top: 20px; }
	#giftcardButton { border-radius: 12px; padding: 120px 60px 50px 60px; }


}














#mc_embed_signup input { border: 2px solid #eee; border-radius: 6px; width: 300px; padding: 12px 20px; margin-bottom: 10px; }
#mc_embed_signup input:hover { border: 2px solid #89d3da; }
#mc_embed_signup input.submit:hover { background: #89d3da; }
#mc_embed_signup div.mce_inline_error { margin: -3px auto 1em auto !important; width: 300px; border-radius: 0 0 6px 6px; }
#mce-responses { margin: 10px auto; width: 300px; padding: 10px; font-style: oblique; }

.product{
	float:left;
	margin-right:20px;
}