.dropdown-menu {
  display: block;
  visibility: hidden;
  opacity:0;
  transform: translateY(50px);
  transition:.5s ease all;
}
.dropdown-menu.show {
  display: block;
  visibility: visible;
  opacity:1;
  transform: translateY(0px);
  transition:.5s ease all;
}









.navbar-toggler {
  border:2px solid rgba(255, 255, 255, 0.486);
  margin-left:-10px;
  margin-top:17px;

}

.custom-toggler.navbar-toggler {
  border-color: white;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* a class that gets toggled thoigh main.js when the navbar gets moused over  */
.clicked {
  background-color: rgba(37, 37, 37, 0.747);
  transition: background-color 3s;
  opacity: 0.9;
  -webkit-transition: all 1s ease;
  transition: all 1s ease; /* Transition when the mouse enters the element */

  -webkit-transition: all .3s linear 0s;
   transition: all .3s linear 0s; 
 
}

.nav-item {
  color: white;
  text-decoration: none;
  float: right !important;
}

.nav-link {
  color: white !important;
  font-weight: 100;
  font-size: 15px;
  text-transform: uppercase;
  font-family: sans-serif;
  float: ;
  

  
}

.navbar {
  /* padding-bottom:10px; */
  margin-bottom:0px;
  /* text-align: center; */
  z-index:9999;
}

/*  the navbar logo */
.my_logo {
  max-width: 140px !important;
  /* float:left !important; */
  /* position: absolute; */
  /* margin-left:15px; */
  /* z-index:999999; */
  /* margin-top:10px; */
}

.navbar-brand{
  /* float:left !important;
  position: absolute;
  margin-left:50px;
  margin-top:4px; */
}

.nav-container {
  /* -webkit-transition-duration: 0.8s; */
  z-index:100;
  /* -webkit-transition: all .3s linear 0s;
  transition: all .3s linear 0s; */
  -webkit-transition: opacity 1.5s ease;
  transition: opacity 1.5s ease; /* Transition when the mouse leaves the element */
  position: absolute;
  width:100%;
  margin-bottom:-10px !important;
  /* backgroun-color:grey; */
  max-width:100vw !important;
  /* height:10vh; */
  /* min-height:30px;
  height:8%; */

  /* right:0px !important; */
  /* margin-right:-10px !important; */


 
  
}
/* the '.clr2' class is found in the 'contact_us.html' and is used to set a static background color to the navbar */
.clr2{
  background-color: rgb(37, 37, 37);
  position: fixed;
}

/* more attempts at navbar background color transitions */
.grad {
  transition: background-image 2s;
  background-image: linear-gradient(rgba(90, 90, 90, 0.625), rgba(90, 90, 90, 0.625), rgba(90, 90, 90, 0.625));
  
  -webkit-transition: all 1s ease;
  transition: all 1s ease; /* Transition when the mouse enters the element */
  /* background-color:purple; */
  position: fixed;
  
}

.navbar-collapse {
  margin-top:10px;
  padding-right:200px;
}

.navbar-nav {
  /* min-width:200px; */
  /* margin-top:5px; */
  /* min-height:47px !important; */
  
}

.show{
  transition:all 1s;
}

/* .show{
  background-color:;
  float:right !important;
  width:150%;
  padding-left:70%;
  border-top:2px;
} */

/* navbarsupportedcontent dropdown view bar  */
/* .bar{
  width:100%;
  height:2px;
  background-color:white;
  display:none;
} */
/* .bar2{
  width:100%;
  height:2px;
  background-color:white;
  display: none;
  margin-top: 70px;
  position: absolute;
  box-shadow: 0px 5px 10px 3px #888888; 
} */

.navbar-collapse{
  top:20px;
  height:40px;
  margin-top:20px;
}


.changes{

}



/* new nav */



.nav-link{
  font-size:14px;
  /* font-family: 'roboto medium', sans-serif;  */
  color:rgb(255, 255, 255) !important;
  /* font-weight:500; */
  padding-bottom:12px;
  padding-left:0.7rem !important;
  /* letter-spacing:1px; */
  border-bottom: 2px solid transparent; /* <- here */
    transition: border-bottom 1s;
    text-decoration: none; /* I added this for clarity of effect */
}
.nav-link:hover{
  border-bottom: 2px solid rgb(218, 240, 18);
}
.dropdown-item:active{
  background-color:rgb(219, 219, 219) !important;
}
.nav2{
  display:none;
}
#nav2{
 display:none;
 visibility: hidden;
}
.navbar-nav{
margin-right:7.8vw;
}

#side-a{
 text-decoration: none;
 color: black;
 transition: color 0.3s ease;
 
}

#side-a:hover{
 color: rgb(182, 182, 182);
}
#side-a > li{
  /* font-family:'roboto', sans-serif; */
  text-transform: uppercase;
}

#nav-btn{
 display: block;
 position: absolute;
 top: 35px;
 right: 80px;
 z-index: 1;
}
/* This is the checkbox that will go under the hamburger, right now opacity is set to 0 */
#nav-btn input{
 display: block;
 width: 40px;
 height: 32px;
 position: absolute;
 top: -7px;
 left: -5px;
 cursor: pointer;
 opacity: 0; 
 z-index: 2; 
 -webkit-touch-callout: none;
}

/* The spans for the hamburger*/
#nav-btn span{
 display: block;
 width: 24px;
 height: 3px;
 margin-bottom: 4px;
 position: relative;
 background: rgb(255, 255, 255);
 z-index: 1;
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             opacity 0.55s ease;
}

/* animations */

#nav-btn span:first-child{
}
/* last span */
#nav-btn span:nth-last-child(2){
 transform-origin: 0% 100%;
}
#nav-btn input:checked ~ span{
 opacity: 1;
 transform: rotate(45deg) translate(-3px, 4px);
 background:black;
}
#nav-btn input:checked ~ span:nth-last-child(3){
 opacity: 0;
 background:black;
}
#nav-btn input:checked ~ span:nth-last-child(2){
 opacity: 1;
 background:black;
 transform: rotate(-45deg) translate(3px, -3.5px);
}

#nav-ul{
 position: absolute;
 width: 300px;
 margin-top:-80px;
 padding: 40px;
 padding-top: 125px;
 right: -100px;
 height:110vh;
 background: white;
 list-style-type: none;
 transform-origin: 0% 0%;
 transform: translate(100%, 0);
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -webkit-box-shadow: -15px 3px 44px -20px rgba(0,0,0,0.97);
  -moz-box-shadow: -15px 3px 44px -20px rgba(0,0,0,0.97);
  box-shadow: -15px 3px 44px -20px rgba(0,0,0,0.97);
}

#nav-ul li{
 padding: 10px 0;
 font-size: 22px;
}

#nav-btn input:checked ~ ul{
 transform: scale(1.0, 1.0);
 opacity: 1;
}

.navbar{
 padding-top:40px;
 padding-left:70px;

}