/*
	CHOCOLATIER ENTRIES
 */
	
	div.Chocolatier {
		display: inline-block;
		vertical-align: top;
		position: relative;
		background-color: rgb(242,238,235);
		border-radius: 3px;
	}
	div.Chocolatier div.ElementNav { padding-right: 1vw; }
	div.Chocolatier > a {
		display: inline-block;
		position: absolute;
	}
	div.Chocolatier > a > img {
		border-radius: 50%;
	}
	div.BrandFrom { text-align: left; }
	
	@media screen and (max-width: 767px) {
		div.Chocolatier {
			width: 81vw;
			min-height: 26vw;
			margin: 3vw 3vw 2vw 16vw;
			padding: 1vw 2vw 0vw 15vw;
		}
		div.Chocolatier > a {
			top: -3vw;
			left: -13vw;
			width: 26vw;
			height: 26vw;
		}
		div.Chocolatier > a > img {
			width: 26vw;
			height: 26vw;
			border: 5px solid white;
		}
	}
	@media screen and (min-width: 768px) and (max-width: 1279px) {
		div.Chocolatier {
			width: 35vw;
			min-height: 16vw;
			margin: 2vw 1vw 2vw 9vw;
			padding: 0.5vw 0 0vw 8.5vw;
		}
		div.Chocolatier > a {
			top: -1vw;
			left: -8vw;
			width: 16vw;
			height: 16vw;
		}
		div.Chocolatier > a > img {
			width: 16vw;
			height: 16vw;
			border: 8px solid white;
		}
	}
	@media screen and (min-width: 1280px) {
		div.Chocolatier {
			width: 25vw;
			min-height: 10vw;
			margin: 3vw 1vw 2vw 6vw;
			padding: 0.5vw 0 0vw 5.5vw;
		}
		div.Chocolatier > a {
			top: -0.5vw;
			left: -5vw;
			width: 10vw;
			height: 10vw;
		}
		div.Chocolatier > a > img {
			width: 10vw;
			height: 10vw;
			border: 5px solid white;
		}
	}


/*
	HERO
 */
	
	div.Hero {
	}
	div.Hero > div {
		background-color: rgba(242,238,235,1);
	}
	div.Hero div.ElementNav {
		margin-top: 0.3rem;
	}
	div.Hero div.ElementNav, div.Hero div.ElementNav ul, div.Hero div.ElementNav li {
		display: block;
		text-align: center;
	}

	@media screen and (max-width: 767px) {
		div.Hero {
			width: 100vw;
			position: relative;
			padding-top: 24vw;
			margin-bottom: 1rem;
		}
		div.HeroLink { width: 90vw; }
		
		div.Hero figure.Chocolatier {
			position: absolute;
			top: 0;
			left: 0;
			width: 27vw;
			height: 27vw;
			z-index: 31;
		}
		div.Hero figure.Products {
			position: absolute;
			top: 0;
			right: 0;
			width: 73vw;
			height: 27vw;
			z-index: 31;
			overflow: hidden;
		}
		div.Hero > div {
			position: relative;
			width: 90vw;
			padding: 8vw 5vw 5vw 5vw;
			background-color: rgba(242,238,235,0.7);
			z-index: 32;
		}
		div.BrandFrom {
			display: block;
		}
		img.Logo {
			width: calc(10vw * 1.618 * 1.618);
			height: 10vw;
		}
	}
	
	@media screen and (min-width: 768px) and (max-width: 1279px){
		div.Hero {
			width: 100vw;
			position: relative;
			padding-top: 20vw;
			margin-bottom: 1rem;
		}
		div.HeroLink { width: 90vw; }
		div.Hero figure.Chocolatier {
			position: absolute;
			top: 0;
			left: 10vw;
			width: 22vw;
			height: 22vw;
			z-index: 31;
		}
		div.Hero figure.Chocolatier img { }
		div.Hero figure.Products {
			position: absolute;
			top: 0;
			right: 10vw;
			width: 58vw;
			height: 22vw;
			overflow: hidden;
			z-index: 31;
		}
		div.Hero > div {
			position: relative;
			width: 62vw;
			padding: 4vw 2vw 2vw 2vw;
			background-color: rgba(242,238,235,0.7);
			z-index: 32;
		}
		div.BrandFrom {
			display: block;
		}
		img.Logo {
			width: calc(6vw * 1.618 * 1.618);
			height: 6vw;
		}
	}

	@media screen and (min-width: 1280px) {
		div.Hero {
			width: 80vw;
			margin: 0 4.5vw 1rem 15.5vw;
		}
		div.HeroLink { width: 80vw; }
		div.Hero figure, div.Hero > div {
			display: table-cell;
			vertical-align: middle;
		}
		div.Hero .Products {
			width: calc(15vw * 1.618 * 1.618);
			height: 15vw;
		}
		div.Hero .Chocolatier {
			width: 15vw;
			height: 15vw;
		}
		div.Hero > div {
			width: calc(80vw - 15vw - 15vw * 1.618 * 1.618);
			height: 15vw;
			padding: 0 1vw;
		}
		div.BrandFrom {
			display: block;
		}
		img.Logo {
			width: calc(3vw * 1.618 * 1.618);
			height: 3vw;
		}
	}

	div.ProductsCTA { padding: 1.5rem 0;}


/*
	CONTENTS
 */

	div.Content {
		padding-bottom: 1rem;
	}

	div.Content figure  {
		display: inline-block;
		vertical-align: top;
	}
	div.Content p {
		margin-bottom: 0.5rem;
	}
	@media screen and (max-width: 767px) {
		div.Content figure  {
			width: 62vw;
			height: 62vw;
		}
		div.Content h2 { margin-top: 2rem; }
		div.Content div {
			width: 80vw;
			text-align: left;
		}
	}
	@media screen and (min-width: 768px) and (max-width: 1279px) {
		div.Content figure  {
			width: 38vw;
			height: 38vw;
		}
		div.Content h2 { margin-top: 2rem; }
		div.Content div {
			width: 62vw;
			text-align: left;
		}
	}
	@media screen and (min-width: 1280px) {
		div.Content { display: inline-block; width: 60vw; }
		div.Content figure  {
			width: 20vw;
			height: 20vw;
		}
		div.Content div {
			display: inline-block;
			width: 26vw;
			vertical-align: top;
		}
		div.Content.Left div {
			text-align: left;
			margin: 5vw 3vw 0 1vw;
		}
		div.Content.Left figure {
			margin: 1rem 1vw 0 9vw;
		}
		div.Content.Right div {
			text-align: right;
			margin: 5vw 1vw 0 3vw;
		}
		div.Content.Right figure {
			margin: 0 9vw 0 1vw;
		}
	}