/*****************************************************************************************

	Styles for the Mars Drinks Flavia UK Micro Site
	
	
	Colour Pallette
	--------------------------
	espresso 		= #5f504e (Light Brown)
	earlybirdBlue 	= #7aa4dd (Light Blue)
	goldenRoast 	= #f6a800 (Yellow)
	chaiSpice 		= #a8133e (Red/Purple)
	mocha 			= #512c1e (Dark Brown)
	marsBlue 		= #236093 (Dark Blue)
	herbalOrange 	= #e74c39 (Orange)
	baristaGreen 	= #799a05 (Green)
	
	
*****************************************************************************************/


/****************************************************************************
	Global Classes
****************************************************************************/
		
	/* CLEARFIX */
	.clearfix:after { content:""; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
	.clearfix { display:block; }
	html[xmlns] .clearfix { display:block; }
	* html .clearfix             { zoom: 1; } /* IE6 */
	*:first-child+html .clearfix { zoom: 1; } /* IE7 */
	
	/* CLEAR */
	.clearL { clear: left; }
	.clearR { clear: right; }
	.clearB { clear: both; }
	
	/* FLOATS */
	.fl {float: left!important;}
	.fr {float: right!important;}
	.fn {float: none!important;}
	
	/* DISPLAY */
	.db { display: block!important; }
	.dib { display: inline-block!important; }
	
	/* TEXT ALIGN */
	.tac { text-align: center; }
	.tar { text-align: right; }
	
	/* PADDINGS */
	.p0 { padding: 0!important;}
	.p10 {padding: 10px!important;}
	.p20 {padding: 20px!important;}
	.p30 {padding: 30px!important;}
	.p40 {padding: 40px!important;}
	.p50 {padding: 50px!important;}
	.p60 {padding: 60px!important;}
	
	.pt0 {padding-top: 0px!important;}
	.pt10 {padding-top: 10px!important;}
	.pt20 {padding-top: 20px!important;}
	.pt30 {padding-top: 30px!important;}
	.pt40 {padding-top: 40px!important;}
	.pt50 {padding-top: 50px!important;}
	.pt60 {padding-top: 60px!important;}
	
	.pb0 {padding-bottom: 0px!important;}
	.pb10 {padding-bottom: 10px!important;}
	.pb20 {padding-bottom: 20px!important;}
	.pb30 {padding-bottom: 30px!important;}
	.pb40 {padding-bottom: 40px!important;}
	.pb50 {padding-bottom: 50px!important;}
	.pb60 {padding-bottom: 60px!important;}

	.pl0 {padding-left: 0px!important;}
	
	.pr0 {padding-right: 0px!important;}
	

	/* MARGINS */
	.m0 { margin: 0!important;}
	.m10 {margin: 10px!important;}
	.m20 {margin: 20px!important;}
	.m30 {margin: 30px!important;}
	.m40 {margin: 40px!important;}
	.m50 {margin: 50px!important;}
	.m60 {margin: 60px!important;}
	
	.mt0 {margin-top: 0px!important;}
	.mt10 {margin-top: 10px!important;}
	.mt20 {margin-top: 20px!important;}
	.mt30 {margin-top: 30px!important;}
	.mt40 {margin-top: 40px!important;}
	.mt50 {margin-top: 50px!important;}
	.mt60 {margin-top: 60px!important;}
	
	.mb0 {margin-bottom: 0px!important;}
	.mb10 {margin-bottom: 10px!important;}
	.mb20 {margin-bottom: 20px!important;}
	.mb30 {margin-bottom: 30px!important;}
	.mb40 {margin-bottom: 40px!important;}
	.mb50 {margin-bottom: 50px!important;}
	.mb60 {margin-bottom: 60px!important;}
	
	/* HIDE ON DESKTOP */
	.desktopHide { display: none!important; }
	
	
	/* HTML */
		html {
			background-color: #fff;
			padding: 0;
			margin: 0;
		}
		body {
			font-family: 'proxima-nova' , arial , sans-serif;
			padding: 100px 0 0 0;
			margin: 0;
		}

	/* CENTRALISED WRAPPER FOR CONTENT */
		.wrapper {
			width: 990px;
			margin: auto;
			position: relative;
		}
	
	/* IMG SCALING */
		.img img { display: block; }
		.imgScale img {
			display: block;
			min-height: 1px;
			height: auto!important;
	        width: 100%;
		}

	/* Columns */
		.col2, .col3, .col2-3s, .col4 { float: left; }
		.col2 { width: 50%;	}
		.col3 { width: 33.33333%; }
			.col3 .content { padding: 0px 20px; }
			.col4 .content { padding: 0px 20px; }
			.col4 { width: 25%; *width: 247px; }
		.col2-3s { width: 66.6666%; }
				
/****************************************************************************
	Header & Navigation
****************************************************************************/

	.head {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999999;
		background-color: #fff;
		width: 100%;
		padding: 10px 0;
	}

	/*---------------------------------------------------------------
		Logo
	---------------------------------------------------------------*/
	
		.head .logo {
			float: left;
			width: 120px;
		}
		
	/*---------------------------------------------------------------
		Phone Number CTA
	---------------------------------------------------------------*/
		
		.head .phoneNumber {
			float: right;
			width: 160px;
			margin-bottom: 6px;
			color: #236093; /* Dark Blue */
			font-size: 20px;
		}
			.head .phoneNumber span {
				display: block;
				color: #bdbdbd;
				font-size: 14px;
			}
	
	/*---------------------------------------------------------------
		Navigation
	---------------------------------------------------------------*/
				
		.head .navigation {
			float: right;
			font-size: 12px;
			text-align: left;
			padding: 0;
			margin: 0;
			list-style-type: none;
		}
			.head .navigation li {
				float: left;
				margin: 0 18px;
			}
			.head .navigation li.mobileNav {display: none;}
			
			.head .navigation li.mobileNav,
			.head .navigation li.social { margin: 0 0 0 4px; }
			.head .navigation li.quote { margin-right: 0; }
			
				.head .navigation li a {
					display: inline-block;
					color: #236093; /* Dark Blue */
					text-decoration: none;
					line-height: 30px;
				}
					.head .navigation li.active a { font-weight: bold; }
					.head .navigation li a:hover { text-decoration: underline; }
				
				.head .navigation li.mobileNav a {
					background: url(../images/head/icon-mobileNav.png) center top no-repeat #efefef;
					background-size: 30px;
					width: 30px;
					height: 30px;
					overflow: hidden;
					text-indent: -1000px;
				}
					.head .navigation li.mobileNav.active a {
						background-color: #236093;
						background-position-y: -30px;
					}
				.head .navigation li.quote a {
					background-color: #236093; /* Dark Blue */
					color: #fff;
					font-weight: bold;
					padding: 0 15px;
				}					
				.head .navigation li.social a {
					width: 30px;
					height: 30px;
					overflow: hidden;
					text-indent: -1000px;
					display: block;
				}
					.head .navigation li.social.linkedIn a {
						background: url(../images/head/icon-linkedIn-ie8.png) center center no-repeat #4e4e4e; /* Grey */
					}
					.head .navigation li.social.twitter a {
						background: url(../images/head/icon-twitter-ie8.png) center center no-repeat #858585; /* Grey */
					}
					.head .navigation li.quote a:hover,
					.head .navigation li.social a:hover { text-decoration: none; opacity: 0.9; }
			
	/*---------------------------------------------------------------
		Mobile Navigation
	---------------------------------------------------------------*/
	
		.mobileNavigation {
			display: none;
		}
				
/****************************************************************************
	H1-H6, Paragraphs
****************************************************************************/
	
	h1, h2, h3, h4, h5, h6 { margin: 0 0 10px 0; }
	h1 {
		font-size: 28px;
		text-transform: uppercase;
		line-height: 1em;
	}
	h2 {
		font-size: 28px;
		text-transform: uppercase;
		line-height: 1em;
	}
	h3 {
		font-size: 18px;
	}
	h4 {
		font-size: 24px;
		font-weight: normal;
	}
	h5 {
		font-size: 18px;
		font-weight: normal;
	}
	h6 { 
		font-size: 14px;
		font-weight: normal;
		line-height: 24px;
		color: #5f5e5e;
	}
	p, ul li {
		font-size: 12px;
		color: #636363;
	}
		p.blue { color: #236093; /* Mars Blue */ }
		p .blue { color: #236093; /* Mars Blue */ }
		p .green { color: #799a05; /* Barista Green */ }
		
		p.smallPrint { font-size: 10px; }
		
		a { text-decoration: none; }
			a:hover { text-decoration: underline; }
		
		sup {
			font-size: 0.5em;
			line-height: 100%;
		}
		
	/*---------------------------------------------------------------
		Colour Combinations
	---------------------------------------------------------------*/
		
		.espresso h2, .espresso h3 				{ color: #5f504e; }
		.earlybirdBlue h2, .earlybirdBlue h3 	{ color: #236093; }
		.goldenRoast h2, .goldenRoast h3 		{ color: #f6a800; }
		.chaiSpice h2, .chaiSpice h3 			{ color: #a8133e; }
		.mocha h2, .mocha h3 					{ color: #512c1e; }
		.herbalOrange h2, .herbalOrange h3 		{ color: #e74c39; }
		.baristaGreen h2, .baristaGreen h3 		{ color: #799a05; }
		.baristaBlack h2, .baristaBlack h3 		{ color: #000201; }
		
		.espresso p span.highlight,
		.espresso p a.highlight 			{ color: #5f504e; }
		.earlybirdBlue p span.highlight,
		.earlybirdBlue p a.highlight	 	{ color: #7aa4dd; }
		.goldenRoast p span.highlight,
		.goldenRoast p a.highlight			{ color: #f6a800; }
		.chaiSpice p span.highlight,
		.chaiSpice p a.highlight			{ color: #a8133e; }
		.mocha p span.highlight,
		.mocha p span.a						{ color: #512c1e; }
		.herbalOrange p span.highlight,
		.herbalOrange p a.highlight 		{ color: #e74c39; }
		.baristaGreen p span.highlight,
		.baristaGreen p a.highlight 		{ color: #799a05; }
		
		.espresso ul li .highlight 			{ color: #5f504e; }
		.earlybirdBlue ul li .highlight		{ color: #7aa4dd; }
		.goldenRoast ul li .highlight		{ color: #f6a800; }
		.chaiSpice ul li .highlight			{ color: #a8133e; }
		.mocha ul li .highlight				{ color: #512c1e; }
		.herbalOrange ul li .highlight		{ color: #e74c39; }
		.baristaGreen ul li .highlight		{ color: #799a05; }
		
/****************************************************************************
	Banners
****************************************************************************/

	/*---------------------------------------------------------------
		container
	---------------------------------------------------------------*/
		
		.espresso .banner { background-color: #5f504e; }
		.earlybirdBlue .banner { background-color: #7aa4dd; }
		.goldenRoast .banner { background-color: #f6a800; }
		.chaiSpice .banner { background-color: #a8133e; }
		.mocha .banner { background-color: #512c1e; }
		.marsBlue .banner { background-color: #236093; }
		.herbalOrange .banner { background-color: #e74c39; }
		.baristaGreen .banner { background-color: #799a05; }
		.baristaBlack .banner { background-color: #000201;}
		
		.baristaBlack .banner #bannerText{ 
			background-image: url(../images/banners/barista_banner_top.jpg);
			background-position: center bottom;
			background-repeat: no-repeat;
			height: 420px;
		}
		.baristaBlack .banner h1{
			text-align: center;
			padding-top: 49px;
			background-image: url(../images/banners/barista-title.png);
			background-position: 50% 38px;
			background-repeat: no-repeat;
			padding-bottom: 20px;
			text-indent: -2000px;
			width: 100%;
			position: relative;
			overflow: hidden;
		}			
			
		.banner {
			background-position: center top;
			background-repeat: no-repeat;
			color: #fff;
			min-height: 350px;
			width: 100%;
			line-height: 28px;
			overflow-x: hidden;
			margin-top: 
		}
			
			.home .banner 			{ background-image: url(../images/banners/home.jpg); background-position: center center; }
			.technology .banner		{ background-image: url(../images/banners/technology.jpg); background-position: center center; }
			.drinks .banner 		{ background-image: url(../images/banners/drinks.jpg); }
			.about .banner 			{ background-image: url(../images/banners/about.jpg); }
			.sustainability .banner { background-image: url(../images/banners/sustainability-ie8.jpg); }
					
	/*---------------------------------------------------------------
		COLUMNS
	---------------------------------------------------------------*/
		
		.banner .col2, .banner .col3 { min-height: 350px; }
		.banner .col2 .content { padding: 60px 40px; }
		.banner .col3 .content { padding: 60px 20px; }
		
		.banner .col2.gradient,
		.banner .col3.gradient {
			background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
			background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0)));
			background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 100%);
			background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 100%);
			background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 100%);
			background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0) 100%);
		}
			
	/*---------------------------------------------------------------
		PLAY BUTTON & CALL TO ACTION
	---------------------------------------------------------------*/
		
		.banner .playBtn {
			background: url(../images/banners/btn-play-ie8.png) center center no-repeat;
			background-size: 100%;
			width: 50px;
			height: 50px;
			display: block;
			margin: 0 0 10px 100px;
			transition: all 0.4s;
			-webkit-transition: all 0.4s; /* Safari */
		}
			.banner .playBtn:hover { opacity: 0.8; }
			
			.banner .col3 .playBtn {
				margin: 0 auto 10px;
			}
			
		@media screen and (max-width: 1024px) {
			.banner .playBtn {
				width: 48px;
				height: 48px;
			}
		}
		
		.banner a.btn {
			border-color: #fff;
			border-width: 2px;
			color: #fff;
			font-weight: bold;
			margin-top: 10px;
		}
			.banner a.btn:hover { background-color: #fff; color: #236093; }
					
	/*---------------------------------------------------------------
		AROMAS
	---------------------------------------------------------------*/
		
		.banner .aroma {
			width: 166px;
			height: 350px;
			position: absolute;
			bottom: 0;
			right: 0;
			margin-right: -83px;
		}
			.banner .aroma.left { left: 0; right: inherit; }
			
			.espresso .banner .aroma 		{ background: url(../images/banners/aroma-espresso.png) center bottom no-repeat; }
			.earlybirdBlue .banner .aroma 	{ background: url(../images/banners/aroma-earlybirdBlue.png) center bottom no-repeat; }
			.goldenRoast .banner .aroma 	{ background: url(../images/banners/aroma-goldenRoast.png) center bottom no-repeat; }
			.chaiSpice .banner .aroma 		{ background: url(../images/banners/aroma-chaiSpice.png) center bottom no-repeat; }
			.mocha .banner .aroma 			{ background: url(../images/banners/aroma-mocha.png) center bottom no-repeat; }
			.marsBlue .banner .aroma 		{ background: url(../images/banners/aroma-marsBlue.png) center bottom no-repeat; }
			.herbalOrange .banner .aroma 	{ background: url(../images/banners/aroma-herbalOrange.png) center bottom no-repeat; }
			.baristaGreen .banner .aroma 	{ background: url(../images/banners/aroma-baristaGreen.png) center bottom no-repeat; }
			
	/*---------------------------------------------------------------
		CONTENT
	---------------------------------------------------------------*/
	
		.banner h6 	{ color: #fff; margin: 0 0 10px; }
			.banner h6:last-child 	{ margin: 0; }
		.chaiSpice.drinks .banner h1 	{ color: #a8133e; }
		.chaiSpice.drinks .banner h6 	{ color: #636363; }
		
		@media screen and (max-width: 639px) {
			.banner h1 { line-height: 1em; }
			.banner h6 { line-height: 1.5em; }
			.banner .col2, .banner .col3 { width: 70%; min-height: 380px; }
			.banner .col2 .content { padding: 40px 20px;  }
			.banner .col2 .playBtn {
				width: 48px;
				height: 48px;
				margin: 10px 40px;
			}
		}
			
	/*---------------------------------------------------------------
		DRINKS BANNER
	---------------------------------------------------------------*/
		
		.drinks .banner .col3 { position: relative; }
			.drinks .banner .col3 .carousell {
				min-height: 350px;
				margin: 0;
			}
				.drinks .banner .col3 .carousell li { height: 350px; }
				.drinks .banner .col3 .carousell .img {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 100%;
				}
			
	/*---------------------------------------------------------------
		VIDEO STRUCTURE
	---------------------------------------------------------------*/
		
		#bannerText.hideText { display: none; }
		#bannerVideo {
			display: none;
			background-color: #151515;
			position: relative;
			padding: 40px 0;
		}
			#bannerVideo .closeBtn {
				background: url(../images/banners/video-close-btn.png) top center no-repeat #2a2a2a;
				width: 48px;
				height: 48px;
				border-radius: 48px;
				position: absolute;
				right: 40px;
				top: 40px;
			}
				#bannerVideo .closeBtn:hover { background-position-y: -48px; }
		
/****************************************************************************
	Introduction
****************************************************************************/

	/*---------------------------------------------------------------
		container
	---------------------------------------------------------------*/
		
			.introduction { padding: 60px 0; }
						
			.introduction .content h6 { color: #636363; line-height: 24px; }
			.introduction .content p { line-height: 24px; }
			
			/* PAGE SPECIFIC */
				.drinks .introduction .content h2 { margin-bottom: 30px; }
				.drinks .introduction .content h6 { padding: 0 12%; }
				.barista .introduction .content h6 { padding: 0 27%; margin-bottom: 30px }

			.introduction .col3 .content ul { list-style-type: none; padding: 0; margin: 0; }
			.introduction .col3 .content ul li:before {
				content: "– ";
			}
			.introduction .content ul li {
				font-weight: bold;
				line-height: 24px;
				margin-bottom: 10px;
			}
				.introduction .col3 .content ul li.darkBlue { color: #236093; }
							
			.home .introduction .flaviaCreation {
				margin-top: -460px;
				margin-bottom: 40px;
			}

	/*---------------------------------------------------------------
		Move Image when Video Playing
	---------------------------------------------------------------*/
		
			.home .introduction .flaviaCreation.move {
				margin-top: -100px;
			}
			
	/*---------------------------------------------------------------
		Logos
	---------------------------------------------------------------*/
		
		.introduction .logos {
			margin-top: 60px;
		}
			.introduction .logos .img {
				float: left;
				width: 9%;
				margin: 0 1%
			}
				.introduction .logos .img img {
					max-width: 106px;
					margin: 0 auto;
				}
				
/****************************************************************************
	Quote Panel
****************************************************************************/

	/*---------------------------------------------------------------
		Content
	---------------------------------------------------------------*/
		
		.quotePanel { padding: 60px 0; }
			.quotePanel .col2-3s .content { padding: 0 20px; }
			.quotePanel .img {
				float: right;
				width: 160px;
			}
					
	/*---------------------------------------------------------------
		Colours
	---------------------------------------------------------------*/
		
		.earlybirdBlue .quotePanel h6 	{ color: #7aa4dd; }
		.goldenRoast .quotePanel h6 	{ color: #f6a800; }
		.chaiSpice .quotePanel h6 		{ color: #a8133e; }
		.herbalOrange .quotePanel h6 	{ color: #e74c39; }
		.baristaGreen .quotePanel h6 	{ color: #799a05; }
		

/****************************************************************************
	D-Cup Panel
****************************************************************************/

	/*---------------------------------------------------------------
		container
	---------------------------------------------------------------*/
		
		.espresso .dCupPanel 		{ background-color: #5f504e; /* EXPRESSO */  }
		.earlybirdBlue .dCupPanel 	{ background-color: #7aa4dd; /* EARLY BIRD BLUE */ }
		.herbalOrange .dCupPanel 	{ background-color: #e74c39; /* HERBAL ORANGE */ }
		.goldenRoast .dCupPanel		{ background-color: #5f504e; /* MOCHA */ }
		.baristaBlack .dCupPanel	{ background-color: #000201; /* BLACK */ }
		
		.home .dCupPanel { background-image: url(../images/dcup/dcup-home.jpg); }
		.technology .dCupPanel { background-image: url(../images/dcup/dcup-home.jpg); }
		.about .dCupPanel { background-image: url(../images/dcup/dcup-about.jpg); }
		.barista .dCupPanel { position: relative;overflow: hidden;}
		.barista .dCupPanel .dCupImg{
			position: absolute;
			top: -50px;
			left: 0px;
			width: 60%;
		}
		
		.dCupPanel {
			position: relative;
			background-position: -300px 30%;
			background-repeat: no-repeat;
		}
			.home .dCupPanel .col2 			{ background-image: url(../images/dcup/dcup-mask-chaiSpice-ie8.png); }
			.technology .dCupPanel .col2 	{ background-image: url(../images/dcup/dcup-mask-earlybirdBlue-ie8.png); }
			.about .dCupPanel .col2 		{ background-image: url(../images/dcup/dcup-mask-espresso-ie8.png); }
			.barista .dCupPanel .col2 		{ background-image: url(../images/dcup/dcup-mask-baristaBlack.png); }
			
			.dCupPanel .lockupLogo {
				position: absolute;
				bottom: 0;
				left: 28%;
				z-index: 10;
			}
			
			.dCupPanel .col2 {
				float: right;
				position: relative;
				background-position: left top;
				background-size: auto 100%;
				background-repeat: no-repeat;
				width: 58%;
			}
				.dCupPanel .col2 .content {
					padding: 60px 40px 60px 200px;
					color: #fff;
					text-align: right;
					position: relative;
				}
					.dCupPanel .content h2 { color: #fff!important; }
					.dCupPanel .content h6 {
						line-height: 26px;
						color: #fff;
						margin-bottom: 20px;
					}
					.dCupPanel .content p { color: #fff!important; }
					.dCupPanel .content ul { list-style-type: none; padding: 0; margin: 0 0 20px 0; }
					.dCupPanel .content ul li {
						color: #fff;
						line-height: 18px;
						margin-bottom: 12px;
					}
				
				.dCupPanel a.btn {
					border-color: #fff;
					color: #fff;
				}
					.dCupPanel a.btn:hover { background-color: #fff; }
					.earlybirdBlue .dCupPanel a.btn:hover { color: #236093; }
					.herbalOrange .dCupPanel a.btn:hover { color: #e74c39; }
					
				.dCupPanel p.smallPrint {
					margin-bottom: -20px;
				}
					
/****************************************************************************
	Superior Quality Panel
****************************************************************************/

	/*---------------------------------------------------------------
		Container
	---------------------------------------------------------------*/
		
		.goldenRoast .superiorQuality { background-color: #5f504e; }
		
		.superiorQuality {
			background-position: right top;
			background-repeat: no-repeat;
			background-size: auto 100%;
		}
			.about .superiorQuality { background-image: url(../images/superiorQuality/about.jpg); }
						
	/*---------------------------------------------------------------
		Content
	---------------------------------------------------------------*/
	
		.superiorQuality .col2 { width: 50%; }
			.superiorQuality .col2 .content {
				padding: 60px 40px;
				color: #fff;
			}
				.superiorQuality .content h2 {
					color: #fff!important;
					margin-bottom: 20px;
				}
				.superiorQuality .content h6 { line-height: 28px; color: #fff; }
				
				.superiorQuality a.btn {
					border-color: #fff;
					color: #fff;
					margin-top: 20px;
				}
					.superiorQuality a.btn:hover {
						background-color: #fff;
					}
					.goldenRoast .superiorQuality a.btn:hover { color: #5f504e; }
					
/****************************************************************************
	Did you know?
****************************************************************************/
	
	.didYouKnow {
		position: relative;
		height: 125px;
	}
		.didYouKnow .content {
			position: absolute;
			left: 50%;
			top: -125px;
			width: 250px;
			height: 250px;
			background: url(../images/didYouKnow/didYouKnow-bg.png) center center no-repeat transparent;
			color: #236093;
			text-align: center;
			border-radius: 250px;
			margin-left: -125px;
		}
			.didYouKnow .content .padding { padding: 60px 30px; }
				
				.didYouKnow .content h5 {
					font-weight: bold;
					text-transform: uppercase;
				}
				.didYouKnow .content h6 { line-height: 1.4em; }
				
/****************************************************************************
	Hassle Free Technology
****************************************************************************/
	
	.hassleFree { padding: 0 0 60px; }
		.hassleFree .content { padding: 0 40px; }
		.hassleFree h2 {
			text-align: center;
			margin-bottom: 40px;
		}
			.hassleFree p {
				line-height: 2em;
			}
				.hassleFree p:first-child { margin-top: 40px; }
			.hassleFree .btn { margin-top: 20px; }
			
			.hassleFree .img { padding: 0 20px; }
	
/****************************************************************************
	5 Circles Area
****************************************************************************/

	/*---------------------------------------------------------------
		CONTENT
	---------------------------------------------------------------*/
		
		.fiveCircles {
			text-align: center;
			min-height: 250px;
			padding: 60px 0;
		}
			.fiveCircles h2 { line-height: 1.3em; padding: 0 120px; margin-bottom: 40px; }
			.fiveCircles h6 { line-height: 2em; color: #5f5e5e; }
			
			.fiveCircles .tapInstruction { display: none; }
			
			.fiveCircles .content { padding: 0 20px; }
			.fiveCircles .circles {
				max-width: 1250px;
				padding-top: 40px;
				margin: 0 auto;
			}
				.fiveCircles .circles .circle {
					border-radius: 250px;					
				}
					.about .fiveCircles .circles .circle {
						width: 20%;
						float: left;
					}
					
				.fiveCircles .circles .circleImage {
					background-position: center center;
					background-repeat: no-repeat;
					background-size: 100%;
				}
					.technology .fiveCircles .circles .firstImage .circleImage 	{ background-image: url(../images/fiveCircles/circleImage-tech-01.png); }
					.technology .fiveCircles .circles .secondImage .circleImage { background-image: url(../images/fiveCircles/circleImage-tech-02.png); }
					.technology .fiveCircles .circles .thirdImage .circleImage 	{ background-image: url(../images/fiveCircles/circleImage-tech-03.png); }
					.technology .fiveCircles .circles .fourthImage .circleImage { background-image: url(../images/fiveCircles/circleImage-tech-04.png); }
					.technology .fiveCircles .circles .fifthImage .circleImage 	{ background-image: url(../images/fiveCircles/circleImage-tech-05.png); }
					
					.about .fiveCircles .circles .circleImage.firstImage 	{ background-image: url(../images/fiveCircles/circleImage-about-01.png); }
					.about .fiveCircles .circles .circleImage.secondImage 	{ background-image: url(../images/fiveCircles/circleImage-about-02.png); }
					.about .fiveCircles .circles .circleImage.thirdImage 	{ background-image: url(../images/fiveCircles/circleImage-about-03.png); }
					.about .fiveCircles .circles .circleImage.fourthImage 	{ background-image: url(../images/fiveCircles/circleImage-about-04.png); }
					.about .fiveCircles .circles .circleImage.fifthImage 	{ background-image: url(../images/fiveCircles/circleImage-about-05.png); }
				
				.fiveCircles .circles .circle .padding {
					padding: 60px 30px;
				}
				.fiveCircles .circles .circle p {
					color: #fff;
					font-size: 14px;
					line-height: 2em;
				}
					.about .fiveCircles .circles .circle p {
						line-height: 20px;
						padding: 35px;
					}
					.fiveCircles .circles .circle p.smallPrint {
						font-size: 10px;
						line-height: 10px;
					}
				
			
	/*---------------------------------------------------------------
		3D Animation
	---------------------------------------------------------------*/
		
		/* entire container, keeps perspective */
		.fiveCircles .flip-container {
			float: left;
			width: 20%;
		}
			/* flip the pane when hovered */
			.fiveCircles .flip-container:hover .back {
				z-index: 2;
			}
			.fiveCircles .flip-container:hover .front {
			    z-index: 1;
			}
				
		/* flip speed goes here */
		.fiveCircles .flip-container .flipper {
			width: 100%;
			height: 100%;
			position: relative;
		}
		
		/* hide back of pane during swap */
		.fiveCircles .flip-container .front,
		.fiveCircles .flip-container .back {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		
		/* front pane, placed above back */
		.fiveCircles .flip-container .front {
			z-index: 2;
		}
		
		/* back, initially hidden pane */
		.fiveCircles .flip-container .back {
		    z-index: 1;
		}
			.technology .fiveCircles .flip-container .back { background: url(../images/fiveCircles/circleImage-tech-back.png) center center no-repeat; }
		
/****************************************************************************
	Triple Calls to Action
****************************************************************************/

	/*---------------------------------------------------------------
		Lead In Title
	---------------------------------------------------------------*/
		
		.tripleCallLead {
			position: relative;
			padding: 50px 0;
			text-align: center;
		}
			.espresso .tripleCallLead 		{ background-color: #5f504e; }
			.earlybirdBlue .tripleCallLead 	{ background-color: #7aa4dd; }
			.goldenRoast .tripleCallLead 	{ background-color: #f6a800; }
			.chaiSpice .tripleCallLead 		{ background-color: #a8133e; }
			.mocha .tripleCallLead 			{ background-color: #512c1e; }
			.herbalOrange .tripleCallLead 	{ background-color: #e74c39; }
			.baristaGreen .tripleCallLead 	{ background-color: #799a05; }
			
			
			.baristaBlack .tripleCallLead{ background-color: #000; margin-top: 4px;}
			.baristaBlack .tripleCallLead{background-image: url(../images/tripleCallLead/bg-pattern-barristaBlack.gif);background-repeat: repeat;}
			.baristaBlack .tripleCallLead:after{background-image: url(../images/tripleCallLead/bottom_arrow.gif);
				background-repeat: no-repeat;
				background-position: top left;
				transform: none;
				-ms-transform: none;
				-webkit-transform: none;
				width: 32px;
				bottom: -20px;
				background-color: #FFF;	
			}

			.tripleCallLead h2, .tripleCallLead h4 { color: #fff; line-height: 1.3em; }
			.tripleCallLead h4 { margin: 0; }
			
			.baristaBlack .tripleCallLead h4{
				font-weight: 100;
			}
			.baristaBlack .tripleCallLead h4 span{
				border: 1px solid #FFF;
				padding: 4px;
				display: inline-block;
				padding-top: 0px;
				padding-bottom: 0px;
				line-height: 27px;
				text-transform: uppercase;
			}
			
			.tripleCallLead:after {
				content: "";
				width: 20px;
				height: 20px;
				position: absolute;
				left: 50%;
				bottom: -20px;
				margin-left: -10px;
			}
				.espresso .tripleCallLead:after 		{ background-color: #5f504e; }
				.earlybirdBlue .tripleCallLead:after 	{ background: url(../images/tripleCallAction/arrow-earlyBirdBlue.png) center top no-repeat transparent; }
				.goldenRoast .tripleCallLead:after 		{ background: url(../images/tripleCallAction/arrow-goldenRoast.png) center top no-repeat transparent; }
				.chaiSpice .tripleCallLead:after 		{ background-color: #a8133e; }
				.mocha .tripleCallLead:after 			{ background-color: #512c1e; }
				.herbalOrange .tripleCallLead:after 	{ background-color: #e74c39; }
				.baristaGreen .tripleCallLead:after 	{ background-color: #799a05; }
		
	/*---------------------------------------------------------------
		Triple Call to Action
	---------------------------------------------------------------*/
				
		.tripleCallToAction {
			padding: 60px 0;
			background-position: center bottom;
			background-repeat: no-repeat;
		}			
			.espresso .tripleCallToAction 		{ background-image: url(../images/tripleCallAction/vignette-espresso.png); }
			.earlybirdBlue .tripleCallToAction 	{ background-image: url(../images/tripleCallAction/vignette-earlybirdBlue.png); }
			.goldenRoast .tripleCallToAction 	{ background-image: url(../images/tripleCallAction/vignette-goldenRoast.png); }
			.chaiSpice .tripleCallToAction 		{ background-image: url(../images/tripleCallAction/vignette-chaiSpice.png); }
			.mocha .tripleCallToAction 			{ background-image: url(../images/tripleCallAction/vignette-mocha.png); }
			.herbalOrange .tripleCallToAction 	{ background-image: url(../images/tripleCallAction/vignette-herbalOrange.png); }
			.baristaGreen .tripleCallToAction 	{ background-image: url(../images/tripleCallAction/vignette-baristaGreen.png); }
			
			.tripleCallToAction .col3 h3, .tripleCallToAction .col3 p {
				padding: 10px 0;
				margin: 0;
			}
				.tripleCallToAction .col3 p { border-top: solid #e0e0e0 1px; }
					.tripleCallToAction .col3 p .small { font-size: 10px; }
					.tripleCallToAction .col3 p .smaller { font-size: 8px; }
					
				.tripleCallToAction .col3 a.btn { margin: 20px 0px; }
				.tripleCallToAction .col3 h6 {
					font-weight: bold;
					text-transform: uppercase;
					color: #5f5e5e;
					margin: 0;
				}
				
				.tripleCallToAction .col3:nth-child(1) h3 {
					background: url(../images/tripleCallAction/header-technology.jpg) right top no-repeat;
				}
				.tripleCallToAction .col3:nth-child(2) h3 {
					background: url(../images/tripleCallAction/header-drinks.jpg) right center no-repeat;
				}
				.tripleCallToAction .col3 h5 {
					text-transform: uppercase;
					color: #5f5e5e;
					margin: 0;
				}
				
			.barista .col4 a.btn{
				min-width: 0px;
				display: block;
			}
			
			.barista .col4 strong{
				text-transform: uppercase;
			}
			
			.barista .col4 a{
				font-weight: bold;
				color: black;
				margin-top: 25px;
			}
			
			.barista .col4 h6{
				margin-top: 10px;
			}
				
/****************************************************************************
	50/50 Panel
****************************************************************************/

	/*---------------------------------------------------------------
		Core
	---------------------------------------------------------------*/
	
		.fiftyFifty {
			padding: 60px 0;
			background-position: center bottom;
			background-repeat: no-repeat;
		}			
			.espresso .fiftyFifty 		{ background-image: url(../images/tripleCallAction/vignette-espresso.png); }
			.earlybirdBlue .fiftyFifty 	{ background-image: url(../images/tripleCallAction/vignette-earlybirdBlue.png); }
			.goldenRoast .fiftyFifty 	{ background-image: url(../images/tripleCallAction/vignette-goldenRoast.png); }
			.chaiSpice .fiftyFifty 		{ background-image: url(../images/tripleCallAction/vignette-chaiSpice.png); }
			.mocha .fiftyFifty 			{ background-image: url(../images/tripleCallAction/vignette-mocha.png); }
			.herbalOrange .fiftyFifty 	{ background-image: url(../images/tripleCallAction/vignette-herbalOrange.png); }
			.baristaGreen .fiftyFifty 	{ background-image: url(../images/tripleCallAction/vignette-baristaGreen.png); }
			
			.fiftyFifty .content { padding: 0 20px; }
		
				.fiftyFifty .content ul { list-style-type: none; padding: 0; margin: 0; }
					.fiftyFifty .content ul li:before {
						content: "– ";
					}
					.fiftyFifty .content ul li {
						font-weight: bold;
						line-height: 24px;
						margin-bottom: 10px;
					}
						.introduction .content ul li.darkBlue { color: #236093; }
					
				.fiftyFifty .energyRating {
					position: absolute;
					bottom: -60px;
					right: -20px;
				}
						
/****************************************************************************
	Mars Moments Panel
****************************************************************************/

	/*---------------------------------------------------------------
		Core
	---------------------------------------------------------------*/
		
		.marsMoments.debug { background-color: pink; }
		
		.marsMoments {
			background-repeat: no-repeat;
			padding: 100px 0;
			color: #fff;
		}
			.home .marsMoments 			{ background-image: url(../images/marsMoments/home.jpg); margin-bottom: 4px; }
			.technology .marsMoments 	{ background-image: url(../images/marsMoments/home.jpg); }
			.drinks .marsMoments 		{ background-image: url(../images/marsMoments/drinks.jpg); }
			.about .marsMoments 		{ background-image: url(../images/marsMoments/drinks.jpg); margin-bottom: 4px; }
			.contact .marsMoments 		{ background-image: url(../images/marsMoments/home.jpg); }
			.quote .marsMoments 		{ background-image: url(../images/marsMoments/drinks.jpg); }
			.barista .marsMoments 		{ background-color: #000; background-position: 30px 30px; padding: 60px 0;}
			
			.barista .marsMoments .wrapper{
				background-image: url(../images/marsMoments/segafredo.jpg);
				background-repeat: no-repeat; 
				background-position: -50px 0px;
			}
		
			.marsMoments .col { float: right; width: 60%; }
			.marsMoments .content {
				padding: 0 40px 0 0;
				position: relative;
			}
			.marsMoments h2 {
				font-size: 32px;
				color: #fff;
				line-height: 1.3em;
				margin: 0;
			}
			.marsMoments h3 {
				color: #fff;
				font-weight: normal;
				margin-bottom: 30px;
			}
			.marsMoments h4 {
				line-height: 1.3em;
				margin-bottom: 20px;
			}
			.marsMoments h6 {
				color: #fff;
				line-height: 1.3em;
				margin-bottom: 20px;
			}
			
			.marsMoments a.btn {
				border-color: #fff;
				border-width: 2px;
				color: #fff;
				font-weight: bold;
			}
				.marsMoments a.btn:hover { background-color: #fff; color: #236093; }
			
			.marsMoments p { color: #ccc; }
			
/****************************************************************************
	outroMerch
****************************************************************************/

	/*---------------------------------------------------------------
		Core
	---------------------------------------------------------------*/
		
		.outroMerch {
			padding: 60px 0;
		}
			.outroMerch .img {
				min-width: 320px;
				max-width: 1000px;
				text-align: center;
				padding: 0;
				margin: 0 auto 20px;
				overflow: hidden;
			}
			.outroMerch .col3 p {
				padding: 10px 0;
				margin: 0;
				border-top: solid #e0e0e0 1px;
			}
			
/****************************************************************************
	Drinks Panels
****************************************************************************/

	.drinksPanel {
		position: relative;
		padding: 0;
	}
		
	/*---------------------------------------------------------------
		IOS SCROLLER CORE
	---------------------------------------------------------------*/
		
		/* slider container */
		.iosslider {
			/* required */
			position: relative;
			top: 0;
			left: 0;
			overflow: hidden;
			width: 100%;
			height: 350px;
		}
		
		/* slider */
		.iosslider .slider {
			/* required */
			width: 100%;
			height: 100%;
		}
		
		/* slide */
		.iosslider .slider .slide {
			/* required */
			float: left;
			width: 100%;
			height: 100%;
		}
			.drinksPanel .iosslider .item {
				float: left;
				width: 100%;
				height: 100%;
			}
			
	/*---------------------------------------------------------------
		Scroll To Controls
	---------------------------------------------------------------*/
		
		.drinksPanel .slideSelectors {
			text-align: center;
			position: absolute;
			width: 100%;
			bottom: 40px;
			z-index: 2;
			padding: 0px;
		}
			.drinksPanel .slideSelectors .item {
				background-position: center center;
				background-repeat: none;
				display: inline-block;
				width: 26px;
				border-radius: 30px;
				background-color: #000;
				color: #fff;
				font-weight: bold;
				font-size: 14px;
				text-align: center;
				text-decoration: none;
				line-height: 26px;
				margin: 2px 4px;
			}
				.drinksPanel .slideSelectors .item:hover {
					background-color: #eee;
					color: #000;
				}
				.drinksPanel .slideSelectors .item.selected {
					background-color: #fff;
					color: #000;
					width: 30px;
					line-height: 30px;
					margin: 0px 2px;
				}
			/* IE7 ONLY */
			.drinksPanel .slideSelectors .item { display: inline; }
								
	/*---------------------------------------------------------------
		ALTERRA
	---------------------------------------------------------------*/
				
		.drinksPanel.alterra {
			background-color: #141414;
		}
			.drinksPanel.alterra .iosslider {
				height: 500px;
			}
				.drinksPanel.alterra .iosslider .item {
					padding: 40px 0;
					height: 420px;
				}
			.drinksPanel.alterra .slideSelectors {
			
			}
				.drinksPanel.alterra .slideSelectors .item {
					background-color: #f47b20;
					background-image: url(.../images/drinksPanel/alterra-button.png);
					color: #141414;
				}
					.drinksPanel.alterra .slideSelectors .item:hover 		{ background-color: #ffba86; }
					.drinksPanel.alterra .slideSelectors .item.selected 	{ background-color: #fffcdf; background-image: url(.../images/drinksPanel/alterra-button-selected.png); }
			
			.drinksPanel.alterra h6,
			.drinksPanel.alterra p {
				font-family: trebuchet MS, helvetica, arial;
				color: #fff;
				line-height: 24px;
			}
			
		/*---------------------------------------------------------------
			Slide 1
		---------------------------------------------------------------*/
					
			.drinksPanel.alterra .item1 {
				background: url(../images/drinksPanel/alterra-slide1-bg.gif) center bottom no-repeat;
			}
				.drinksPanel.alterra .item1 h6 {
					padding: 40px 50px 0 60px;
				}
					.drinksPanel.alterra .item1 .hardWorking { margin-top: -40px; }
				
		/*---------------------------------------------------------------
			Slide 2
		---------------------------------------------------------------*/
					
			.drinksPanel.alterra .item2 {
				background: url(../images/drinksPanel/alterra-slide2-bg.gif) center bottom no-repeat;
			}
				.drinksPanel.alterra .item2 .img.bg {
					background: url(../images/drinksPanel/alterra-slide2-image.jpg) left top no-repeat;
					height: 140px;
					padding-top: 230px;
				}
					.drinksPanel.alterra .item2 h6 { padding: 0 40px; }
					.drinksPanel.alterra .item2 .manRight {
						position: absolute;
						bottom: -84px;
						right: -84px; 
					}
	
		/*---------------------------------------------------------------
			Slide 3
		---------------------------------------------------------------*/
					
			.drinksPanel.alterra .item3 {
				background: url(../images/drinksPanel/alterra-slide3-bg.jpg) center center no-repeat;
			}
				.drinksPanel.alterra .item3 p { padding: 0 54px 0 74px; }
				
		/*---------------------------------------------------------------
			Slide 4
		---------------------------------------------------------------*/
					
			.drinksPanel.alterra .item4 {
				background: url(../images/drinksPanel/alterra-slide4-bg.jpg) center bottom no-repeat;
			}
				.drinksPanel.alterra .item4 .content { padding: 70px 30px 0; }
					.drinksPanel.alterra .item4 h6 { padding: 10px 0px 40px; }
					
	/*---------------------------------------------------------------
		BRIGHT TEA
	---------------------------------------------------------------*/
		
		.drinksPanel.brightTea {
			background-color: #c4d82e;
			background-image: url(../images/drinksPanel/brightTea-slideall-bg.jpg);
			background-position: center top;
			background-repeat: no-repeat;
			
		}
			.drinksPanel.brightTea .wrapper {
				width: 660px;
				padding-left: 330px;
			}
			.drinksPanel.brightTea .iosslider {
				height: 500px;
			}
				.drinksPanel.brightTea .iosslider .item {
					padding: 40px 0;
					height: 420px;
				}
				.drinksPanel.brightTea .slideSelectors .item {
					background-color: #231f20;
					color: #fff;
				}
					.drinksPanel.brightTea .slideSelectors .item:hover 		{ background-color: #454545; }
					.drinksPanel.brightTea .slideSelectors .item.selected 	{ background-color: #58beec; }
				
			.drinksPanel.brightTea .slideSelectors {
				position: absolute;
				width: 660px;
				bottom: 40px;
				z-index: 2;
				padding: 0px;
			}
				
				
			.drinksPanel.brightTea .content {
				padding: 0px 40px;
			}
				.drinksPanel.brightTea h3 {
					font-size: 30px;
					font-weight: normal;
					color: #bbd033;
					padding: 0 20px 0 80px;
					background-position: left top;
					background-repeat: no-repeat;
					min-height: 72px;
				}
				.drinksPanel.brightTea p {
					line-height: 24px;
				}
			
		/*---------------------------------------------------------------
			Slide 1
		---------------------------------------------------------------*/
			
			.drinksPanel.brightTea .item1 h3 { background-image: url(../images/drinksPanel/brightTea-slide1-title.png); }
				
				.drinksPanel.brightTea .item1 p b {
					color: #648326;
				}
			
		/*---------------------------------------------------------------
			Slide 2
		---------------------------------------------------------------*/
			
			.drinksPanel.brightTea .item2 { background: url(../images/drinksPanel/brightTea-slide2-bg.png) right 180px no-repeat; }
			
			.drinksPanel.brightTea .item2 h3 {
				background-image: url(../images/drinksPanel/brightTea-slide2-title.png);
				color: #f7901e;
			}
				.drinksPanel.brightTea .item2 p b {
					color: #cb700b;
				}
				
		/*---------------------------------------------------------------
			Slide 3
		---------------------------------------------------------------*/
			
			.drinksPanel.brightTea .item3 { background: url(../images/drinksPanel/brightTea-slide3-bg.png) right top no-repeat; }
			
				.drinksPanel.brightTea .item3 h3 {
					background-image: url(../images/drinksPanel/brightTea-slide3-title.png);
					color: #fdba00;
				}
					.drinksPanel.brightTea .item3 p b {
						color: #7b2a88;
					}
				
		/*---------------------------------------------------------------
			Slide 4
		---------------------------------------------------------------*/
			
			.drinksPanel.brightTea .item4 h3 {
				background-image: url(../images/drinksPanel/brightTea-slide4-title.png);
				color: #58beec;
				margin-bottom: 20px;
			}
				.drinksPanel.brightTea .item4 p b {
					color: #58beec;
				}
						
/****************************************************************************
	TEA LOVERS PANEL - ABOUT
****************************************************************************/

	/*---------------------------------------------------------------
		IOS SCROLLER CORE
	---------------------------------------------------------------*/
		
		.about .drinksPanel { margin-bottom: 4px; }
			.about .drinksPanel .iosslider { height: 380px; }
				.about .drinksPanel .iosslider .item {
					height: 300px;
					padding: 40px 0px;
				}
			.about .drinksPanel .slideSelectors { bottom: 20px; }

	/*---------------------------------------------------------------
		Slide 1
	---------------------------------------------------------------*/
		
		.about .drinksPanel .item1 .wrapper { padding-top: 30px; }
		
		.about .drinksPanel .item1 {
			background: url(../images/teaLovers/slide1-bg.jpg) center top no-repeat;
		}
			.about .drinksPanel .item1 h4 {
				color: #fff;
				text-transform: uppercase;
				padding-top: 20px;
			}
			.about .drinksPanel .item1 p {
				color: #fff;
				line-height: 24px;
			}
			.about .drinksPanel .item1 .btn {
				border-color: #fff;
				color: #fff;
				margin-top: 140px;
			}
				.about .drinksPanel .item1 .btn:hover {
					background-color: #fff;
					color: #236093;
				}

	/*---------------------------------------------------------------
		Slide 2
	---------------------------------------------------------------*/
					
		.about .drinksPanel .item2 {
			background: url(../images/teaLovers/slide2-bg.jpg) center top no-repeat;
		}
		.about .drinksPanel .item2 .content {
			padding: 30px 20px 0;
		}
			.about .drinksPanel .item2 h4,
			.about .drinksPanel .item2 p { color: #fff; }
			
			.about .drinksPanel .item2 h4 {
				font-weight: bold;
				text-transform: uppercase;
				line-height: 24px;
			}
			.about .drinksPanel .item2 p {
				line-height: 24px;
				margin-bottom: 20px;
			}
				.about .drinksPanel .item2 p b { color: #f6a800; }
				.about .drinksPanel .item2 p.smallPrint {
					font-size: 7px;
					line-height: 12px;
					color: #eee;
					margin: 0;
				}
			.about .drinksPanel .item2 .img {
				max-width: 270px;
				margin: 0 auto;
			}
		
/****************************************************************************
	GALAXY HOT CHOCOLATE
****************************************************************************/

	/*---------------------------------------------------------------
		Core
	---------------------------------------------------------------*/
		
		.drinksPanel.galaxy {
			background-color: #60190e;
			background-image: url(../images/drinksPanel/galaxy-bg.jpg);
			background-position: center center;
			background-size: auto 100%;
			background-repeat: no-repeat;
			position: relative;
			padding: 40px 0;
		}			
			.drinksPanel.galaxy h6,
			.drinksPanel.galaxy p {
				 color: #fff;
				 line-height: 1.5em;
			}
				.drinksPanel.galaxy .col2-3s .content {
					padding: 0 20px 0 80px;
					position: relative;
					z-index: 5;
				}
				
				.drinksPanel.galaxy .col2-3s .content .triple {
					margin-bottom: 20px;
				}
				.drinksPanel.galaxy .col2-3s .content .triple .img:first-child { margin-left: 0; }
				.drinksPanel.galaxy .col2-3s .content .triple .img {
					float: left;
					width: 110px;
					margin-left: 6%;
				}
				
				.drinksPanel.galaxy .col2-3s .content .subTitle {
					max-width: 417px;
				}
				
				.drinksPanel.galaxy .col2-3s .content .pack {
					max-width: 147px;
					margin-right: 40px;
				}
				
				.drinksPanel.galaxy .cupGraphic {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 1;
				}
									
/****************************************************************************
	Fresh Serve Panel
****************************************************************************/

	/*---------------------------------------------------------------
		Core
	---------------------------------------------------------------*/
		
		.freshServePanel {
			background: url(../images/drinksPanel/flavia-bg.jpg) center center no-repeat #e5e6e7;
			padding: 100px 0;
		}
			.freshServePanel .col2-3s .content {
				padding: 0 40px;
			}
			
			.freshServePanel h2 {
				text-transform: none;
				color: #005596;
				margin-bottom: 20px;
			}
			.freshServePanel h5 {
				text-transform: uppercase;
				color: #005596;
				position: relative;
				margin-bottom: 5px;
			}
				.freshServePanel h5:before {
					content: "";
					display: block;
					position: absolute;
					left: -90px;
					top: -10px;
					background-position: 0 0;
					background-repeat: no-repeat;
					width: 79px;
					height: 61px;
				}
				.freshServePanel h5.step1:before { background-image: url(../images/drinksPanel/flavia-step1.jpg); }
				.freshServePanel h5.step2:before { background-image: url(../images/drinksPanel/flavia-step2.jpg); }
				.freshServePanel h5.step3:before { background-image: url(../images/drinksPanel/flavia-step3.jpg); }
				
			.freshServePanel p {
				line-height: 1.8em;
				margin-top: 0;
			}
			
/****************************************************************************
	Five Milestones Panel
****************************************************************************/

	/*---------------------------------------------------------------
		Core
	---------------------------------------------------------------*/
		
		.milestones {
			position: relative;
			overflow: hidden;
		}
			.milestones h2 { color: #f6a800; margin-bottom: 20px; }
			.milestones h5,
			.milestones h6 { color: #fff; line-height: 1.6em; }
						
	/*---------------------------------------------------------------
		Carousell
	---------------------------------------------------------------*/
		
		.milestones .tabs {
			position: absolute;
			width: 35px;
			padding: 20px 0;
			margin: 0 40px;
			top: 70px;
			left: 0;
			z-index: 10;
		}	
		
			.milestones .tabs a {
				background-color: #fff;
				width: 12px;
				height: 12px;
				display: block;
				border-radius: 12px;
				margin: 20px 10px;
				cursor: pointer;
			}
				.milestones .tabs a.current {
					background-color: transparent;
					border: solid #fff 2px;
					width: 14px;
					height: 14px;
					border-radius: 18px;
					margin: 20px 7px;
				}
				
		.milestones .box {
			width: 100%;
			height: 370px;
			position: relative;
			overflow: hidden;
			float: left;
			z-index: 5;
		}
			.milestones .box .vert {
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
			}
			
			.milestones .box .slide {
				display: none;
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 100% auto;
			}
				.milestones .box .slide.slide1 { background-image: url(../images/milestones/carousell-image-1.jpg); }
				.milestones .box .slide.slide2 { background-image: url(../images/milestones/carousell-image-2.jpg); }
				.milestones .box .slide.slide3 { background-image: url(../images/milestones/carousell-image-3.jpg); }
				.milestones .box .slide.slide4 { background-image: url(../images/milestones/carousell-image-4.jpg); }
				.milestones .box .slide.slide5 { background-image: url(../images/milestones/carousell-image-5.jpg); }

				.milestones .box .slide .content {
					margin-left: 50%;
					padding: 100px 100px 0;
					height: 270px;
					background: url(../images/milestones/circle-bg.png) left center no-repeat;
				}
			
			.milestones .cheight {
				position: absolute;
				width: 100%;
				height: 100%;
			}

/****************************************************************************
	Certified Coffee Panel
****************************************************************************/

	/*---------------------------------------------------------------
		Core
	---------------------------------------------------------------*/
		
		.certifiedCoffee {
			background: url(../images/certifiedCoffee/certifiedCoffee-bg.jpg) center top no-repeat #141414;
			min-height: 550px;
		}
			.certifiedCoffee .col2-3s .content { padding: 100px 40px 60px; }
				.certifiedCoffee .col2-3s .content .content { padding: 0px 40px; }
			
			.certifiedCoffee .content h2 {
				text-indent: -1000px;
				color: #fff;
				overflow: hidden;
				background: url(../images/certifiedCoffee/certifiedCoffee-title.png) left top no-repeat;
				min-height: 35px;
			}
			.certifiedCoffee .content p {
				color: #fff;
				line-height: 1.8em;
				margin-bottom: 20px;
			}
				.certifiedCoffee .content p.herbalOrange { color: #e74c39; }
	
/****************************************************************************
	Quote & Contact Page
****************************************************************************/

	/*---------------------------------------------------------------
		Form
	---------------------------------------------------------------*/
		
		.contact .form,	
		.quote .form {
			float: left;
			width: 660px;
			min-height: 200px;
		}
			.contact .form .content,
			.quote .form .content {
				padding: 0 20px;
			}
			
				.contact .form h3,
				.quote .form h3 {
					line-height: 100%;
					padding-bottom: 10px;
					border-bottom: solid #e0e0e0 1px;
				}
					.contact .form h3 span.p,
					.quote .form h3 span.p {
						font-size: 12px;
						font-weight: normal;
						color: #636363;
						float: right;
					}
					
	/*---------------------------------------------------------------
		Right Panel
	---------------------------------------------------------------*/
		
		.contact .rightCol 	{ background-color: #5f504e; /*Light Brown*/ }
		.quote .rightCol 	{ background-color: #7aa4dd /*Light Blue*/ }
	
		.contact .rightCol,
		.quote .rightCol {
			float: left;
			width: 330px;
			color: #fff;
			margin-bottom: 40px;
		}
			.contact .rightCol .content,
			.quote .rightCol .content { padding: 20px; }
			
				.contact .rightCol h5,
				.quote .rightCol h5 {
					line-height: 100%;
					padding-bottom: 8px;
					margin: 0 0 10px;
					border-bottom: solid transparent 1px;
				}
					.contact .rightCol h5 { border-color: #7f7371; }
					.quote .rightCol h5 { border-color: #95b6e4; }
					
				.contact .rightCol p,
				.contact .rightCol ul li,
				.quote .rightCol p,
				.quote .rightCol ul li { color: #fff; line-height: 2em; }
				
				.contact .rightCol p,
				.quote .rightCol p {
					
					padding: 0;
					margin: 0 0 10px;
				}
				.contact .rightCol ul,
				.quote .rightCol ul {
					list-style-type: none;
					padding: 0;
					margin: 0 0 4px;
					border-top: solid #95b6e4 1px;
				}
					.contact .rightCol ul li,
					.quote .rightCol ul li {
						font-weight: bold;
						padding: 4px 0;
						border-bottom: solid #95b6e4 1px;
					}
				
				.contact .rightCol .btn,
				.quote .rightCol .btn {
					border-color: #fff;
					color: #fff;
				}
					.contact .rightCol .btn:hover,
					.quote .rightCol .btn:hover {
						border-color: transparent;
						color: #236093;
						background-color: #fff;
					}
					
/****************************************************************************
	Buttons
****************************************************************************/
	
	a.btn {
		display: inline-block;
		background-color: transparent;
		border: solid #236093 1px;
		font-size: 12px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		line-height: 2em;
		color: #236093;
		min-width: 200px;
		padding: 0.6em 20px;
		margin: auto;
		
		transition: all 0.4s;
		-webkit-transition: all 0.4s; /* Safari */
	}
		a.btn:hover {
			background-color: #236093;
			color: #fff;
		}
		
		
	a.btn.highlight {
		background-color: rgb(0,86,150);
		border-color: transparent;
		color: #fff;
	}
		a.btn.highlight:hover {
			background-color: rgba(0,86,150,0.8);
		}
	
/****************************************************************************
	Back to top
****************************************************************************/
	
	.backToTop {
		position: relative;
		display: block;
	}
		.backToTop:after {
			content: "";
			width: 48px;
			height: 48px;
			background: url(../images/footer/backToTop-ie8.png) center center no-repeat;
			background-size: 100%;
			border-radius: 48px;
			position: absolute;
			left: 50%;
			bottom: -24px;
			margin-left: -24px;
		}
	
/****************************************************************************
	Footer
****************************************************************************/
	
	.footer { background-color: #5d4f4c; min-height: 100px; }
		
		.footer #mars-footer-panel {
			margin-top: 0px;
		}
			.footer #mars-footer-panel .mars-footer-container { margin-top: 60px; }