#cms-header-wrapper{
  z-index: 101;
  position: relative;
}
#cms-search {
  max-height: 0;
  background: #F8F8F8;
  overflow: hidden;
  @include css3-prefix('transition','all 0.4s ease 0s');
  &.open{
    padding: 25px 0;
    max-height: 500px;
  }
  input[type='text']{ font-size: 18px; color: $title_color; border: 0; background: transparent;}
  input[type='submit']{ max-width: 180px; margin: 0 auto;}
  a#header-widget-search-close{
    margin-top: 15px; display: inline-block;
  }
}
#masthead{
  z-index: 30;
  &.no-border-home{
    border-bottom: 0;
  }
  #cms-nav-extra{
    > div{
      margin-left: 20px;
      ul{
        li{
          float: left;
          padding-right: 20px;
          &:last-child{
            padding-right: 0;
          }

          a{
            color: $menuColor;
            &:hover,
            &:active,
            &:focus{
              color: $menuColorHover;
            }

            &:after{
              display: none;
            }
          }
        }
      }
    }
  }
  /* Header Top Widget */
  #cms-header-top{
    background: #F8F8F8;
    color: #888888;
    a{
      color: $link_color_hover;
      &:hover{
        color: $link_color;
      }
    }
    /* CMS Social widget */
    .cms-social{
      a{
        i{
          color: $link_color_hover;
          background: transparent;
          width: 40px;
          height: 50px;
          line-height: 50px;
          &:hover{
            color: $link_color;
          } 
        }
        &:hover{
          i{
            background: transparent;
          }
        }
      }
    }
  }

  #cms-header{
    position: relative;
    #cms-header-logo{ 
      a{
        display: block;
      }
    }
    #cms-header-navigation{
      position: static; /* Fix for dropdown menu full width */
    }
    /* Header Fixed */
    &.header-ontop{
      position: absolute;
      z-index: 21;
      width: 100%;
      #cms-nav-extra{
        > div{
          ul{
            li{
              a{
                color: $menuFixedColor;
                &:hover,
                &:active,
                &:focus{
                  color: $menuFixedColor;
                }
              }
            }
          }
        }
      }
    }
    &.header-fixed{
      position: fixed;
      z-index: 21;
      width: 100%;
      @media (max-width: 991px){
        left: 0;
        right: 0;
        padding:0;
      }
    }
    /* Sticky Header */
    &.header-sticky{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 60;
      /*border-bottom: $header_sticky_border;*/
      @include transition(background 300ms ease 0ms);
      @media (max-width: 991px){
        padding: 0;
      }
    }
  }
  /* Header V1 */
  &.header-v1{
    #cms-header-inner{
      position: relative;
    }
  }
  /* Header V2 */
  &.header-v2{
    #cms-header{
      #cms-nav-extra{
        margin-right: 30px;
        @media (min-width:992px) and (max-width:1400px){ /* Fix menu in two line */
          position: absolute;
          right: 0;
        }
      }
    }
  }
  /* Header V3 */
  &.header-v3{
    #cms-header-navigation{
      border-top: $main_border;
      border-bottom: $main_border;
    }
  }
  
  /* Special style for each header version */
  @media(min-width: 992px){
    &.header-v1{
      position: fixed;
      top: 0;
      text-align: center;
      width: $header_width;

      &.header-left{
        left: 0;
      }
      &.header-right{
        right: 0;
      }
      #cms-nav-extra{
        display: inline-block;
        margin: 0 auto !important;
        >div:first-child{
          margin-left: 0 !important;
        }
      }
    }
  }
  @media(max-width: 991px){
    padding: 0 !important; /* Remove padding from theme options */
    &.header-v1{
      padding: 10px 40px 0 !important;
      margin-bottom: 0 !important;
      #cms-nav-extra{
        position: absolute;
        top: 30px;
        right: 20px;
      }
    }

    &.header-v2{
      #cms-nav-extra{
        position: absolute;
        top: 0px;
        right: 20px;
        z-index: 1;
      }
      #cms-header-navigation-left,
      #cms-header-navigation-right{
        display: none;
      }
    }
    &.header-v3{
      #cms-header-navigation{
        top: 0;
      }
    }
  }
  #cms-portfolio-masonry-sort{
    .change-columns{
      font-size: 20px;
    }
  }
}


/* Header v4 */
#cms-mainnav-v4{
  text-align: center;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  overflow-y: scroll;
  @include opacity(0);
  @include transition(all 300ms linear 0ms);

  &.open{
    z-index: 999999;
    visibility: visible;
    @include opacity(1);
  }
}

/* One Page Navigation */
#cms-onepage-nav{
  left: 50px;
  @include vertical-align('fixed');

  .cms-onepage-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    li{
      margin-bottom: 10px;
      a{
        position: relative;
        width: 10px;
        height: 10px;
        display: block;
        border: 1px solid #cdcdcd;
        @include css3-prefix('border-radius','50%');

        span{
          visibility: hidden;
          left: 15px;
          background: rgba(0,0,0,0.7);
          color: $white;
          display: block;
          white-space: nowrap;
          padding: 5px 10px;
          @include vertical-align('absolute');
          @include opacity('0');
          @include transition();
          @include css3-prefix('border-radius','5px');

          &:before{
            content: "";
            width: 0;
            height: 0;
            display: block;
            left: -10px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent rgba(0,0,0,0.7) transparent transparent; 
            @include vertical-align('absolute');
          }
        }
        &:hover{
          span{
            visibility: visible;
            @include opacity('1');
          }
        }

        &:active,
        &:focus{
          border-color: #222222;
        }
      }
      &:last-child{
        a{
          margin-bottom: 0;
        }
      }
    }
  }
}

/* Header Fixed Top background when scroll down */
.cms-header-fixed-bg #cms-header.header-fixed{
  @include transition(background 300ms linear 0ms);
}

.admin-bar{
  #masthead{
    #cms-header{
      &.header-sticky{
        top: 32px;
      }
    }
  }
  #cms-mainnav-v4{
    top: 32px;
  }
}

/* Fixed header border bottom */
/*body:not(.home){
  .header-ontop{
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
}*/


#cms-header {
  > .no-container{

    @media (max-width: 991px){
      padding-left: 30px;
      padding-right: 30px;
    }
  }
}