/*********************
BOGO STYLES
*********************/
[type=button].close-button {
	color: #fff; 
}

.icon-bogo {
	width: 110px;
	height: 110px;
	background: url('../icon-bogo.html') no-repeat center;
	display: block; 
	position: relative;
}
	.icon-bogo.small {
		width: 30px;
		height: 30px;
	}
	.icon-bogo.medium {
		width: 60px;
		height: 60px;
	}
	
	.icon-bogo-top-corner {
		position: absolute; 
		top: 0;
		right: 0;
		z-index: 100;
	}


.block-bogo {
	position: relative;
	margin: 0 auto;
}
.block-bogo.max-width {
	max-width: 2220px;
}
	.block-bogo .btn {
		background: #19a5cc;
		text-transform: uppercase;
		color: #fff; 
		font-family: 'Ridley Grotesk';
		font-weight: 700;
		appearance: none;
		-webkit-appearance: none;
	}
		.block-bogo .btn:hover {
			background: #0f5c89;
			color: #fff;
		}
		.block-bogo h2 {
			font-size: 54px;
			line-height: 1.1;
		}
	.block-bogo .grid-x {
		-webkit-flex-flow: row wrap;
		-moz-flex-flow: row wrap;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
		justify-content: center;
		-webkit-box-align: stretch;
		-ms-flex-align: stretch;
		-webkit-align-items: stretch;
		-moz-align-items: stretch;
		align-items: stretch;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flexbox;
		display: flex;
	}
		.block-bogo .grid-item {
			width: calc(100% / 2); 
			height: auto;
		}
		.block-bogo .grid-item.full {
			width: 100%;
		}
			.grid-item .item-inner {
				padding: 0 2vw; 
				margin: 0 auto;
			}
			.grid-item .item-inner article {
				padding: 70px 0; 
				text-align: center;
			}
			
			
	.promo--bogo.full {
		background: #7d2b8b url('../banner-bogo-full.html') no-repeat center;
		background-size: 145%; 
		position: relative;
	}	
		.promo--bogo.full .item-inner {
			top: auto;
			transform: none;
			-webkit-transform: none; 
		}
		.promo--bogo.full .add-bogo-snacks {
			position: relative;
			overflow: hidden;
		}	
		.promo--bogo.full .add-bogo-snacks article {
			position: relative;
			z-index: 10;
		}
			.promo--bogo.full .add-bogo-snacks article:after {
				content: '';
				background: url('../bogo-snacks-full.html') no-repeat center;
				background-size: contain; 
				display: block;
				position: absolute;
				top: calc(50% + 30px);
				left: 50%; 
				transform: translate(-50%,-50%);
				-webkit-transform: translate(-50%,-50%);
				width: calc(100% + 300px); 
				height: 38vw;
				min-height: 500px;
				z-index: -1;
			}
			
			@media screen and (max-width: 640px) {
					.promo--bogo.full {
						background-size: cover; 
					}
					.promo--bogo.full .add-bogo-snacks:after {
						width: 200vw;
						height: 100vw; 
						z-index: 1; 
						position: absolute; 
					}
			}
			
			
	.promo--bogo {
		background: url('../banner-bogo-main.html') no-repeat center;
		background-size: cover; 
	}		
		.promo--bogo h2 {
			color: #fff;
			font-size: 50px;
		}
		.promo--bogo h3 {
			font-family: 'Ridley Grotesk', 'helvetica', sans-serif;
			font-weight: 700;
			color: #fff; 
			font-size: 28px;
			line-height: 1.3;
			margin: 0 0 0; 
		}
		.promo--bogo h5 {
			color: #fff;
			font-size: 20px; 
			text-transform: uppercase;  
		}
		.promo--bogo .btn {
			margin-bottom: 0; 
		}
		.promo--bogo .item-inner {
			top: auto;
			position: relative;
			transform: none;
			-webkit-transform: none;
		}
		.promo--bogo article {
			max-width: 520px;
			margin: 0 auto; 
		}
	
	.promo--drink {
		background: url('../banner-bogo-drinks.html') no-repeat center bottom;
		background-size: cover; 
	}
		.grid-item.promo--drink article {
			padding: 60px 0 160px;
			max-width: 560px; 
			margin: 0 auto;
		}
		.promo--drink h2 {
			font-size: 38px;
			color: #fff; 
			line-height: 1.1; 
		}
		.promo--drink h3 {
			font-family: 'Ridley Grotesk', 'helvetica', sans-serif;
			font-weight: 700;
			color: #fff; 
			font-size: 18px;
			line-height: 1.3;
			margin: 0 0 16px; 
		}
		
	.promo--cold-shipper {
		background: #ff6000 url('../banner-bogo-cold-shipper.html') no-repeat center;
		background-size: cover; 
	}
		.promo--cold-shipper h2 {
			color: #fff; 
			font-size: 38px;
		}
		.promo--cold-shipper h3 {
			font-family: 'Ridley Grotesk', 'helvetica', sans-serif;
			font-weight: 700;
			color: #fff; 
			font-size: 20px;
			line-height: 1.3;
		}
		.promo--cold-shipper .btn {
			margin-bottom: 0;
		}
		.promo--cold-shipper img {
			max-width: 270px;
			width: 100%;
		}
			.promo--cold-shipper .item-inner {
				top: auto;
				position: relative;
				transform: none;
				-webkit-transform: none;
			}
			.grid-item.promo--cold-shipper article {
				max-width: 550px; 
				margin: 0 auto; 
				padding: 30px 0; 
			}
			
			
	.promo--upgrade {
		background: #19a5cc;
		background-size: cover; 
	}
		.promo--upgrade h2 {
			color: #fff;
			font-size: 38px;
			margin-top: 20px; 	
		}		
		.promo--upgrade h3 {
			font-family: 'Ridley Grotesk', 'helvetica', sans-serif;
			font-weight: 700;
			color: #fff; 
			font-size: 20px;
			line-height: 1.3;
			margin: 0 0 18px; 
		}
		.promo--upgrade figure { 
			background: #168eb0;
		}
		.promo--upgrade img {
			margin: 0 auto;
			display: block;
			width: 100%;
			max-width: 400px; 
			position: relative;
			bottom: -10px;
		}
		.promo--upgrade .btn {
			background: #fff; 
			color: #19a5cc;
		}
			.promo--upgrade .item-inner {
				padding: 0; 
			}
			.grid-item.promo--upgrade article {
				position: relative;
				bottom: 0; 
				background: #19a5cc;
				width: 100%; 
				padding: 0 0 0;
			}
			
			
@media screen and (max-width: 640px) {
	
		.modal--bogo h1 {
			font-family: 'Ridley Grotesk', 'helvetica', sans-serif;
			font-weight: 700;
			font-size: 34px;
		}
	
		.block-bogo .grid-x {
			-webkit-flex-flow: column nowrap;
			-moz-flex-flow: column nowrap;
			-ms-flex-flow: column nowrap;
			flex-flow: column nowrap;
		}
			.block-bogo .grid-item {
				width: 100%; 
				position: relative;
			}
			
				.promo--bogo .item-inner {
					top: auto;
					transform: none;
					-webkit-transform: none;
					padding: 0 5vw; 
				}
				
				.promo--cold-shipper .item-inner {
					top: auto;
					transform: none;
					-webkit-transform: none;
				}
			.promo--cold-shipper h2,
			.promo--upgrade h2,
			.promo--bogo h2,
			.promo--drink h2 {
				font-size: 36px;
			}
			
			.promo--drink h3 {
				font-size: 20px; 
			}
	
}