/* Main container */
#site-header {
    position: relative;

    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    flex-wrap: wrap;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack: space-between;
        -ms-flex-pack: space-between;
            justify-content: space-between;

    background:#649341;
    border-bottom:0.5rem solid #EDBF26;
    padding: 15px 15px;
    box-shadow: inset 0px -99px 55px -92px rgba(0,0,0,0.65);
}

#site-header > a {
    display: flex;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    height:45px;
    text-decoration:none;
    align-items: center;
    justify-content: center;
    opacity:1;
    transition: opacity 0.15s ease-in;
}

.checkbox-toggle {
    position: absolute;
    top:-500px; /*hide the actual checkbox, its label is used for activation */
    left:-500px;
    opacity: 0;
    visibility: hidden;
}

/* Logo */
#logo {
  height:40px;
}

#nav-entries-label {
  display:none;
}

/* Search */
#search-toggle:checked ~ #search-form {
  opacity:1;
  overflow:visible;
  left:15px;
  transition: left 0.15s ease-in, opacity 0.2s ease-in;
}


#search-toggle:checked ~ a {
  opacity:0;
  transition: opacity 0.25s ease-out;
}

#search-form {
  background-color: #FFF;
  color:rgb(42, 42, 42);
  position:relative;
  font-family:"Open Sans";
  max-height:34px;
  overflow:hidden;
  flex-grow: 1;
  transition: left 0.15s ease-out, opacity 0.2s ease-in;
  opacity:0;

  position:absolute;
  left:100%;
  right:15px;
}

#search-btn,
#search-close {
  display:none;
  display:flex;
  align-items:center;
  justify-content:center;
  position: absolute;
  top:0;
  right:43px;
  height:34px;
  width:43px;
}

#search-close {
  right:0;
}

#searh-close::before {
  border-left:1px solid lightgrey;
}

#search-box {
  background-color:#FFF;
}

#search-box::-ms-clear {
    display: none;
}
#search-box:focus {
    -webkit-box-shadow: 0px 0px 5px 2px rgba(106,160,65,1);
    box-shadow: 0px 0px 5px 2px rgba(106,160,65,1);
}
#search-box, .tt-hint {
    outline: none;
    border: none;
    width:100%;
    height:34px;
    line-height:normal;
    padding:9px 10px;
    font-family:"Open Sans";
    font-size:1rem;
    color:rgb(42, 42, 42);
}

/* Typeahead */
.twitter-typeahead {
    width:100%;
}
.tt-menu {
    background-color:#FFF;
    width:100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height:230px;
    padding-top:10px;
    border-radius:0px;
    z-index:999;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius:0px;
}
.tt-hint {
    color:#888;
}
.tt-suggestion.tt-cursor,
.tt-suggestion:hover {
    background-color:#A30434;
    color:#FFFFFF;
    cursor:pointer;
}
.tt-suggestion.tt-cursor strong,
.tt-suggestion:hover strong {
    color:#FFFFFF;
}
.tt-suggestion {
    padding:3px 10px;
    color:#515151;
}
.tt-suggestion strong {
    color:rgb(42, 42, 42);
}

@media only screen and (max-width: 350px) {
  #logo{ height:2.2em; } /* This makes the logo image smaller so it doesnt go over nav toggle button */
  main {
    max-width:100%;
    overflow-x:hidden;
  }
}

/* Medium devices (landscape tablets, 1024px and up) */
@media only screen and (min-width: 1200px) {
    #site-header {
        height:130px;
        flex-wrap:nowrap;
    }

    /* These styles extend the header background across the page */
    #site-header::before, #site-header::after {
        content: "";
        position: absolute;
        top:0;
        height:130px;
        width:100.8%;
        left:-100%;
        background:#649341;
        box-shadow: inset 0px -99px 55px -92px rgba(0,0,0,0.65);
        border-bottom:0.5rem solid #EDBF26;
    }

    #site-header::after {
        right:0;
        left:100%;
    }

    #site-header > a {
        margin-right:35px;
        height:60px;
        opacity:1;
        transition:none;
    }

    /* Hide to nav toggle button for mobile devices */
    #nav-open {
        display:none;
    }

    /* Display desktop logo, hide mobile logo */
    #logo {
        height:3.750em;
    }

    #site-header.fix {
        position: -webkit-sticky;
        position: sticky;
        top:0;
        z-index:99;
        height:85px;
    }
    #site-header.fix::before, #site-header.fix::after {
        height:85px;
    }
    #site-header.fix #logo {
        margin-top:10px;
        height:50px;
    }

    #nav-entries-label {
      display:inline;
    }

    #search-form {
      opacity:1;
      overflow:visible;
      max-height:initial !important;
      min-width:initial;
      left:initial;
      right:initial;
      border:5px solid lightgray;
      position:relative;
      width:100%;
    }

    #search-btn {
      right:0;
    }

    #search-close {
      display:none;
    }
    #search-open {
      display:none;
    }
}
/* Medium devices (landscape tablets, 1024px and up) */
@media only screen and (max-width: 1024px) {
#site-header::after {
        display:none;
    }
  }

  /* Ipad Pro Landscape mode*/
  @media only screen
  and (min-device-height: 1024px)
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    #nav-open {
      display: inherit;
    }

    #search-open {
       display: inherit;
    }
    #search-form {
      border: none;
      width: auto;
    }
    #site-header::before, #site-header::after {
      height: 83px;
    }
    #site-header {
      position: relative;
       height: 83px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;

      flex-wrap: wrap;

      -webkit-box-orient:horizontal;
      -webkit-box-direction:normal;
          -ms-flex-direction:row;
              flex-direction:row;
      -webkit-box-align:center;
          -ms-flex-align:center;
              align-items:center;
      -webkit-box-pack: space-between;
          -ms-flex-pack: space-between;
              justify-content: space-between;

      background:#649341;
      border-bottom:0.5rem solid #EDBF26;
      padding: 15px 15px;
      box-shadow: inset 0px -99px 55px -92px rgba(0,0,0,0.65);
  }

  #site-header > a {
      display: flex;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      height:45px;
      text-decoration:none;
      align-items: center;
      justify-content: center;
      opacity:1;
      transition: opacity 0.15s ease-in;
  }

  .checkbox-toggle {
      position: absolute;
      top:-500px; /*hide the actual checkbox, its label is used for activation */
      left:-500px;
      opacity: 0;
      visibility: hidden;
  }

  /* Logo */
  #logo {
    height:40px;
  }

  #nav-entries-label {
    display:none;
  }

  /* Search */
  #search-toggle:checked ~ #search-form {
    opacity:1;
    overflow:visible;
    left:15px;
    transition: left 0.15s ease-in, opacity 0.2s ease-in;
  }

  #search-toggle:checked ~ a {
    opacity:0;
    transition: opacity 0.25s ease-out;
  }

  #search-form {
    background-color: #FFF;
    color:rgb(42, 42, 42);
    position:relative;
    font-family:"Open Sans";
    max-height:34px;
    overflow:hidden;
    flex-grow: 1;
    transition: left 0.15s ease-out, opacity 0.2s ease-in;
    opacity:0;

    position:absolute;
    left:100%;
    right:15px;
  }

  #search-btn,
  #search-close {
    display:none;
    display:flex;
    align-items:center;
    justify-content:center;
    position: absolute;
    top:0;
    right:43px;
    height:34px;
    width:43px;
  }

  #search-close {
    right:0;
  }

  #searh-close::before {
    border-left:1px solid lightgrey;
  }

  #search-box {
    background-color:#FFF;
  }

  #search-box::-ms-clear {
      display: none;
  }
  #search-box:focus {
      -webkit-box-shadow: 0px 0px 5px 2px rgba(106,160,65,1);
      box-shadow: 0px 0px 5px 2px rgba(106,160,65,1);
  }
  #search-box, .tt-hint {
      outline: none;
      border: none;
      width:100%;
      height:34px;
      line-height:normal;
      padding:9px 10px;
      font-family:"Open Sans";
      font-size:1rem;
      color:rgb(42, 42, 42);
  }

  /* Typeahead */
  .twitter-typeahead {
      width:100%;
  }
  .tt-menu {
      background-color:#FFF;
      width:100%;
      overflow-y: auto;
      overflow-x: hidden;
      max-height:230px;
      padding-top:10px;
      border-radius:0px;
      z-index:999;
      -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
              box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      border-radius:0px;
  }
  .tt-hint {
      color:#888;
  }
  .tt-suggestion.tt-cursor,
  .tt-suggestion:hover {
      background-color:#A30434;
      color:#FFFFFF;
      cursor:pointer;
  }
  .tt-suggestion.tt-cursor strong,
  .tt-suggestion:hover strong {
      color:#FFFFFF;
  }
  .tt-suggestion {
      padding:3px 10px;
      color:#515151;
  }
  .tt-suggestion strong {
      color:rgb(42, 42, 42);
  }
  }
@media only screen 
and (min-width: 480px)
{
  @media only screen and (max-width:600px) {
    #search-toggle:checked ~ #search-form {
      width: 88%;
      left:10%;
  
    }
  }  
}
@media only screen and (min-width:601px){
  @media only screen and (max-width:950px){
    #search-toggle:checked ~ #search-form {
      width: 90%;
      left:8%;
  
    }
  }
}



/* left: 4% and width 95% */

  /* Ipad Pro landscape ends here */
@media only screen 
and (min-device-height: 600px) 
and (max-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
  #nav-open {
    display: inherit;
  }

  #search-open {
     display: inherit; 
  }
  #search-form {
    border: none;
    width: auto;
  }
  #site-header::before, #site-header::after {
    height: 83px;
  }
  #site-header {
    position: relative;
     height: 83px;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;

    flex-wrap: wrap;
    
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack: space-between;
        -ms-flex-pack: space-between;
            justify-content: space-between;
        
    background:#649341;
    border-bottom:0.5rem solid #EDBF26;
    padding: 15px 15px;
    box-shadow: inset 0px -99px 55px -92px rgba(0,0,0,0.65);
}

#site-header > a {
    display: flex;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    height:45px;
    text-decoration:none;
    align-items: center;
    justify-content: center;
    opacity:1;
    transition: opacity 0.15s ease-in;
}

.checkbox-toggle {
    position: absolute;
    top:-500px; /*hide the actual checkbox, its label is used for activation */
    left:-500px;
    opacity: 0;
    visibility: hidden;
}

/* Logo */
#logo {
  height:40px;
}

#nav-entries-label {
  display:none;
}

/* Search */
#search-toggle:checked ~ #search-form {
  opacity:1;
  overflow:visible;
  left:15px;
  transition: left 0.15s ease-in, opacity 0.2s ease-in;
}

#search-toggle:checked ~ a {
  opacity:0;
  transition: opacity 0.25s ease-out;
}

#search-form {
  background-color: #FFF;
  color:rgb(42, 42, 42);
  position:relative;
  font-family:"Open Sans";
  max-height:34px;
  overflow:hidden;
  flex-grow: 1;
  transition: left 0.15s ease-out, opacity 0.2s ease-in;
  opacity:0;

  position:absolute;
  left:100%;
  right:15px;
}

#search-btn,
#search-close {
  display:none;
  display:flex;
  align-items:center;
  justify-content:center;
  position: absolute;
  top:0;
  right:43px;
  height:34px;
  width:43px;
}

#search-close {
  right:0;
}

#searh-close::before {
  border-left:1px solid lightgrey;
}

#search-box {
  background-color:#FFF;
}

#search-box::-ms-clear {
    display: none;
}
#search-box:focus {
    -webkit-box-shadow: 0px 0px 5px 2px rgba(106,160,65,1);
    box-shadow: 0px 0px 5px 2px rgba(106,160,65,1);
}
#search-box, .tt-hint {
    outline: none;
    border: none;
    width:100%;
    height:34px;
    line-height:normal;
    padding:9px 10px;
    font-family:"Open Sans";
    font-size:1rem;
    color:rgb(42, 42, 42);
}

/* Typeahead */
.twitter-typeahead {
    width:100%;
}
.tt-menu {
    background-color:#FFF;
    width:100%;
    overflow-y: auto;
    overflow-x: hidden;
    max-height:230px;
    padding-top:10px;
    border-radius:0px;
    z-index:999;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    border-radius:0px;
}
.tt-hint {
    color:#888;
}
.tt-suggestion.tt-cursor,
.tt-suggestion:hover {
    background-color:#A30434;
    color:#FFFFFF;
    cursor:pointer;
}
.tt-suggestion.tt-cursor strong,
.tt-suggestion:hover strong {
    color:#FFFFFF;
}
.tt-suggestion {
    padding:3px 10px;
    color:#515151;
}
.tt-suggestion strong {
    color:rgb(42, 42, 42);
}

}
@media only screen and (min-width:776px){
  @media only screen and (max-width:1024px){
    #search-toggle:checked ~ #search-form {
      width: 91%;
      left:7.5%;
  
    }
  }
}
/* Ipad 12 inch */
@media only screen
and (min-device-height: 1024px)
and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
  #search-toggle:checked ~ #search-form {
    width: 95%;
    left:4%;

  }
}
/* tablet */
@media only screen
/* and (min-device-height: 750px) */
and (min-device-width: 1280px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
  #search-toggle:checked ~ #search-form {
    width: 95%;
    left:4%;

  }
}
@media only screen 
and (max-width: 775px)
and (min-width: 601px)
{
  #search-toggle:checked ~ #search-form {
   left: 8%;
  }
}
@media only screen 
and (max-width: 480px)
{
  #search-toggle:checked ~ #search-form {
    left: 13.5%;
   }
}
@media only screen 
and (min-width: 1025px)
and (max-width: 1279px)
{
  #search-toggle:checked ~ #search-form {
    left: 4%;
   }
}