/* =================================== */
/*  Menu Styles
/* =================================== */

header{
  background:#ecf0f1;
}

.header-top{
    background: #04091e;
   padding:15px 0px;
    .header-top-left,.header-top-right{
      ul{
        li{
          display:inline-block;
        }
      }
    }

    .header-top-left{
      text-align:left;
      li{
        padding-right:12px;
        a{
          font-weight:400;
          font-size:12px;
          color:$white;
          @include transition();
          &:hover{
            color:$primary-color;
          }
        }
      }
    }
    .header-top-right{
      text-align:right;
      li{
        margin-left:20px;
        a{
          font-weight:400;
          font-size:12px;
          color:$white;
          @include transition();
          &:hover{
            color:$primary-color;
          }
          .lnr{
            font-size:14px;
            color:$white;
            font-weight:700;
            display:none;
            @media(max-width:767px){
              display:block;
            }
          }

          @media(max-width:767px){
              span{
                display:none;
              }
          }
        }
      }
    }  
    @media(max-width:575px){
      padding:15px;
    }
}

.logo-wrap{
  padding:20px 0px;
  background:$white;
  .ads-banner{
    text-align:right;
  }
  @media(max-width:767px){
    .ads-banner{
      margin-top:30px;
    }
  }
    @media(max-width:575px){
      padding:15px;
    }

}


.main-menu{
  background:#04091e;
  padding:15px 20px; 
  position:relative;
  @media(max-width:575px){
    margin:0px 15px;
    width:auto!important;
  }
}


.sticky {
  position: fixed;
  top: 0;
  left:0;
  right:0;
  z-index:999;
}



/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu, .nav-menu * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu ul {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
  background: rgba($white, 0.9);
}

.nav-menu li {
  position: relative;
  white-space: nowrap;
}

.nav-menu > li {
  float: left;
}

.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
  display: block;
}

.nav-menu ul ul {
  top: 0;
  left: 100%;
}

.nav-menu ul li {
  min-width: 180px;
  text-align:left;
  border-bottom:1px solid #eee;
  &:last-child{
    border-bottom: none;
  }
}

/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
  padding-right: 30px;
}

.sf-arrows .sf-with-ul:after {
  content: "\f107";
  position: absolute;
  right: 15px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
}

.sf-arrows ul .sf-with-ul:after {
  content: "\f105";
}

/* Nav Meu Container */
#nav-menu-container {
  margin: 0;
}

/* Nav Meu Styling */
.nav-menu a {
  padding: 0 8px 0px 8px;
  text-decoration: none;
  display: inline-block;
  color: $white;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  outline: none;
}

.nav-menu li:hover > a, .nav-menu > .menu-active > a {

}

.nav-menu > li {
  margin-left: 20px;
}

.nav-menu ul {
  margin: 20px 0 0 0;
  padding: 10px;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  background: #fff;
}





.nav-menu ul li {
  transition: 0.3s;
}

.nav-menu ul li a {
  padding: 10px;
  color: #333;
  transition: 0.3s;
  display: block;
  font-size: 12px;
  text-transform: none;
}

.nav-menu ul li:hover > a {
  color: $primary-color;
}

.nav-menu ul ul {
  margin: 0;
}

/* Mobile Nav Toggle */

.menu-title{
  color:$white;
  margin-left:10px;
  font-weight:100;
}

#mobile-nav-toggle {
  left:0;
  z-index: 999;
  border: 0;
  background: none;
  font-size: 18px;
  display: none;
  transition: all 0.4s;
  outline: none;
  cursor: pointer;
}

#mobile-nav-toggle i {
  color: $white;
  font-weight: 900;  
}

@media (max-width: 991px) {
  #mobile-nav-toggle {
    display: inline;
  }
  #nav-menu-container{
    display:none;
  }
}

/* Mobile Nav Styling */
#mobile-nav {
  position: fixed;
  top: 0;
  padding-top: 18px;
  bottom: 0;
  z-index: 998;
  background: rgba(0, 0, 0, 0.8);
  left: -260px;
  width: 260px;
  overflow-y: auto;
  transition: 0.4s;
}

#mobile-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#mobile-nav ul li {
  position: relative;
}

#mobile-nav ul li a {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  overflow: hidden;
  padding: 10px 22px 10px 15px;
  position: relative;
  text-decoration: none;
  width: 100%;
  display: block;
  outline: none;
  font-weight: 500;
}

#mobile-nav ul li a:hover {
  color: #fff;
}

#mobile-nav ul li li {
  padding-left: 30px;
}

#mobile-nav ul .menu-has-children i {
  position: absolute;
  right: 0;
  z-index: 99;
  padding: 15px;
  cursor: pointer;
  color: #fff;
}

#mobile-nav ul .menu-has-children i.fa-chevron-up {
  color: $primary-color;
}

#mobile-nav ul .menu-has-children li a {
  text-transform: none;
}

#mobile-nav ul .menu-item-active {
  color: $primary-color;
}

#mobile-body-overly {
  width: 100%;
  height: 100%;
  z-index: 997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}

/* Mobile Nav body classes */
body.mobile-nav-active {
  overflow: hidden;
}

body.mobile-nav-active #mobile-nav {
  left: 0;
}

body.mobile-nav-active #mobile-nav-toggle {
  color: #fff;
}





.Search {
  @extend %cf;
  width:400px;
  position: relative;
  .lnr{
    font-weight:700;
    vertical-align: bottom;
    display:inline-block;
    color:$white;
  }
  .form-control{
    border-radius: 0px;
    border:none;
    font-size:13px;
    text-decoration:none;
    &:focus{
      box-shadow:none;
    }
  }

  @media(max-width:991px){
    position: absolute;
    right: 0px;
    bottom: 12px;
  }

}

.Search-box {
  float: left;
  width: 80%;
  @media(max-width:554px){
    width:50%;
    float:right;
    margin-right:80px;
  }
  height: 100%;
  border: 0;
  outline: 0;
  padding-left: 0.75rem;
  font-style: italic;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform ease 500ms;
  &:focus {
    transform: translateY(0);
    opacity: 1;
    
    + .Search-box-label {
      z-index: -1;
      opacity: 0;
    }
    
    ~ .Search-close {
      z-index: 3;
      opacity: 1;
    }
  }
}

.Search-box-label,
.Search-close {
  position: absolute;
  right: 0;
  z-index: 2;
  cursor: pointer;
  height: 100%;
  width: 3rem;
  transition: opacity ease 250ms 250ms;
}

.Search-close {
  opacity: 0;
  z-index: 0;
}

.Search-icon,
.Search-close-icon {
  @extend %hide-text;
  @extend %icon;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
}



%cf {
  content: "";
  display: table;
  clear: both;
}

%hide-text {
  text-indent: 100%;
  overflow: hidden; 
}

%icon {
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}