/*
 * DEFAULT WQED THEME COLORS
 * Blue: #1E549C
 * Dark Blue: #003F6A
 */
 
/* RESET DRUPAL MENU STYLING */
ul li.expanded,
ul li.leaf {
	list-style: none;
}

#header {
  background-color: #1E549C;
  font-family: 'Montserrat', sans-serif;
  position: relative;
	z-index: 100;
}

#header-logo {
  background-color: #003F6A;
}

#header-logo img {
  height: 1.7em;
  padding: 4px;
  position: relative;
  width: auto;
  z-index: 10;
}

#header-menu-toggle {
  padding: .7em;
  position: absolute;
  right: 0;
  top: 0;
}

#header-menu-toggle-img {
  height: 2em;
  width: 2em;
}

#header-buttons {
  background-color: transparent;
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 50px;
  top: -4px;
}

#header-buttons.mobile-show {
  background-color: #1E549C;
  padding: 0 5px;
  position: relative;
  right: 0;
  top: 0;
}

#header-buttons ul {
  padding: 0;
  position: relative;
  text-align: center;
}

#header-buttons ul li {
  border: 2px solid #fff;
  display: inline-block;
  font-size: .9em;
  font-weight: bold;
  list-style: none;
  margin: 0 2px;
  padding: 0 5px;
  position: relative;
}

#header-buttons ul li#header-button-shop,
#header-buttons ul li#header-button-mywqed {
  display: none;
  
}
#header-buttons.mobile-show ul li#header-button-shop,
#header-buttons.mobile-show ul li#header-button-mywqed {
  display: inline-block;
  width: calc(33.33% - 3px);
}

#header-buttons ul li a {
  color: #fff;
  text-decoration: none;
}

#header-buttons ul li a:hover {
  text-decoration: none;
}

#header-buttons a:before  {
  background-repeat: no-repeat;
  background-size: 100%;
  content: ' ';
  display: inline-block;
  height: 1.3em;
  margin-right: .3em;
  position: relative;
  top: .25em;
  width: 1.3em;
}

#header-button-donate a:before {
  background-image: url('../images/heart.png');
}

#header-button-shop a:before {
  background-image: url('../images/shopping-cart.png');
}

#header-button-mywqed a:before {
  background-image: url('../images/passport.png');
}

#header-button-donate {
  background-color: #E03642;
  text-transform: uppercase;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
}

#header-button-donate:hover {
  background-color: #a42730;
}

#header-button-shop {
  background-color: #00A651;
  text-transform: uppercase;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
}

#header-button-shop:hover {
  background-color: #00793b;
}

#header-button-mywqed {
  background-color: #01AAEB;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
}

#header-button-mywqed:hover {
  background-color: #008cc2;
}

#header-menu {
  display: none;
}

#main-menu--search {
  display: none;
}

#header-search {
  background-color: #1E549C;
  display: none;
  padding: 10px;
  margin: 0;
}

#header-search input.form-text {
  border: none;
  font-family: inherit;
  height: 30px;
  padding: 0 .5em 0;
  width: calc(100% - 117px);
  
  -webkit-appearance: none;
  -webkit-border-radius:0
}

#header-search .form-actions {
  border: 2px solid #fff;
  cursor: pointer;
  float: right;
  font-size: .9em;
  padding: 0 4px;
  position: relative;
  margin: 0 2px;
}

#header-search .form-actions:hover {
  
}

#header-search input.header-search-submit {
  border: none;
  background-color: inherit;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  text-transform: uppercase;
}

#header-search img {
  display: inline-block;
  height: 19px;
  margin-right: 4px;
  position: relative;
  top: 4px;
  width: 19px;
}

#header-menu {
  background-color: #1E549C;
}

#header-menu .expanded:before {
  border-bottom: .4em solid transparent;
  border-left: .4em solid #fff;
  border-top: .4em solid transparent;
  content: ' ';
  display: inline-block;
  height: 0;
  width: 0;
  padding-right: 5px;
}

#header-menu .expanded.active-submenu::before,
#header-menu .expanded.active-submenu::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -ms-transform-origin: 25% 50%; /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  -webkit-transform-origin: 25% 50%; /* Chrome, Safari, Opera */
  transform: rotate(90deg);
  transform-origin: 25% 50%;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}

#header-menu .expanded > a {
  cursor: pointer;
}

#header-menu ul {
  padding: 0;
}

#header-menu ul a {
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
}

#header-menu ul a:hover {

}

#header-menu ul li {
  margin: 0;
  padding: .5em .5em .4em 1.2em;
}

#header-menu ul li ul {
  display: none;
  padding: .5em .5em .4em 1em;
}

#header-menu ul li ul li {
  
}

#header-menu .expanded {
  margin: 0;
}

#header-menu .expanded:hover {
  background-color: #003F6A;
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
}

#header-menu .leaf {
  margin: 0;
}

#header-menu .leaf a:hover {
  border-bottom: 3px solid #fff;
  transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
}

@media screen and (min-width: 335px) {
  #header-buttons.mobile-show ul li {
    margin: 0;
    width: calc(33.33% - 3px);
  }
}

/*
 * PORTRAIT TABLET+
 * Header Buttons next to menu hamburger
 */
 
@media screen and (min-width: 575px) {
  #header-buttons {
    background-color: transparent;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 50px;
    top: -4px;
    width: 344px;
    z-index: 10;
  }
  #header-buttons ul li {
    margin: 0;
    width: calc(33.33% - 3px);
  }
  #header-buttons ul li#header-button-shop,
  #header-buttons ul li#header-button-mywqed  {
    display: inline-block;
    
  }
}

/*
 * DESKTOP VERSION
 */
 
@media screen and (min-width: 1350px) {
  #header {
    position: fixed;
    width: 100%;
  }
	
  #header-menu-toggle {
    display: none;
  }
	
  #header-buttons {
    right: 10px;
  }
	
  #header-menu {
    background-color: #003F6A;
    display: block;
    margin: 0;
    padding-right: 5em;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
  
  #header-menu ul {
    padding: 0;
    text-align: center;
  }

  #header-menu .first ul {
    padding-top: .5em;
  }

  #header-menu ul a {
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
  }

  #header-menu ul a:hover {
    background-color: transparent;
    border-bottom: 3px solid #fff;
    transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
  }

  #header-menu ul li {
    display: inline;
    margin: 0;
    padding: .5em .5em .4em 1.2em;
  }

  #header-menu ul li ul {
    display: none;
    padding: .5em .5em .4em 1em;
  }

  #header-menu ul li ul li {
  	
  }

  #header-menu .expanded ul {
    background-color: #1E549C;
    margin-top: 16px;
    padding-top: 5px;
    position: absolute;
    width: 100%;
  }
	
  #header-menu .expanded ul li {
    display: inline-block;
    margin: auto;
    position: relative;
  }

  #header-menu .expanded:hover {
    background-color: transparent;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
  }

  #header-menu .leaf {
    margin: 0;
  }

  #header-menu .leaf a:hover {
    border-bottom: 3px solid #fff;
    transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
  }
	
  #header-search {
    background-color: #1E549C;
    display: none;
    padding: 10px;
    margin: auto;
    width: 60%;
  }

  #header-search input.form-text {
  	
  }
  #header-search .form-actions {
    border: 2px solid #fff;
    float: right;
    font-size: .9em;
    margin: 0 2px;
    padding: 0 4px;
    position: relative;
  }
  
  #header-search input.header-search-submit {
    background-color: inherit;
    border: none;
    color: #fff;
    font-family: inherit;
    font-weight: bold;
    text-transform: uppercase;
  }

  #header-search img {
    
  }
	
  #main-menu--search a:hover {
    border: none;
    text-decoration: none;
  }

  #main-menu--search a:before  {
    background-repeat: no-repeat;
    background-size: 100%;
    content: ' ';
    display: inline-block;
    height: 1.1em;
    margin-right: .5em;
    position: relative;
    top: .2em;
    width: 1.1em;
  }

  #main-menu--search a:before {
    background-image: url('../images/search.png');
  }
}