html {
	background-color: #DFD;
	background-image: url("/v1/images/pickle-jars--page-background.jpg");
    background-repeat: repeat repeat;
    background-position: center;
}

body {
	display: grid;
	position: relative;
	padding-top: 100px;
	padding-bottom: 100px;
}

.body {
	display: grid;
	justify-self: center;
	justify-items: center;
	align-self: center;
	align-items: center;
	align-content: center;
	max-width: 1280px;
}

a {
	color: inherit;
	text-decoration: none;
}

li {
	a {
		color: inherit;
		text-decoration: none;
	}
}

span {
	display: inline;
}

.emoji {
	vertical-align: middle;
	margin-left: 10px;
	width: 30px;
	height: auto;
}

.page-header {
 	display: grid;
    margin: 0;
	justify-content: center;
	align-self: center;
	background-color: #DFD;
	font-family: "Sanvito Pro";
	font-weight: bold;
	color: #104010;
	white-space: nowrap;
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
}

.icon {
	grid-column: 1 / span 1;
	grid-row: 1 / span 2;
	align-content: center;
	padding: 2% 1% 1% 1%;
}

.page-title {
	grid-column: 2 / span 1;
	justify-self: baseline;
	align-content: center;
	margin: 1% 5% 2%;
	padding: 0.1% 5% 0.1% 5%;
	border: 5px solid #104010;
    border-radius: 80px;
	font-size: 80px;
}

.zesti {
	color: #960000;
}

.place-order {
	display: grid;
	background-color: #DFD;
	justify-self: center;
    margin: 0;
    padding: 1% 2%;
	text-align: center;
    font-size: 60px;
    font-family: "Sanvito Pro";
    font-weight: bold;
    color: #104010;
	width: 100%;
	position: fixed;
	bottom: 0px;
	left: 0px;

	a {
		text-decoration: underline;
	}
}

.tagline {
	text-align: center;
    font-size: 70px;
    font-family: "Sanvito Pro";
    font-weight: bold;
    color: #960000
}

.section {
	display: grid;
    justify-content: center;
    margin: 5% 10% 5% 10%;
    padding: 2% 5% 2% 5%;
    border: 5px solid #104010;
    border-radius: 80px;
    background-color: #DFD;
	width: 80%;
}

.section-heading {
	grid-column: 1 / span 3;
    border: 5px transparent;
    border-radius: 80px;
	background-color: #960000;
	vertical-align: middle;
	text-align: center;
    font-size: 60px;
    font-family: "Sanvito Pro";
    font-weight: bold;
    color: #DFD;
}

.section-heading-image {
	vertical-align: middle;
}

.section-content-left {
	grid-column: 1 / span 2;
    justify-content: center;
    margin: 2%;
    border: 5px transparent;
    border-radius: 80px;
    background-color: transparent;
	text-align: center;
    font-size: 30px;
    font-family: "BitterRegular";
    color: #960000;
}

.section-content-right {
	grid-column: 2 / span 2;
    justify-content: right;
    margin: 2%;
    border: 5px transparent;
    border-radius: 80px;
    background-color: transparent;
	text-align: center;
    font-size: 30px;
    font-family: "BitterRegular";
    color: #104010;
}

.section-content-full {
	display: grid;
	grid-column: 1 / span 3;
    justify-content: center;
	align-items: center;
	margin: 2%;
    border: 5px transparent;
    border-radius: 80px;
	text-align: center;
    font-size: 30px;
    font-family: "BitterRegular";
}

.left-aligned {
	text-align: left;
}

.right-aligned {
	text-align: right;
}

.first {
	margin-top: 5%;
}

.odd {
    color: #104010;
}

.even {
    color: #960000;
}

.garlic-optional {
	font-style: italic;
    color: #960000;
}

.pickle-image-left {
	grid-column: 1 / span 1;
    margin: 2%;
    padding: 2% 5%;
    color: #104010;
	vertical-align: middle;
}

.pickle-blurb-right {
	grid-column: 2 / span 2;
    margin: 2%;
    border: 5px transparent;
    border-radius: 80px;
    background-color: transparent;
    color: #104010;
}

.pickle-blurb-right-title {
	grid-column: 1 / span 3;
	margin: 2% 5%;
	border-bottom: 3px solid currentColor;
    font-family: "BitterBold";
	font-size: 30px;
	font-variant-caps: small-caps;
    color: #104010;
}

.pickle-image-right {
	grid-column: 3 / span 1;
    margin: 2%;
    padding: 2% 5%;
    color: #960000;
	vertical-align: middle;
}

.pickle-blurb-left {
	grid-column: 1 / span 2;
    margin: 2%;
    border: 5px transparent;
    border-radius: 80px;
    background-color: transparent;
    color: #960000;
}

.pickle-blurb-left-title {
	grid-column: 1 / span 3;
	margin: 2% 5%;
	border-bottom: 3px solid currentColor;
    font-family: "BitterBold";
	font-size: 30px;
	font-variant-caps: small-caps;
    color: #960000;
}

.pickles-sample-set {
	grid-column: 1 / span 1;
    justify-content: center;
	align-items: center;
	align-content: center;
}

.promo-text {
	color: #dd4010;
}

.promo-validity {
	color: #dd4010;
	font-size: 20px;
	font-style: italic;
}

.promo-price {
	color: #960000;
}

.original-price {
	text-decoration: line-through;
	text-decoration-color: #960000;
}