/***************************** HEADER BEGINS *****************************/

#gt-header {
  position: relative;
  margin-top: .75rem;
  background: var(--gt-gold);
}

  #gt-header-bg-accent-row {
    position: absolute;
    background: var(--gt-gold-drk-half);
    width: 100%;
    height: 20px; /* must match height of angle-top-wrapper */
    overflow: hidden;
  }  
  
  #striped-accent-bar {
    position: relative;
    z-index: 1000;
    background: #FFFFFF url('../images/stripe.svg');
    background-repeat: repeat-x;
    background-size: auto 100%; 
    background-size: 26px 26px;     
  }

    #striped-accent-bar #ctn {      
      min-width: 180px;
      height: 100%;
      border-left: 10px solid #FFFFFF; /* for padding */
      border-right: 5px solid #FFFFFF; /* for padding */
      background: #ffffff url('../images/creating_the_next_gold.svg');
      background-repeat: no-repeat;      
      background-size: contain;
    }
  
    #striped-accent-bar #ctn-angle {
      overflow: hidden;
      position: relative;  
      width: 0;
      height: 0;
      border-bottom: 20px solid transparent; /* borders are .6 ratio for 60deg angle */
      border-right: 12px solid #FFFFFF; /* borders are .6 ratio for 60deg angle */
    }
  
  #angle-top-wrapper {
    height: 20px; /* must match angle-after-logo negative top px */
    width: 100%;
    overflow: hidden;
  }
  
    #angle-top-goldblock {  
      width: 100%;
      height: 100%;
      background: var(--gt-mdlt-gold);
    }
    
    #angle-top {
      overflow: hidden;
      position: relative;        
      width: 0; 
      height: 0;
      border-bottom: 120px solid var(--gt-mdlt-gold); /* borders are .6 ratio for 60deg angle */
      border-right: 72px solid transparent;  /* borders are .6 ratio for 60deg angle */    
    }
      
  #gt-header-content {
    background: var(--gt-gold-grad);              
  }
  
    #logo-wrapper {    
      height: 100px;      
      width: 100%;
      overflow: hidden;
    } 
    
      #logo-goldblock {
        width: 100%;
        height: 100%;
        padding: .4rem 0;
        background: var(--gt-gold);
      }
      
      #angle-after-logo {
        overflow: hidden;
        position: relative;        
        width: 0; 
        height: 0;
        top: -20px; /* must match angle-top-wrapper height */
        border-bottom: 120px solid var(--gt-gold); /* borders are .6 ratio for 60deg angle */
        border-right: 72px solid transparent;  /* borders are .6 ratio for 60deg angle */    
      }
      
      #gt-logo {
        position: relative;
        content: ' ';
        width: 100%;
        height: 100%;
        background: url('../images/gt-logo.svg');
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        margin-left: 15px;
    }          

    #site-title {
      position: relative;
      min-height: 100%;
      top: 0;
      bottom: 0;
      overflow: hidden;
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    
      #site-title h2 {
        font-family: 'Abel', sans-serif;
        font-weight: 100;
        font-size: 2.4rem;
        line-height: 1;
        display: flex;
        color: var(--gt-blktxt);
      }
      
      #site-title h3 {
        font-family: "Roboto Condensed", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        font-size: 1.15rem;
        line-height: 1;
        display: flex;
        font-weight: 400;
        text-transform: uppercase;
        color: var(--gt-blktxt);
      }

/****************** SEARCH AND GIVE NOW ******************/


/** Action Links - Give, Etc **/
#action-links, #search-wrapper {
  height: 1rem;
  margin: 0 .35rem;
  display: table;
}

#action-links a{
  color: var(--gt-drk-gold);
  letter-spacing: .03rem;
  padding: 0 .5rem;  
  font-size: .85rem;
  line-height: 1;
  margin-right: 1rem;
  display: table-cell;
  vertical-align: middle;
  border: 0;
  padding: 0;
  margin: 0;
  font-weight: 700;
}

#action-links a::after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17" width="11" height="12"><polygon fill="%23B3A369" points="10.5,0 5.7,0 10.5,8.4 5.7,17 10.5,17 15.5,8.4"/></svg>');
  width: 0;
  left: 100%;
  top: 50px;
  display: table-cell;
  vertical-align: middle;
  }
  
#action-links a:after, 
#action-links a:link:after, 
#searchtoggl:after {
  border-top: 0 !important;
}

/*search button */

#search-wrapper a {   
  color: var(--gt-drk-gold);
  letter-spacing: .03rem;
  padding: 0 .5rem;  
  font-size: .85rem;
  line-height: 1;
  padding: 0;
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  font-weight: 700;
}

/* fix button style*/
button.search-label { 
  color: var(--gt-drk-gold);  
  border: 0;
  background-color: transparent;
  margin: 0;
  padding: 0;
  padding-right: 0;
  font-weight: 700;
}

#searchtoggl:after{
  font-family: "Font Awesome 5 Free"; 
  height: 0;
  width: 0;
  font-size: .8rem;
  font-weight: 900; 
  content: "\f002";
  color: var(--gt-gold);
  display: table-cell;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

/** hidden search field **/
#searchform-wrapper {
  position: absolute;
  margin-right: 15px;
  top: 100%;
}

#searchform{
  font-size: 1rem;
  display: none;  
  z-index: 9999;

  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
}

/* remove bootstrap blue outline from buttons */
input[type="search"], textarea {
  outline: none;
  box-shadow:none !important;
  border:1px solid #ccc !important;
  padding: .25rem;
}


/***************************** HEADER RESPONSIVENESS BEGINS *****************************/

@media (max-width: 1200px) {
  body {
    border-left: 2px solid purple;
  }
  #logo-wrapper {
    height: 85px;
  }
  #gt-logo {
    margin-left: .5rem;
  }
}
      
@media (max-width: 992px) {
  body {
    border-left: 2px solid cyan;
  }
  #logo-wrapper {
    height: 80px;
  }
  #site-title h1 {
    font-size: 2.2rem;
    margin: .25rem 0;
  }
  #site-title h2 {
    font-size: 1.1rem;
    margin: .25rem 0;
  }
}

@media (max-width: 767px) {
  body {
    border-left: 2px solid green;
  }
  #gt-header {
    margin-top: 0;
  }
  .gt-navbars {
	  padding: 0 1rem;
  }
  .container {
    width: 100%;
    min-width: 100%;
  }
  #logo-wrapper {
    height: 70px;
  }
  #striped-accent-bar {
    background: #FFFFFF url('../images/stripes-sm.svg');
    background-repeat: repeat-x;
    background-size: auto 100%;    
  }   
  #angle-top-wrapper, #gt-header-bg-accent-row {      
    height: 10px; /* must match angle-after-logo negative top px */    
  }  
  #angle-after-logo {
    top: -10px; /* must match angle-top-wrapper height */  
    }
  #site-title h1 {
    font-size: 1.7rem;
    margin: .125rem 0;
  }
  #site-title h2 {
    font-size: .95rem;
    margin: .125rem 0;
  }
}

@media (max-width: 575px) {
  body  {
    border-left: 2px solid fuchsia;
  }
  #logo-wrapper {
    height: 50px;
  }
  #site-title {
    padding: 15px !important;
    background: #FFFFFF;
    }
  #site-title:after {
    content: ' ';
    position: relative;
    width: 100%;
    height: 5px;
    border-bottom: 1px solid var(--gt-gold);
    display: block;
  }
  #site-title h2 {
      color: var(--gt-drk-gold);
    }
}