/* Navigation Styles */
  nav { position: relative;  }
  header.dark nav { background-color:#fff; }
  header.light nav { background-color:rgba(0,0,0,0.5); }

  .bg-dark{
    background-color: #000;
  }

.footbtn {
  color: white;
  margin-top: 35px;
  padding: 10px 40px;
  font-size: 12px;
  border-radius: 1px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  cursor: pointer;
  background: #3c3c42;
  border: none;
  -webkit-font-smoothing: subpixel-antialiased;
  text-decoration: none;
}


.footbtn:hover {
  color: white;
  background-color: #45454e;
}


.footbtnsocial {
  color: white;
  margin-top: 35px;
  padding: 10px;
  font-size: 12px;
  border-radius: 1px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  cursor: pointer;
  background: #3c3c42;
  border: none;
  -webkit-font-smoothing: subpixel-antialiased;
  text-decoration: none;
}


.footbtnsocial:hover {
  color: white;
  background-color: #45454e;
}


  ul.main-nav > li > .navbtn
{
  color: white;
  padding: 6px 20px;
  margin: 2px;
  width: auto;
  border-radius: 1px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  cursor: pointer;
  background: #504d56;
  border: none;
  -webkit-font-smoothing: subpixel-antialiased;
  border-bottom: block;  
}

ul.main-nav > li > .navbtn:hover
{
  border-bottom: block;
  color: white;
  background: #2f353d;
}

.navbar{
    margin-bottom: 0px;
}

.navbar-header {
  position: relative;
  z-index:1;
}

  .navbar-brand{
    padding: 5px 50px;
    margin: 0px;
  }

  .main-nav{ 
    padding: 0px ;
    margin: 0px ;
  }


  ul.main-nav { 
    list-style-type: none; 
    padding: 0px;
    font-size: 0px;
    max-width: 100%;
    margin: 0 auto;
  }
  
  ul.main-nav > li { 
    display: inline-block;
    padding: 0; 
  }
  
  ul.main-nav > li > a { 
    text-decoration: none;
    display: block; 
    padding: 20px 20px; 
    position: relative;
    color: #000;
    font-size: 15px;
    font-weight: 400;
    box-sizing: border-box;
  }

  ul.main-nav > li:after {
    display:block;
    content: '';
    border-bottom: solid 4px #5865f5;  
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
  }
  ul.main-nav > li:hover:after { transform: scaleX(1); }
  
  ul.main-nav > li ul.sub-menu-lists {
    margin: 0px;
    padding: 0px;
    list-style-type : none;
    display:block;
  }
  
  ul.main-nav > li ul.sub-menu-lists > li {
    padding: 8px 0;
  }
  
  ul.main-nav > li ul.sub-menu-lists > li > a {
    color: #505050;
    font-size: 12px;
    padding: 8px 5px;
  }
  
  ul.main-nav > li ul.sub-menu-lists > li a:hover { border-radius: 3px; padding: 8px 6px; background-color: #eee; }
  
  ul.main-nav > li ul.sub-menu-lists > li > a:before { padding-right: 5px;
   content: ' '; }

  .ic {
    position: fixed; 
    cursor: pointer;
    display: inline-block;
    right: 25px;
    width: 32px;
    height: 24px;
    text-align: center;
    top:0px;
    outline: none;
  }
  
  .ic.close { 
    opacity: 0; 
    font-size: 0px; 
    font-weight: 300; 
    color: #fff;
    top: 10px;
    height:20px;
    display: block;
    outline: none;
  }
  
  /* Menu Icons for Devices*/
  .ic.menu { top:20px; z-index : 20; }
  .ic.menu i{font-size: 20px;}
  .ic.close i{color: #fff;}
  
  .ic.menu .line { 
    height: 2px; 
    width: 100%; 
    display: block; 
    margin-bottom: 5px; 
  }
  .ic.menu .line-last-child { margin-bottom: 0px;  }
  
  .sub-menu-head { margin: 10px 0; }
  .banners-area { margin-top: 0px; padding-top: 15px; }
  .banners-area p { font-size: 14px; color: #303030;}
  
  @media only screen and (max-width:768px) {
    .sub-menu-head { color: #1a73e8; }
    .ic.menu { display: block; }
    header.dark .ic.menu .line { background-color: #fff; } 
    header.light .ic.menu .line { background-color: #000; }
    .ic.menu .line {
      -webkit-transition: all 0.4s ease 0s;
      -o-transition: all 0.4s ease 0s;
      transition: all 0.4s ease 0s;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
      transform-origin: center center;
    }
    .ic.menu:focus .line { background-color: #fff !important; }
    
    .ic.menu:focus .line:nth-child(1) { 
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); 
    }
    
    .ic.menu:focus .line:nth-child(2){ 
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); 
      margin-top: -8px;
    }
    
    .ic.menu:focus .line:nth-child(3){
      transform: translateY(15px);
      opacity: 0;
    }
    
    .ic.menu:focus{ outline: none; }
    .ic.menu:focus ~ .ic.close { opacity: 1; z-index : 21;  outline: none;  }
    
    /*
    
    .ic.menu:focus ~ .ic.close { opacity: 1.0; z-index : 21;  }
    .ic.close:focus { opacity: 0; }
    */
    .ic.menu:hover, 
    .ic.menu:focus{ opacity: 1; }
    
  
    nav { background-color: transparent; }
    
   /* Main Menu for Handheld Devices  */
    ul.main-nav {
      z-index:2; 
      padding: 50px 0;
      position: fixed;
      right: 0px;
      top: 0px;
      width: 0px;
      background-color:rgba(0,0,0,1);
      height: 100%;
      overflow: auto;
      /*CSS animation applied : Slide from Right*/
     -webkit-transition-property: background, width;
      -moz-transition-property: background, width;
      -o-transition-property: background, width;
      transition-property: background, width;
         -webkit-transition-duration: 0.6s;
        -moz-transition-duration: 0.6s;
        -o-transition-duration: 0.6s;
      transition-duration: 0.6s;
    }
    
    .ic.menu:focus ~ .main-nav { width: 300px; background-color:rgba(0,0,0,1); }
    
    ul.main-nav > * { 
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      transition-property: opacity;
         -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;
        -o-transition-duration: 0.4s;
      transition-duration: 0.4s;
      opacity: 0;
    }
    .ic.menu:focus ~ .main-nav > * {opacity: 1;}
    
    ul.main-nav > li > a:after {display: none;}
    ul.main-nav > li:first-child { border-radius: 0px; }
    ul.main-nav > li {
      display: block;
      border-bottom: 1px solid #444;
    }
    
    ul.main-nav > li > a { color: #fff; font-weight: 600;  padding: 10px 20px;}
    
    ul.main-nav > li ul.sub-menu-lists > li a { color: #eee; font-size: 14px; }
    .sub-menu-head { font-size: 16px;}
    ul.main-nav > li:hover { background-color: transparent;  }
    ul.main-nav > li:hover > a {color: #fff; text-decoration: none; font-weight: 600;}
   .ic.menu:focus ~ ul.main-nav > li > div.sub-menu-block {
      border-left: 0px solid #ccc;
      border-right: 0px solid #ccc;
      border-bottom: 0px solid #ccc;
      position: relative;
      visibility: visible;
      opacity: 1.0;
    }
    
    .sub-menu-block { padding: 0 30px; }
    .banners-area { display:none; padding-bottom: 0px;  }
    .banners-area div { margin-bottom: 15px;  }
    .banners-area { border-top: 1px solid #444; }
  }
  
  @media only screen and (min-width:769px) {
    .ic.menu { display: none; }
    /* Main Menu for Desktop Devices  */
    ul.main-nav { display: block; position: relative; }
    .sub-menu-block .sub-menu{ padding: 20px 50px 20px 50px; }

    .sub-menu-block .banners-area{background-color: #f1f5f9; padding: 20px; }
    
    /* Sub Menu */
    ul.main-nav > li > div.sub-menu-block { 
    visibility: hidden;
    background-color: #fff;
    position: absolute;
    width: 100%;
    color: #333;
    left: 0;
    box-sizing: border-box;
    z-index : 3;
    font-size: 16px;
    opacity: 0;
      
    /*CSS animation applied for sub menu : Slide from Top */
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    
    }
    
    ul.main-nav > li:hover > div.sub-menu-block{ 
      background-color: #fff; 
      visibility: visible;
      opacity: 1;
      -webkit-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
      transform: rotateX(0deg);
    }
    
    ul.main-nav > li > div.sub-menu-block > * {
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      transition-property: opacity;
         -webkit-transition-duration: 0.4s;
        -moz-transition-duration: 0.4s;
        -o-transition-duration: 0.4s;
      transition-duration: 0.4s;
      opacity: 0;
    }
    
    ul.main-nav > li:hover > div.sub-menu-block > * {
      opacity: 1;
    }
    
    .sub-menu-head { padding: 10px; font-size: 13px; color: #1a73e8;}
    .sub-menu-head i::after { content: "  "; }
    /* List Separator: Outer Border */
    
    /* List Separator: Inner Border */

    header.dark ul.main-nav > li > a:after { background-color: #000; }
    header.light ul.main-nav > li > a:after { background-color: #999; }
    
    /* Drop Down/Up Arrow for Mega Menu */
    ul.main-nav > li > a.mega-menu > span { display: block;}
    ul.main-nav > li > a.mega-menu > span:after {
      width: 0; 
      height: 0; 
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid #303030;
      content: '';
      background-color: transparent;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }
  
    ul.main-nav > li:hover > a.mega-menu span:after{
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 0px solid transparent;
      border-bottom: 5px solid #666;
    }
    .banners-area { border-top: 1px solid #ccc; }
  }