*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	font-family: 'Heebo', sans-serif;
	font-size: 1.2rem;
}

.banner {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	background-image: linear-gradient(
		to right bottom,
		#CB4CF0 -25%,
		#34ADFF,
		#4BFF74 125%);
	height: auto;
	box-shadow: 0 2px 2px #875BAA;
	font-size: 1.5rem;
	padding: .9rem 3rem;
}

.banner div {
	max-width: 700px;
	margin: 0 auto;
}

.banner span {
	font-family: 'FontAwesome';
	font-size: 9rem;
	text-shadow: 0 0 30px #FFFFFF;
	color: #fff;

}

.banner p {
	display: inline-block;
	max-width: 450px;
	color: #fff;
	vertical-align: top;
}
@media (min-width: 600px) {
	.banner {
		padding: 1rem 5rem;
		font-size: 2.5rem;
	}
	.banner span {
		font-size: 12rem;
	}
}
@media (min-width: 827px) {
	.banner {
		padding: 2.5rem 8rem;
	}
}
@media (min-width: 1024px) {
	.banner {
		padding: 3rem 13rem;
	}
}

.product_listings {
	max-width: 1000px;
	margin: 1rem auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

.product {
	flex-basis: 100%;
	padding: 10px;
	transition: all .3s ease;
	background-color: #fff;
	text-align: center;
}

.product_title {
	margin: 0 0 5px;
	float: left;
}
.product_price {
	margin: 0 0 5px;
	float: right;
}
.product_description {
	font-size: .9rem;
	clear: both;
	text-align: left;
}

@media (min-width: 600px) {
	.product {
		flex-basis: 32%;
	}
	.product:focus,
	.product:hover {
		transform: scale(1.1);
		box-shadow: 0 0 10px #80867F;
		background-color: #FFFFDF;
		z-index: 5;
	}
}

@media (min-width: 1024px) {
	.product {
		flex-basis: 25%;
	}
}
.add_to_cart {
	padding: 7px 11px;
	margin: 0 auto;
	display: inline-block;
	vertical-align: bottom;
	border-radius: 4px;
	border: none;
	background-color: #ACF596;
	color: #A4A4A4;
	font-size: .9rem;
	transition: background-color .5s ease,
				color .5s ease;
}
.add_to_cart:hover,
.add_to_cart:focus {
	cursor: pointer;
	background-color: #6ECD55;
	color: #FFFFFF;
}

.promoCodes {
	text-align: center;
}

/*########################
	Show / Hide Cart Button
########################*/

#toggle_cart {
	margin: 1rem auto;
	padding: 7px 11px;
	font-size: .9rem;
	border-style: none;
	border-radius: 4px;
	background-color: #6BB9FB;
	display: block;
	transition: all .5s ease;
	color: #E3E3E3;
}

#toggle_cart:hover,
#toggle_cart:focus {
	background-color: #358AFB;
	color: #fff;
	cursor: pointer;

}
.secondary_section {
	max-width: 1000px;
	margin: 2rem auto;
}

.columns {
	background-color: #F9FFEB;
	text-align: center;
	padding: 10px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;

	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-content: center;
}
@media (max-width: 600px) {
	.columns,
	.cart_item,
	.cart_total_area {
		font-size: .9rem;
	}
}
@media (max-width: 1024px) {
	.columns,
	.cart_item,
	.cart_total_area {
		margin: 5px;
		font-size: 1rem;
	}
}
.cart_column {
	text-transform: capitalize;
	color: #616161;
}

.cart_item {
	margin-top: 20px;
	border-bottom: 1px solid #CDCDCD;
	padding-bottom: 20px;

	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.shopping_cart > div:nth-last-of-type(2) {
	margin-bottom: 0;
	border-bottom: none;
}

.shopping_cart {
	width: 100%;
}

.cart_item button {
	padding: 3px 8px;
	border-radius: 4px;
	border: none;
	background-color: #F89684;
	color: #E3E3E3;
	font-size: .8rem;
	transition: background-color .5s ease,
				color .5s ease;
}
.cart_item button:hover,
.cart_item button:focus {
	background-color: #F0655F;
	color: #fff;
	cursor: pointer;
}

.item_image,
.item_title,
.item_price,
.item_quantity,
.item_subtotal {
	display: inline-block;
	vertical-align: top;
	color: #8A8A8A;
}

.item_quantity > input {
	border: 1px solid #CDCDCD;
	padding: 4px 7px;
	font-size: .9rem;
	max-width: 45px;
	margin-bottom: 10px;
	border-radius: 4px;
}

a {
	text-decoration: none;
	color: #358AFB;
	font-size: .9rem;
	border-bottom: 1px solid transparent;
	transition: color .5s ease,
				border-bottom .5s ease;
}

a:hover,
a:focus {
	border-bottom: 1px solid #34B92A;
	color: #34B92A;
}

.cart_total_area {
	margin-top: 0;
	float: right;
	text-align: right;
	background-color: #F9FFEB;
	width: 100%;
	border-top: 2px solid #616161;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #616161;
}

.cart_subtotal,
.promo_code {
	margin-right: 85px;
	margin-left: 50px;
}
.cart_promo_button {
	padding: 3px 8px;
	display: inline-block;
	vertical-align: middle;
	border: none;
	border-radius: 4px;
	background-color: #6BB9FB;
	color: #E3E3E3;
	font-size: .8rem;
	margin-right: 15px;
	transition: background-color .5s ease,
				color .5s ease;
}
.cart_promo_button:hover,
.cart_promo_button:focus {
	background-color: #358AFB;
	color: #fff;
	cursor: pointer;
}
.promo_code {
	border-radius: 4px;
	border: 1px solid #CDCDCD;
	padding: 4px 7px;
	font-size: .9rem;
	margin-top: 20px;
	margin-left: 40px;
	margin-right: 20px;
	width: 70px;
}

.cart_discount_value {
	margin-right: 85px;
	margin-left: 50px;
	display: inline-block;
}

.cart_total_value {
	margin-right: 85px;
	margin-left: 50px;
	margin-top: 40px;
	display: inline-block;
}
.cart_continuingshopping_button,
.cart_checkout_button {
	padding: 7px 11px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 4px;
	border: none;
	background-color: #6BB9FB;
	color: #E3E3E3;
	margin-top: 30px;
	margin-right: 30px;
	font-size: .9rem;
	transition: background-color .5s ease,
				color .5s ease;
}

.cart_continuingshopping_button:hover,
.cart_checkout_button:hover,
.cart_continuingshopping_button:focus,
.cart_checkout_button:focus   {
	background-color: #358AFB;
	color: #fff;
	cursor: pointer;
}
.cart_continuingshopping_button:active,
.cart_checkout_button:active {
	background-color: #C483FB;
}

.footers {
	background-image: linear-gradient(
		to right bottom,
		#4F1D5D -25%,
		#144769,
		#1B5C2B 125%);
	padding: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
		clear: right;
}

.foot1,
.foot2,
.foot3,
.foot4 {
	flex-basis: 100%;
}

@media (min-width: 600px) {
	.foot1,
	.foot2,
	.foot3,
	.foot4 {
		flex-basis: 50%;
	}
}
@media (min-width: 1024px) {
	.foot1,
	.foot2,
	.foot3,
	.foot4 {
		flex-basis: 25%;
	}
}
.navigation {
  margin-top: 2em;
  list-style: none;
  text-align: center;
  padding-left: 0;
}

.navigation a {
  display: inline-block;
  padding: 20px 180px;
  text-decoration: none;
  font-family: sans-serif;
  color: #000;
}

.navigation a:hover,
.navigation a:focus {
	border-bottom: none;
  background:
    linear-gradient(
      to bottom right,
      rgba(139,125,239, 0.65), rgba(59,153,239, .65)
    );
}