.navbar .icon-bar{
  background-color: #ff67a5!important;
}


.overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  width: 25px;
  background-color: transparent; 
}

  .overlay.active {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    transition: background-color .35s;
    background-color: rgba(0, 0, 0, 0.5); 
  }


.navbar {
  border: none; }
  .navbar .navbar-nav > .current-menu-item a {
    color: #fff;
    background-color: #080808; }

.navbar .navbar-toggle:focus,
.navbar .navbar-toggle:hover {
  background-color: transparent; }

#navbar.in a{
  color: #fff!important;
}

#navbar.in a:hover{
  color: #e04f5f!important;
}

.navbar {
  z-index: auto; 
}

  .navbar .container,
  .navbar .container-fluid {
    padding: 0; 
  }

    .navbar .container .navbar-header,
    .navbar .container-fluid .navbar-header {
      margin: 0; 
    }


    .navbar .container > .navbar-collapse,
    .navbar .container-fluid > .navbar-collapse {
      position: fixed;
      z-index: 1000;
      top: 0%;
      /*left: -90%;*/
      border: 0;
      overflow: visible;
      

      width: 100%;
      height: 80%;
      max-height: inherit;
      
      background-color: #fa9fc5;
      transition: .5s!important;
    }

    @media (max-width : 479px) {
        .navbar .container > .navbar-collapse,
        .navbar .container-fluid > .navbar-collapse {
            height: 100%;
        }

        .navbar .in ul li .dropdown {
          position: relative!important;
          /*width: auto!important;*/
          background: #fa9fc5!important;
          padding: 0 20px!important;
          text-align: left!important;
          visibility: visible!important;
          opacity: 1!important;
        }

        .navbar .in ul li:hover .dropdown {
            right: 0!important;
            margin-left: 45px;
        }

        .second-header .navbar .navbar-nav li,
        .header-section .navbar .navbar-nav li{
            font-size: 18px!important;
            line-height: 23px!important;
        }

        .navbar .in ul li a {
            padding-top: 5px!important;
            padding-bottom: 5px!important;
        }
    }




      .navbar .container > .navbar-collapse.in,
      .navbar .container-fluid > .navbar-collapse.in {
        left: -45%;
        background-color: #fa9fc5;
        z-index: 9999;
        transition: 1s!important;

        
      }


    .navbar .container ul,
    .navbar .container-fluid ul {
      width: 50%;
      padding: 50px 20px;
  }

  .navbar .in ul{
    -webkit-transform:  translateX(70%);
    -moz-transform:  translateX(70%);
    -ms-transform:  translateX(70%);
    -o-transform:  translateX(70%);
    transform:  translateX(70%);
  }

  .navbar .in ul li{
    border-right: 0!important;
  }

   .navbar .in ul li .navbar-brand{
    display: none;
   }

  /*.navbar .in ul li a{
    padding-top: 10px!important;
    padding-bottom: 10px!important;
  }*/

  .navbar .in ul li .dropdown{
    background: #f789b7!important;
    top: 0!important;
    right: 0!important;
    -webkit-transform: translateY(0)!important;
    -moz-transform: translateY(0)!important;
    -ms-transform: translateY(0)!important;
    -o-transform: translateY(0)!important;
    transform: translateY(0)!important;
    z-index: 5;
  }

   .navbar .in ul li:hover .dropdown{
      right: 30px!important;
   }

    /*@media (max-width : 480px) {
        .navbar .in ul li:hover .dropdown{
          right: -80px!important;
       }
    }*/



    /*@media only screen and (min-width: 650px) and (max-width: 700px){
        .navbar .container > .navbar-collapse.in, 
        .navbar .container-fluid > .navbar-collapse.in{
            left: -50%;
        }

        .navbar .container ul,
        .navbar .container-fluid ul{
            transform: skewX(45deg) translateX(190%);
        }
    }

    @media only screen and (min-width: 540px) and (max-width: 639px){
        .navbar .container > .navbar-collapse.in, 
        .navbar .container-fluid > .navbar-collapse.in{
            left: -50%;
        }

        .navbar .container ul,
        .navbar .container-fluid ul{
            transform: skewX(45deg) translateX(190%);
        }
    }

    @media only screen and (min-width: 480px) and (max-width: 539px){
        .navbar .container > .navbar-collapse.in, 
        .navbar .container-fluid > .navbar-collapse.in{
            left: -60%;
        }

        .navbar .container ul,
        .navbar .container-fluid ul{
            padding: 15px;
            transform: skewX(45deg) translateX(200%);
        }
    }

    @media only screen and (min-width: 420px) and (max-width: 479px){
        .navbar .container > .navbar-collapse.in, 
        .navbar .container-fluid > .navbar-collapse.in{
            left: -80%;
        }

        .navbar .container ul,
        .navbar .container-fluid ul{
            padding: 15px;
            transform: skewX(45deg) translateX(230%);
        }
    }

    @media only screen and (min-width: 340px) and (max-width: 420px){
        .navbar .container > .navbar-collapse.in, 
        .navbar .container-fluid > .navbar-collapse.in{
            left: -100%;
        }

        .navbar .container ul,
        .navbar .container-fluid ul{
            padding: 15px;
            transform: skewX(45deg) translateX(245%);
        }
    }


    @media only screen and (min-width: 300px) and (max-width: 339px){
        .navbar .container > .navbar-collapse.in, 
        .navbar .container-fluid > .navbar-collapse.in{
            left: -130%;
        }

        .navbar .container ul,
        .navbar .container-fluid ul{
            padding: 15px;
            transform: skewX(45deg) translateX(253%);
        }
    }

    @media only screen and (max-width: 299px){
        .navbar .container > .navbar-collapse.in, 
        .navbar .container-fluid > .navbar-collapse.in{
            left: -160%;
        }

        .navbar .container ul,
        .navbar .container-fluid ul{
            padding: 15px;
            transform: skewX(45deg) translateX(285%);
        }
    }*/


    .navbar .container ul li::before,
    .navbar .container-fluid ul li::before{
      display: none;
    }

    .navbar .container ul li a,
    .navbar .container-fluid ul li a{
      color: #fff;
    }

.transition {
  transition: width .35s !important; }

.navbar-toggle {
  margin-left: 10px;
  border: none; }

.navbar-nav {
  margin: 0; }

@media (min-width: 768px) {
  .navbar {
    z-index: 1000; }
    .navbar .container,
    .navbar .container-fluid {
      padding: 0 15px; }
      .navbar .container .navbar-header,
      .navbar .container-fluid .navbar-header {
        margin: 0;
        padding: 0; }
      .navbar .container ul,
      .navbar .container-fluid ul {
        width: auto;
        padding: 0; }
      .navbar .container > ul,
      .navbar .container-fluid > ul {
        background-color: transparent; }
      .navbar .container > .navbar-collapse,
      .navbar .container-fluid > .navbar-collapse {
        position: relative;
        position: initial;
        z-index: auto;
        z-index: initial;
        top: auto;
        top: initial;
        bottom: auto;
        bottom: initial;
        width: auto;
        width: initial;
        margin: auto;
        margin: initial;
        background-color: transparent;
        background-color: initial; }

  .navbar-nav {
    margin: initial; }

  .overlay {
    display: none; } }