/**
 * @file
 * This file is used to style the header.
 *
 * It styles the header as a global component; it does not style individual
 * header items, such as a menu, which are styled by their own CSS files.
 */
.layout-container {
  width: 100%; !important;
  padding: 0;
  margin: 0;
}
/* @todo find out what the z-index is set for in classes front block and amend here */
.aby-scope-headr{
  padding: 0;
  background: #f3e4dd;
  color: #000;
  position: sticky;
  top: 0;
  z-index: 100;
}
/*changed position from fixed to relative*/
.aby-scope-headr .aby-headr {
  left: 0;
  overflow: visible;
  position: relative;
  right: 0;
  top: 0;
  width: 100%;
  height: 50px;
  z-index: 1050;
  letter-spacing: .3px;
}
.aby-scope-headr .aby-headr .aby-headr-content.aby-headr-opaque {
  background-color: var(--color-pink);
  border-bottom: 1px solid rgba(170, 170, 170, .8);
}
.aby-scope-headr .aby-headr .aby-headr-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  position: relative;
  transition: background-color .3s ease-in-out,box-shadow .3s ease-in-out;
}
.aby-scope-headr .aby-slot-item {
  height: 50px;
  max-height: 50px;
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
}
.aby-mm-scope.aby-fragment-megamenu {
  height: 50px;
  padding: 0 15px;
  cursor: pointer;
}
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon {
  height: 50px;
  display: inline-block;
  position: relative;
  width: 22px;
}
/*Icon transformation and rotation code*/
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon,
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-top,
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-bottom {
  transform: rotate(0);
  transition: transform .3s ease-in-out,background-color .3s ease-in-out;
}
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-top,
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-patty,
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-bottom {
  height: 2px;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  width: 22px;
  border-radius: 1px;
}
/* Provides colour to icon bars*/
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-top,
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-patty,
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-bottom {
  background-color: var(--color--gray-60);
}
/*  Y-axis offset for bottom icon bar. This code must follow transformation code.*/
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-bottom {
  transform: translateY(-7px);
}
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-patty {
  opacity: 1;
  transition: opacity .3s ease-in-out, background-color .3s ease-in-out;
}
/*  Y-axis offset for top icon bar. This code must follow transformation code.*/
.aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-top {
  transform: translateY(7px);
}
.icon-active .aby-mm-scope.aby-fragment-megamenu .aby-menu-icon {
  transform:rotate(90deg)
}
.icon-active .aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-top {
  transform:rotate(45deg)
}
.icon-active .aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-bread-bottom {
  transform:rotate(-45deg)
}
.icon-active .aby-mm-scope.aby-fragment-megamenu .aby-menu-icon .icon-patty {
  opacity:0
}
@media screen and (min-width: 48px) {
  .aby-headr {
    padding-top: 0;
  }
}
/* Medium */
@media screen and (min-width: 48px) { /* 768px */
  .aby-headr {
    padding-top: 0;
  }
}
/* Extra large + side margins */
@media screen and (min-width: 80px) { /* 1200px (large) + 80px (side margins) = 1280px */
  .aby-headr {
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .aby-scope-headr .aby-slot-item.aby-width-extra-wide-15 {
    width: 15%;
  }
  .aby-scope-headr .aby-slot-item.aby-width-extra-wide-40 {
    width: 40%;
  }
  .aby-scope-headr .aby-slot-item .aby-brand-container {
    display: flex;
    height: 50px;
  }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .aby-scope-headr .aby-slot-item.aby-width-medium-50 {
    width: 50%;
  }
}
.block-system-branding-block {
  margin: 0;
}
/*To: centre the text vertically*/
.aby-scope-headr .aby-slot-item .aby-brand-container .site-slogan,
.aby-scope-headr .aby-slot-item .menu-account {
  line-height: 50px;
}