/* 
 HEADER VARS
*/
:root { 
   --header-height:		102px;
   --logo-height:		52px;
} 

.scrolled {
  --header-height:	 80px;
  --logo-height:    40px;
}
 

@media (max-width: 1260px) {
  
    :root {
        --header-height:	80px;
        --logo-height:		40px;
    }
    
   
}


 

@media (max-width: 600px) {
  
  :root {
      --header-height:		60px;
      --logo-height:		30px;
  }
  
  .scrolled {
    --header-height:	60px !important;
    --logo-height:		30px !important;
   }
}


/* 
 CLEAR HEADER 
*/
.hero__content,
.breadcrumb {
  margin-top: var(--header-height); }

.breadcrumb {
  padding: var(--spacing__sm) 0; }

.article.text-page {
  margin-top: calc(var(--header-height) + var(--spacing__md)); }

/* Sizes */
#branding {
  transition: height .4s;
height: var(--logo-height); }

.nav__main > li > a {
	height: var(--header-height);
	line-height: var(--header-height); }

@media (max-width: 1100px) {
  
  .breadcrumb {
    margin-top: 0;
    padding-top: calc(var(--header-height) + var(--spacing__sm)); }

}	



/* Main */	  	    
 
#header {
  position: relative;
  z-index: 90;
  width: 100%;
  top: 0;
  left: 0;
  transition: all .4s; }

.header-container {
  position: fixed;
  top: var(--spacing__xxs);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 var(--spacing__sm);
  z-index: 90;
  max-width: var(--layout__width);
  margin: 0 auto;  }

.header-container,
.nav__main__sub,
#header-search {
  border: 1px solid var(--color__blue__1);
  background: var(--color__navy__1);
  color: var(--color__white);
  border-radius: var(--border-radius);
  background: var(--color__navy__1__alpha95);
  transition: background .4s, border-radius .2s .2s, top .4s;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); }

.header-container:hover,
.search-active .header-container,
.nav__main__sub,
#header-search {
  background: var(--color__navy__1); }

/* Scrolled */
/* .scrolled #header {
  margin-top: -2px;
  padding-top: 0; } */

.scrolled #header .header-container {
  top: -2px;
  transition: background .4s, border-radius .2s .2s, top .4s;
  border-radius: 0 0 var(--border-radius) var(--border-radius); }


  
  
    
/* Branding */
#branding { }

#branding a {
  display: flex;
  align-items: center;
  height: 100%; }

#branding img.logo {
  height: 100%;
  width: auto;
  display: block;
  max-width: 100%; }



/* Main Navigation */
.nav__main li.has__dropdown .primary span:after{
  content: '';
  display: inline-block;
  margin-left: 10px;
  width: 10px;
  height: 7px;
  z-index: 1;
  /* transition: transform .2s; */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.80863 2.01656L4.93361 6.92578L0.0585938 2.01656L1.14187 0.925781L4.93365 4.74372L8.72542 0.925781L9.80863 2.01656Z' fill='white'/%3E%3C/svg%3E%0A"); }

.nav__main li.has__dropdown a.primary:hover span:after {
  transform: rotate(180deg); }
  
 #header.search-active .nav__main li.has__dropdown a.primary:hover span:after { /* Not when search active */
  transform: rotate(0);}
 
 
.nav__main li.button {
  margin-left: 1.5rem;
  margin-right: 1.5rem; }

.nav__main li.button span {
  border-radius: 25rem; } 
  
  	


/* Search */

/* Toggle */
#header-search__toggle span {
  display: flex; }

/* Search form */
#header-search {
  text-align: right;
  position: fixed;
  left: 0;
  top: 100%;
  opacity: 0;
  pointer-events: none;
  padding: var(--spacing__xs);
  transition: opacity 0.3s cubic-bezier(.4,0,.2,1);
  gap: var(--spacing__sm);
  z-index: 91;
  min-width: 200px;
  width: auto;
  width: 100%; }


#header-search.active {
  opacity: 1;
  pointer-events: auto; }
  
@media (max-width: 600px) {
  
  #header-search .inline-form {
    background: transparent; }
    
  #header-search .inline-form .single-input {
    background: var(--color__white); }
    
  #header-search .inline-form form {
    flex-wrap: wrap; }
  
  #header-search .inline-form button[type="submit"] {
    text-align: left;
    width: 100%; }
}




/* header__nav__toggle */
#header__nav__toggle,
.header__search__toggle.mobile {
  z-index: 2000;
  display: none; 
  border: none;
  height: 3rem;
  width: 3rem;
  cursor: pointer;
  position: absolute;
  right: var(--spacing__sm);
  top: 50%;
  transform: translateY(-50%); }

#header__nav__toggle {
  background: none; }

.header__search__toggle.mobile {
  right: calc(3rem + var(--spacing__sm) + 2rem); }


#header__nav__toggle .menu-icon {
  overflow: visible; }
  
#header__nav__toggle .menu-icon,
#header__nav__toggle .menu-icon:before,
#header__nav__toggle .menu-icon:after {
  background: var(--color__white);
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  transition: background ease .3s, top ease .3s .3s, transform ease .3s;
  width: 2.6rem; }
        
#header__nav__toggle .menu-icon {
  left: 0;
  top: 50%; }
  
#header__nav__toggle .menu-icon::before {
  top: -8px; }
    
#header__nav__toggle .menu-icon::after {
  top: 8px; }
    
#header__nav__toggle.open .menu-icon {
  background: transparent; }
    
#header__nav__toggle.open .menu-icon::before {
  transform: rotate(45deg); }
    
#header__nav__toggle.open .menu-icon::after {
  transform: rotate(-45deg); }
    
#header__nav__toggle.open .menu-icon::before,
#header__nav__toggle.open .menu-icon::after {
  top: 0;
  transition: top ease .3s, transform ease .3s .3s; }
    
    
    
@media (max-width: 1100px) {

  #header__nav__toggle {
    display: block; }

}



/* Search */
.nav__main li.search {
  transition: all .4s;
  margin-left: 1.5rem; }
   
.header__search__toggle {
  width: 21px;
  height: 21px;
  background: url('../../images/icon/ui/search.svg') no-repeat center;
  background-size: 21px; }  

.search-active .header__search__toggle {
  background-image: url('../../images/icon/ui/close.svg'); }
 
.nav__main li.search:hover {
  transform: scale(1.1); }