/*
 * CSS styles required for use with NoWrapFlexNav.js
 *
 * https://www.alexcumberland.com.au
 */

 /* DropNav */
 .dr-navbar {
   background: #F1F1F1;
   width: 100%;
   z-index: 3;
 }

 /* Container for alignment */
 .dr-navbar .container, .dr-navbar .container-fluid {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 /* Brand may be image or text */
 .dr-brand {
   max-width: 200px;
   padding: 10px;
   padding-left: 0;
   display: inline-block;
 }
 .dr-navbar-brand img, .dr-navbar-brand svg {
   max-width: 100%;
 }

 .dr-nav {
   display: block;
 }
 .dr-nav-links {
   margin: 0;
   padding: 0;
   list-style-type: none;
   display: flex;
   flex-wrap: wrap; /* nav items will wrap onto multiple lines, from top to bottom */
 }
 .dr-nav-links li {
   display: inline-flex;
   align-items: center;
 }
 .dr-nav-links li a {
   padding: 1rem;
   align-items: center;
 }

 /* Burger Button / Icon Styling */
 .dr-nav-burger {
   display: none;
   position: absolute;
   width: 40px;
   padding-left: 1em;
   background-color: #1D1D1D;
   height: 30px;
   line-height: 30px;
   right: 2.2em;
   top: 50%;
   bottom: auto;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   transform: translateY(-50%);
 }
 .dr-nav-burger span {
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
   bottom: auto;
   right: auto;
   -webkit-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
   -ms-transform: translateX(-50%) translateY(-50%);
   -o-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
   width: 18px;
   height: 2px;
   background-color: white;
   -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
    -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
    transition: transform .3s, top .3s, background-color 0s;
 }
 .dr-nav-burger span::before,
 .dr-nav-burger span::after {
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   background-color: white;
   right: 0;
   -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
    -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
    transition: transform .3s, top .3s, background-color 0s;
 }
 .dr-nav-burger span::before {top: -5px;}
 .dr-nav-burger span::after {top: 5px;}

/* Close Button Styling */
.dr-nav-close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.6;
}
.dr-nav-close:hover {
  opacity: 1;
}
.dr-nav-close:before, .dr-nav-close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: rgba(255,255,255,0.9);
}
.dr-nav-close:before {
  transform: rotate(45deg);
}
.dr-nav-close:after {
  transform: rotate(-45deg);
}


/* Fullscreen Navigation Overlay */
.dr-nav-overlay {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 2;
  text-align: center;
  padding: 50px 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.dr-nav-overlay-visible {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.dr-nav-overlay-links{
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 100%;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

/* CSS Classes to control visiblity of the burger */
 #dropNav.hide, #dropNavBurger.hide {
   display: none;
 }
 #dropNav.show, #dropNavBurger.show {
   display: block;
 }