/* 
        Make the UL a 5-column grid for the navigation links.
         Why 5-columns for 3 links? It gives us a nice spacing.
    */

    @keyframes fadeInAnimation {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
         }
    }
    
    #boxnavbar ul.main-menu {
        list-style: none;
        display: grid;
        grid-template-columns:  0.5fr 1fr 1fr 1fr 1fr 1.9fr 1fr 1fr 0.5fr;
        column-gap: 1em;
        text-align: center;
        padding: 0;
        margin-top: 1em;
    }

    #boxnavbar .sub-menu-hidden{
        visibility: hidden;
        opacity: 0;
    }

    #boxnavbar .sub-menu-hidden {
        opacity: 0;
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -ms-transition: all 0.7s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        transition: all 0.7s ease-in-out;
    }

    #boxnavbar .show-li{
        visibility: visible;
        opacity: 1;
    }

    #boxnavbar .hide-li{
        visibility: hidden;
        opacity: 0;
    }

    #boxnavbar ul.sub-menu{
        grid-row: 2;
        list-style: none;
        display: grid;
        grid-template-columns:  0.5fr 1fr 1fr 1fr 1fr 1.9fr 1fr 1fr 0.5fr;
        column-gap: 1em;
        text-align: center;
        margin-top: 1em;
        margin-bottom: 1em;
        padding: 0;
    }
    
    /* 
        Let's push the links right by one column so they're centered in the 5-column grid
    */
    #boxnavbar ul.main-menu li:first-child {
        grid-column: 2;
    }

    #boxnavbar ul.sub-menu li:first-child {
        grid-column: 3;
    }
    
    #boxnavbar li a {
        text-decoration: none;
        cursor: pointer;
    }

    .menu-arrow {
        border: solid black;
        border-width: 0 2.5px 2.5px 0;
        display: inline-block;
        padding: 2px;
        visibility: hidden;
        opacity: 0;
        margin-left: 3px;
        margin-bottom: 2px;
      }

    .up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        margin-bottom: 0px;
    }

    .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    
    #boxnavbar .show-arrow{
        visibility: visible;
        opacity: 1;
    }

    #boxnavbar .hide-arrow{
        visibility: hidden;
        opacity: 0;
    }

    .menu-arrow {
        transition: all 0.5s;
    }

    @media only screen and (max-width: 1000px) {
        #boxnavbar ul.main-menu {
            list-style: none;
            text-align: center;
            padding: 0;
            display: grid;
            grid-template-columns: 1fr;
            padding: 1em;
        }

        #boxnavbar ul.main-menu li:first-child {
            grid-column: 1;
        }
    
        #boxnavbar ul.sub-menu li:first-child {
            grid-column: 1;
        }
      }

      /**
      Change breakpoint of bootstrap nav to 1000 px
      *
      @media (max-width: 1000px) {
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            margin: 7.5px -15px;
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }*/