.header__bg { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 100;   height: 112px; background-color: #FFFFFF;  }
.header__outer { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 200;   height: 112px;  }
.header__inner { display: flex; flex-flow: row nowrap; justify-content: space-between;  align-items: center; width: 100%;  padding: 16px 96px;  position: relative;  font-size: 0px; line-height: 0px; border: 0px solid red;  }

.header__inner:before { content: ""; position: absolute; top: 50%; left: 0px; width: 100%; border-top: 1px solid black;  display: none;   }

.header__left { position: relative;  display: inline-block; border: 0px solid blue;  text-align: left; width: calc(100% - 45px); z-index: 200;  display: inline-flex; flex-direction: row; flex-wrap: nowrap;  justify-content: flex-start; align-items: center;}
.header__right { position: relative;  display: inline-block; border: 0px solid blue;   text-align: right;   z-index: 200;  flex-shrink: 0; }
.header__middle { position: relative; width: 90px; display: inline-block; border: 0px solid blue; text-align: center; vertical-align: top; flex-shrink: 0; z-index: 200; }
.header__middle a { position: relative; width: 100%; display: inline-block;  }
.header__middle a img {  position: relative; width: 100%; display: block;  }


.header__left a { position: relative; width: 90px; display: inline-block;  }
.header__left a img {  position: relative; width: 100%; display: block;  }
.header__strapline {  position: relative;  display: inline-block; vertical-align: top; padding-left: 32px;   font-family: 'VAGRoundedNext-Regular'; font-size: 18px; line-height: 24px; color: #ec1c99; max-width: 440px; opacity: 1; transition: opacity 0.3s; }

/* SIDENAV */
.menu__icon__outer {  position: relative; display: inline-block;  z-index: 101;  border: 0px solid #ec1c99; cursor: pointer; padding: 3px 0px;  border-radius: 19px; margin: 0px 16px;    }
.menu__icon__outer:hover { border: 0px solid #ec652c;  }
.menu__button__text { display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 28px; line-height: 28px; vertical-align: top; text-transform: uppercase;   }
.menu__icon__outer:hover .menu__button__text { color: #ec652c;  }
.o-grid__item {  display: inline-block; margin-right: 0px; vertical-align: top;    }
.c-hamburger { display: block; position: relative; overflow: hidden; margin: 0; padding: 0; margin-top: 0px; width: 36px; height: 36px; font-size: 0; text-indent: -9999px; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer;  border: 0px; overflow: visible;   }
.c-hamburger:focus { outline: none; }
.c-hamburger span { display: block; position: absolute; top: 16px; left: 0px; right: 0px; height: 3px; background-color: #ec1c99; border-radius: 0px;  }
.c-hamburger span:before, .c-hamburger span:after { position: absolute; display: block; left: 0; width: 100%; height: 3px; background-color: #ec1c99; content: ""; border-radius: 0px;   }
.c-hamburger span:before { top: -12px; }
.menu__icon__outer:hover .c-hamburger span:before, .menu__icon__outer:hover .c-hamburger span, .menu__icon__outer:hover .c-hamburger span:after {  background-color: #ec652c; }
.c-hamburger span:after { bottom: -12px;}
.c-hamburger--htx { background-color: transparent }

.c-hamburger--htx span:before,
.c-hamburger--htx span:after { transition-duration: 0.3s, 0.3s, 0.3s; transition-delay: 0.3s, 0.3s, 0s;   }
.c-hamburger--htx span:before { transition-property: height, top,  transform; }
.c-hamburger--htx span:after {  transition-property: height, bottom, transform; }
.c-hamburger--htx.is-active span, .is-active .c-hamburger--htx span {  background: none !important; }
.c-hamburger--htx.is-active span::before, .is-active .c-hamburger--htx span::before { height: 3px; top: 0px; transform: rotate(45deg);  }
.c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::after {  height: 3px; bottom: 0px; transform: rotate(-45deg);   }
.c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::before, .is-active .c-hamburger--htx span::after {  transition-delay: 0s, 0s, 0.3s; }

.c-hamburger--htx.is-search span, .is-search .c-hamburger--htx span {  background: none !important; }
.c-hamburger--htx.is-search span::before, .is-search .c-hamburger--htx span::before { height: 3px; top: 0px; transform: rotate(45deg);  }
.c-hamburger--htx.is-search span::after, .is-search .c-hamburger--htx span::after {  height: 3px; bottom: 0px; transform: rotate(-45deg);   }
.c-hamburger--htx.is-search span::before, .c-hamburger--htx.is-search span::after, .is-search .c-hamburger--htx span::before, .is-search .c-hamburger--htx span::after {  transition-delay: 0s, 0s, 0.3s; }


.header__button { position: relative; display: inline-block; font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99; font-size: 28px; line-height: 28px; text-align: center; vertical-align: top; text-transform: uppercase; z-index: 101;  border: 2px solid #ec1c99; cursor: pointer; padding: 5px 16px;  border-radius: 19px; margin-left: 16px;  background-color: #FFFFFF;  opacity: 1; transition: opacity 0.3s; min-width: 140px; }
.header__button a { color: inherit; }
.header__button:hover { border: 2px solid #ec652c;  color: #ec652c; }
.sidebar_open .header__right .header__button { opacity: 0; transition: opacity 0.5s;   }



.home_icon {position: relative; display: inline-block; width: 44px; height: 40px; margin-left: 16px; vertical-align: top;  }
.home_icon svg { display: block; width: 100%; height: 100%; }
.home_icon_path { fill:#EB1682; }
.home_icon:hover .home_icon_path { fill: #ec652c; }

.search_icon { position: relative; display: inline-block; width: 40px; height: 40px; margin-left: 16px; vertical-align: top; cursor: pointer; opacity: 1; transition: opacity 0.3s; }
.sidebar_open .header__right .search_icon { opacity: 0; transition: opacity 0.5s;   }

.home_icon svg { display: block; width: 100%; height: 100%; }
.search_icon_svg_path { fill:#EB1682; }
.search_icon:hover .search_icon_svg_path { fill: #ec652c; }


/* BREADCRUMB */
.breadcrumb__outer {  position: fixed; top: 112px; display: block; width: 100%; background-color: #ec1c99;  z-index: 100;  }
.breadcrumb__inner { position: relative; margin: 0 auto; width: 100%; padding: 8px 96px; text-align: left; font-family: 'VAGRoundedNext-Light'; font-size: 18px; line-height: 18px; color: #FFFFFF;  }




@media only screen and (max-width: 500px) {
  .header__bg { height: 66px;   }
  .header__outer { height: 66px;  }
  .header__inner {  padding: 8px 8px;  height: 100%;   }
  .header__middle { order: -1; width: 56px;   }
  .header__left { width: auto;  flex-grow: 1; text-align: right; }
  .header__right { width: 90px; flex-grow: 0;  padding-top: 4px; flex-shrink: 0; }
  
.header__button  { font-size: 13px; line-height: 14px;  padding: 3px 6px;  border-radius: 11px; margin: 0px 0px 0px 4px;    }
.menu__icon__outer {   padding: 3px 6px;  border-radius: 11px; margin: 0px 0px 0px 4px;  }
.menu__button__text {  font-size: 14px; line-height: 14px;  }

.c-hamburger { width: 24px; height: 24px;  }
.c-hamburger span { top: 9px; height: 2px; border-radius: 0px; }
.c-hamburger span:before { top: -8px; height: 2px; border-radius: 0px; }
.c-hamburger span:after { bottom: -8px; height: 2px; border-radius: 0px; }

.c-hamburger--htx.is-active span::before, .is-active .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
.c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

.c-hamburger--htx.is-search span::before, .is-search .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
.c-hamburger--htx.is-search span::after, .is-search .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }



.home_icon { display: none;  }
.header__button { display: none;   }

.search_icon { width: 24px; height: 24px; margin-left: 0px;  }

.menu__item--mobile_only  { display: block;   }

.header__left a { position: relative; width: 40px; display: inline-block; flex-shrink: 0;  }
.header__strapline { font-size: 12px; line-height: 12px; text-align: left; padding-left: 16px;   }
.sidebar_open .header__strapline { opacity: 0; transition: opacity 0.5s;   }

.breadcrumb__outer { top: 66px;  }
.breadcrumb__inner  {  padding: 8px 16px; font-size: 12px; line-height: 12px;  }
.home_bc { display: none;   }

}



@media only screen and (min-width: 501px) and (max-width: 580px) { /* BLUE */
  
  .header__bg { height: 66px;   }
  .header__outer { height: 66px;  }
  .header__inner {  padding: 16px 16px;   }
  
  .header__middle { order: -1; width: 72px;   }
  .header__left { width: auto;  flex-grow: 1; text-align: right; }
  .header__right { width: 90px; flex-grow: 0; flex-shrink: 0;   }
  
  .header__button  { font-size: 14px; line-height: 14px;  padding: 3px 8px;  border-radius: 11px; margin: 0px 0px 0px 8px;    }
  .menu__icon__outer {   padding: 3px 8px;  border-radius: 11px; margin: 0px 0px 0px 8px;  }
  .menu__button__text {  font-size: 14px; line-height: 14px;  }
  
  .c-hamburger { width: 24px; height: 24px;  }
  .c-hamburger span { top: 9px; height: 2px; border-radius: 0px; }
  .c-hamburger span:before { top: -8px; height: 2px; border-radius: 0px; }
  .c-hamburger span:after { bottom: -8px; height: 2px; border-radius: 0px; }

  .c-hamburger--htx.is-active span::before, .is-active .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
  .c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

  .c-hamburger--htx.is-search span::before, .is-search .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
  .c-hamburger--htx.is-search span::after, .is-search .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

  
  .home_icon { display: none;  }
  .header__button { display: none;   }
  .search_icon { width: 24px; height: 24px;  }
  .menu__item--mobile_only  { display: block;   }
  
  .header__left a { position: relative; width: 40px; display: inline-block; flex-shrink: 0;  }

.header__strapline { font-size: 12px; line-height: 12px; text-align: left; padding-left: 16px;   }
.sidebar_open .header__strapline { opacity: 0; transition: opacity 0.5s;   }
  
.breadcrumb__outer { top: 66px;  }
.breadcrumb__inner  {  padding: 8px 16px; font-size: 12px; line-height: 12px;  }  
  
}

@media only screen and (min-width: 581px) and (max-width: 767px) { /* RED */
  
  .header__bg { height: 92px;   }
  .header__outer { height: 92px;  }
  .header__inner {  padding: 16px 16px; height: 100%;   }
  
  .header__middle { order: -1; width: 80px;   }
  .header__left { width: auto;  flex-grow: 1; text-align: right; }
  .header__right {  width: 124px; flex-grow: 0; flex-shrink: 0; }

  .header__button  { font-size: 18px; line-height: 18px;  padding: 4px 12px;  border-radius: 14px; margin: 0px 8px;    }
  .menu__icon__outer {   padding: 4px 12px;  border-radius: 14px; margin: 0px 8px;  }
  .menu__button__text {  font-size: 18px; line-height: 18px;  }
  
  .c-hamburger { width: 34px; height: 34px;  }
  .c-hamburger span { top: 12px; height: 2px; border-radius: 0px; }
  .c-hamburger span:before { top: -10px; height: 2px; border-radius: 0px; }
  .c-hamburger span:after { bottom: -10px; height: 2px; border-radius: 0px; }

  .c-hamburger--htx.is-active span::before, .is-active .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
  .c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

  .c-hamburger--htx.is-search span::before, .is-search .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
  .c-hamburger--htx.is-search span::after, .is-search .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

    .search_icon { width: 34px; height: 34px;  }
  
  .home_icon { display: none;  }
  .header__button { display: none;   }
  .menu__item--mobile_only  { display: block;   }
  
  .header__left a { position: relative; width: 70px; display: inline-block; flex-shrink: 0;  }
.header__strapline { font-size: 16px; line-height: 16px; text-align: left; padding-left: 24px;   }
  
.breadcrumb__outer { top: 92px;  }
.breadcrumb__inner  {  padding: 8px 16px; font-size: 12px; line-height: 12px;  }
  
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
  
}



/********  Tablet Portrait   **********/
@media only screen and (min-width:  768px) and (max-width: 840px)   { /* PINK */
.content { border: 0px solid pink;  border-width: 0px 0px;   }
.header__bg { height: 102px;   }
.header__outer { height: 102px;  }

.header__inner { padding: 16px 16px;  height: 100%;  }

.header__left { width: auto;  flex-grow: 1; text-align: right; }
.header__right {  width: 124px; flex-grow: 0; flex-shrink: 0; }


  .header__button  { font-size: 22px; line-height: 22px;  padding: 4px 12px;  border-radius: 16px; margin: 0px 8px;    }
    .header__button { display: none; }
  .menu__icon__outer {   padding: 4px 12px;  border-radius: 16px; margin: 0px 4px;  }
  .menu__button__text {  font-size: 22px; line-height: 22px;  }

  
  .c-hamburger { width: 34px; height: 34px;  }
  .c-hamburger span { top: 12px; height: 2px; border-radius: 0px; }
  .c-hamburger span:before { top: -10px; height: 2px; border-radius: 0px; }
  .c-hamburger span:after { bottom: -10px; height: 2px; border-radius: 0px; }

  .c-hamburger--htx.is-active span::before, .is-active .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
  .c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

  .c-hamburger--htx.is-search span::before, .is-search .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
  .c-hamburger--htx.is-search span::after, .is-search .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

    .search_icon { width: 34px; height: 34px;  }
    .home_icon { width: 37px; height: 34px; }
    
    .header__left a { position: relative;  width: 80px; display: inline-block; flex-shrink: 0;  }
.header__strapline { text-align: left;   }

.breadcrumb__outer { top:102px;  }
  .breadcrumb__inner  {  padding: 8px 16px; font-size: 12px; line-height: 12px;  }

}



@media only screen  and (min-width: 841px) and (max-width: 1000px)  { /* YELLOW */
  .content {  border: 0px solid yellow;  border-width: 0px 0px;  }
  .header__inner { padding: 16px 16px;   }

    .header__button  { font-size: 22px; line-height: 22px;  padding: 4px 12px;  border-radius: 16px; margin: 0px 8px;    }
    .menu__icon__outer {   padding: 4px 12px;  border-radius: 16px; margin: 0px 4px;  }
    .menu__button__text {  font-size: 22px; line-height: 22px;  }

    .header__button { display: none; }
    
    .header__left { width: auto;  flex-grow: 1; text-align: right; }
    .header__right {  width: 124px; flex-grow: 0; flex-shrink: 0; }
    
    .c-hamburger { width: 34px; height: 34px;  }
    .c-hamburger span { top: 12px; height: 2px; border-radius: 0px; }
    .c-hamburger span:before { top: -10px; height: 2px; border-radius: 0px; }
    .c-hamburger span:after { bottom: -10px; height: 2px; border-radius: 0px; }

    .c-hamburger--htx.is-active span::before, .is-active .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
    .c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

    .c-hamburger--htx.is-search span::before, .is-search .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
    .c-hamburger--htx.is-search span::after, .is-search .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

      .search_icon { width: 34px; height: 34px;  }
      .home_icon { width: 37px; height: 34px; }
      
      .header__left a { position: relative;   display: inline-block; flex-shrink: 0;  }

        .header__strapline { text-align: left;   }
    .breadcrumb__inner  {  padding: 8px 16px; }
}



@media only screen  and (min-width: 1001px) and (max-width: 1264px)  { /* BLACK */
    .content {  border: 0px solid black;   border-width: 0px 0px; }
  
    .header__inner { padding: 16px 16px; height: 100%;   }
    
        .header__button  { font-size: 22px; line-height: 22px;  padding: 4px 12px;  border-radius: 16px; margin: 0px 8px;    }
        .menu__icon__outer {   padding: 4px 12px;  border-radius: 16px; margin: 0px 4px;  }
        .menu__button__text {  font-size: 22px; line-height: 22px;  }

        
        .c-hamburger { width: 34px; height: 34px;  }
        .c-hamburger span { top: 12px; height: 2px; border-radius: 0px; }
        .c-hamburger span:before { top: -10px; height: 2px; border-radius: 0px; }
        .c-hamburger span:after { bottom: -10px; height: 2px; border-radius: 0px; }

        .c-hamburger--htx.is-active span::before, .is-active .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
        .c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

        .c-hamburger--htx.is-search span::before, .is-search .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
        .c-hamburger--htx.is-search span::after, .is-search .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

          .header__left a { position: relative;   display: inline-block; flex-shrink: 0;  }

          .search_icon { width: 34px; height: 34px;  }
          .home_icon { width: 37px; height: 34px; }
    .breadcrumb__inner  {  padding: 8px 16px; }
    
}

@media only screen  and (max-height: 500px)  { 
.header__middle { width: 50px;   }
.header__inner { padding: 8px 16px; height: 100%;    }
.header__bg { height: 62px;   }
.header__outer { height: 62px;  }

.breadcrumb__outer { top: 62px;  }

.header__left a { position: relative; width: 40px; display: inline-block; flex-shrink: 0;  }
.header__strapline { font-size: 12px; line-height: 12px; text-align: left; padding-left: 16px;   }
.search_icon { width: 24px; height: 24px;  }
.menu__icon__outer {   padding: 3px 6px;  border-radius: 11px; margin: 0px 0px 0px 4px;  }
.menu__button__text {  font-size: 14px; line-height: 14px;  }

.c-hamburger { width: 24px; height: 24px;  }
.c-hamburger span { top: 9px; height: 2px; border-radius: 0px; }
.c-hamburger span:before { top: -8px; height: 2px; border-radius: 0px; }
.c-hamburger span:after { bottom: -8px; height: 2px; border-radius: 0px; }

.c-hamburger--htx.is-active span::before, .is-active .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
.c-hamburger--htx.is-active span::after, .is-active .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

.c-hamburger--htx.is-search span::before, .is-search .c-hamburger--htx span::before { height: 2px; top: 0px; transform: rotate(45deg);  }
.c-hamburger--htx.is-search span::after, .is-search .c-hamburger--htx span::after {  height: 2px; bottom: 0px; transform: rotate(-45deg);   }

}