/****************************************
* Shopping cart
****************************************/

.shopping-cart.open .wrapper {
  max-width: 400px;
}

/****************************************
* Header
****************************************/

header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

header .logo {
  display: inline-block;
  margin: 0;
  max-width: 400px;
}

header .logo svg {
  width: 400px;
}

/****************************************
* Navigation
****************************************/

nav {
  margin-left: 2rem;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 350px;
  padding: 0;
  list-style: none;
}

nav a {
  margin: 0 10px;
  padding: 0 10px;
  color: #0072ce;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.4s ease-in;
}

nav a:hover,
nav li.active a {
  background-color: #f2a900;
  border-radius: 5px;
  color: #ffffff;
  padding: 10px;
}

/****************************************
* Shopping cart button
****************************************/

.shopping-cart-btn {
  margin-left: 1rem;
}

.shopping-cart-btn {
  background-color: #0072ce;
  border-radius: 20px;
  width: auto;
  height: 40px;
  padding: 0 .5rem;
}

.shopping-cart-btn:hover {
  background-color: #0d62a9;
}

.shopping-cart-btn,
.shopping-cart-btn > div {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.shopping-cart-btn .price {
  margin: 0 .5rem;
  color: #ffffff;
  font-size: 14px;
}

.shopping-cart-btn .quantity {
  background-color: #f2a900;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  color: #ffffff;
  font-size: 14px;
}

/****************************************
* Hamburger button
****************************************/

.burgerBtn,
.burgerBtn:before,
.burgerBtn:after {
  display: none;
}

/****************************************
* Banner
****************************************/

.banner.plain,
.banner.inside.forSale {
  max-height: 200px;
}

.banner .description svg {
  width: 25px;
  height: 25px;
}

/****************************************
* Featured products
****************************************/

.featuredProducts .product {
  display: flex;
  background-color: #0072ce;
}

.featuredProducts .product:hover,
.featuredProducts .info {
  visibility: hidden;
}

.featuredProducts .product .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.featuredProducts .product:hover .info {
  visibility: visible;
}

.featuredProducts .product .info {
  position: absolute;
  background-color: rgba(239, 246, 252, .7);
  width: 100%;
  height: 100%;
  padding: 1.5rem;
}

.featuredProducts .info h2 {
  margin-bottom: .25rem;
  font-size: 30px;
}

.featuredProducts .info p {
  margin-bottom: .5rem;
  font-size: 20px;
  line-height: 20px;
}

.featuredProducts .flexRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: auto;
}

.featuredProducts .addToCard > .flexRow a,
.featuredProducts .addToCard > .flexRow button {
  display: inline-block;
  width: auto;
}

.featuredProducts form > div {
  display: block;
  margin: 1rem auto;
  width: 80px;
}

.featuredProducts .addToCard .button {
  margin-left: 1rem;
}

.featuredProducts .addToCard .dark {
  margin: 0 auto;
}

/****************************************
* About
****************************************/

.aboutCompany .grid {
  grid-template-columns: 1fr 1fr;
}

/****************************************
* Shop products
****************************************/

.shopProducts .product h3 {
  font-size: 30px;
}

.shopProducts .product .tag {
  bottom: -21px;
  padding: .25rem 1rem;
}

.shopProducts .product .tag p {
  font-size: 14px;
}

/****************************************
* Delivery Details
****************************************/

.deliveryDetails svg {
  margin-right: .5rem;
}

/****************************************
* Checkout page
****************************************/

.checkout .col-md-7,
.checkout .col-md-5 {
  padding: 0 3rem;
}

.checkout .checkoutCartProducts {
  max-height: 430px;
  padding: .5rem;
  overflow-y: scroll;
}

/****************************************
* Product category
****************************************/

.productCategory .flex {
  flex-direction: row;
}

.productCategory .flex > div:first-of-type {
  order: 1;
}

.productCategory .flex > div:last-of-type {
  order: 2;
}

.productCategory h2,
.productCategory h3,
.productCategory p {
  text-align: left;
}

.productCategory .accent2 {
  margin-bottom: 0;
}

/****************************************
* Weekly fish update
****************************************/

.weeklyFishUpdate .content {
  text-align: left;
}

.weeklyFishUpdate .flex {
  display: flex;
  flex-direction: row;
}

.weeklyFishUpdate .flex > div:first-of-type {
  margin-right: 2rem;
}

.weeklyFishUpdate .flex img {
  width: 200px;
}

/****************************************
* Breadcrumb
****************************************/

.breadcrumb svg {
  width: 15px;
  height: 15px;
}

.breadcrumb p,
.breadcrumb a {
  font-size: 14px;
}