﻿
.navbars {
    box-shadow: 5px 0px 5px #ccc;
    width:100%;  
    padding:0;
    border:1px solid #CCD1D1;
    background-color:white;
    margin:0;
    z-index:1;
    
}

.navbars-links .navbars-dropdown{
  display: block;
  text-decoration: none;
  color: #444;
  font-weight: 700;
  transition: 0.4s all;
  margin-left:5px;
  margin-right:5px;
  margin-bottom:0px;
  margin-top:10px;
}


.navbars-links .navbars-dropdown .dropdown{
  visibility:hidden;
}



.lbmenu:hover{
  background-color:#fe6d43;
  color:#fff;
  border-radius: 40px;
}


.navbar-links li.navbar-dropdown {
  position: relative;
}

.navbar-links .navbar-dropdown .dropdown a{
  display: block;
  text-decoration: none;
  color: #444;
  padding: 10px 10px;
  font-weight: 700;
  transition: 0.4s all;
}

.navbars-toggle{
    list-style-type: none;
    display: flex;
    width:auto;  
    float:right; 
    visibility:hidden;
}

.navbars-toggle button{
    background-color:transparent;
    padding:0.2rem;
    font-size:18pt;
    color:black;
    border:0px solid;

}

.navbars-logo{
    list-style-type: none;
    width:auto;
    padding:0em;
    padding-left: 1em;
    margin-top:10px;
}

.navbars-logo li a{
  display: block;
  text-decoration: none;
  color: #444;
  padding: 0px 0px;
  font-weight: 700;
  transition: 0.5s all;
}


.navbars-links {
  list-style-type: none;
  display: flex;
  margin-left:10px;
  margin-right:10px;

  position:relative;
  text-align:center;
}


.navbars-login{
  list-style-type: none;
  display: flex;
  margin:10px;
  cursor:pointer;
}



.navbars-login li a:hover{
  display: block;
  text-decoration: none;
  color:#fff;
  padding: 10px 10px;
  font-weight: 700;
  transition: 0.4s all;
  border:2px solid #4cbc55;
  border-radius:30px;
  width:100px;
  text-align:center;
  background-color:#4cbc55;
}


@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

.navbar-toggle{
    display:none;
}

.navbar-collapse{
    width:auto;
}


.navbar-login{
  list-style-type: none;
  display: flex;
  margin:10px;
  cursor:pointer;
}

.navbar-login li a {
  display: block;
  text-decoration: none;
  color:#4cbc55;
  padding: 10px 10px;
  font-weight: 700;
  transition: 0.4s all;
  border:2px solid #4cbc55;
  border-radius:30px;
  width:100px;
  text-align:center;
}

.navbar-login li a:hover{
  display: block;
  text-decoration: none;
  color:#fff;
  padding: 10px 10px;
  font-weight: 700;
  transition: 0.4s all;
  border:2px solid #4cbc55;
  border-radius:30px;
  width:100px;
  text-align:center;
  background-color:#4cbc55;
}


.dropdown{
  position:absolute;
  width:900px;background:#fff; padding: 20px;  
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1);
  transition: all .5s ease-out;
  color:black;
  text-align:left;
  z-index:1;
  padding:1em;
  border-bottom:4px solid #1060b9;
  
}

.dropdown li a{
  display:block;
}

.dropdown li a:hover{
  background-color:#1060b9;
  color:#ffffff;
}

.navbars-dropdown:hover .dropdown{
    visibility: visible;
    opacity: 1;
    transform: translateY(50%);
    top:-110px;
    
}

.navbar-links li.navbar-dropdown .lbmenu span:hover{
color: #FFF;
background-color:#4cbc55;
font-weight:bold;
}

.navbar-links li.navbar-dropdown .lbmenu span{
      padding: 15px 20px;
      color :#424949;
      font-weight: normal !important;
      cursor : pointer;
      display: block;
}

.sticky{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    opacity:1;
    animation: fadeIn 5s;
}


.dropdown li{
    list-style: none;
    display: block;
    padding: 1em;
}

.lbmenu{
  display:block;
  padding:1em;
  margin:0;
}

@media (max-width: 768px) and (max-width:920px) {
  .sticky{
  position:fixed;
  opacity:1;
  }

  .arrow{
    float:right;margin-right:30px;
  }

  .navbars {
    box-shadow: 5px 0px 5px #ccc;
    width:100%;  
    padding:0;
    border:1px solid #CCD1D1;
    background-color:white;
    position:absolute;
}

  .navbar-login{
      display:none;
  }

  .navbars-toggle{
    visibility:visible;
    margin:20px;
  }

  .navbars-links{
      width: 100%;
      transition: all 0.3s ease-in;
      top:0;
      display:block;
      padding: 0px;
      margin:0;
      left:0;
      text-align:left;
      margin-bottom:10px;
      position:relative;
  }


  .dropdown{
   
    width:100%;
    background:#fff; 
    padding: 20px;  
    /*visibility: hidden;*/
    display: none;
    opacity: 0;
    transform: translateY(-1);
    transition: all .5s ease-out;
    color:black;
    text-align:left;
    position:relative;
    padding:1em;
  }
  
  
  /*.navbars-dropdown:hover .dropdown{
      display: block;
      opacity: 1;
      transform: translateY(0);
      top:10px;
    
  }*/



  
 .navbars-links .navbars-dropdown{
    position:relative;
    display: block;
 }

 #menu1:checked +ul{
    display: block;
    opacity: 1;
    transform: translateY(30%);
    top:-90px;
  }


  #menu2:checked +ul{
    display: block;
    opacity: 1;
    transform: translateY(30%);
    top:-90px;
  }

 
  .lbmenu span{
    
    color :#424949;
    font-weight: normal !important;
    cursor:pointer;
    width:100%;
    position:relative;
   
    
   }

  
}