/*** Navigation ############
########################### ***/

/********** Template CSS **********/
:root {
    --primary: #bc1a0b;
    --secondary: #84bac0;
    --light: #c6e2de;
    --dark: #0d2845;
}

/* aniButton Hamburger Menu */
#aniButton {
position: relative;
top: 0px !important;
right: 1.0rem !important;
width: 36px;
height: 23px;
cursor: pointer;
}
#aniButton b {
position: absolute;
left: 0;
width: 36px;
height: 3px;
background-color: #c6e2de;
}
#aniButton b:nth-child(1) {
top: 0;
}
#aniButton b:nth-child(2) {
top: 50%;
}
#aniButton b:nth-child(3) {
top: 100%;
}
#aniButton.navbar-toggler { border:none; }
/* aniButton */





.navbar-brand:focus, .navbar-brand:hover {
    color: var(--light);
}





.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0;
  vertical-align: 0;
  content: none;
  border-top: none;
  border-right: none;
  border-bottom: 0;
  border-left: none;
}

a.nav-link {
  letter-spacing: 2px;
  padding: 20px 15px;
  font-size: 18px;
  font-weight: 600;
  outline: none;
}

a.nav-link:before {
  content: "\263C";
  margin-right: 4px;
  color: #cecece;
  opacity: 1;
  transition: opacity 200ms linear;
}
a.nav-link:after {
  content: "\263C";
  margin-left: 4px;
  color: #cecece;
  opacity: 0;
  transition: opacity 200ms linear;
}

/* hover, active, current */

a.nav-link:hover::after,
a.nav-link:hover::before {
  opacity: 1;
}


ul.navbar-nav > li > a { color: var(--dark); }
ul.navbar-nav > li:hover > a { color: var(--secondary); }
ul.dropdown-menu > li > a { color: var(--dark); padding: 8px 15px; }
ul.dropdown-menu > li:hover > a { color: var(--secondary); }

ul.navbar-nav > li.current > a, 
ul.navbar-nav > li.active > a { color: var(--primary); }

ul.dropdown-menu > li.current > a, 
ul.dropdown-menu > li.active > a { color: var(--secondary); }

ul.navbar-nav > li.current > a.nav-link:after, 
ul.navbar-nav > li.active > a.nav-link:after,
ul.dropdown-menu > li.current > a.nav-link:after, 
ul.dropdown-menu > li.active > a.nav-link:after { opacity: 1; }


.homenavi ul.navbar-nav > li > a { color: var(--secondary); }




@media screen and (min-width: 993px)
{        
  .dropdown .dropdown-menu.show {display: none !important;}
  .dropdown:hover .dropdown-menu {display: block !important;}
  .dropdown:focus .dropdown-menu {display: block !important;}
}