#navigation-bar.navigation-bar, 
#navigation-bar.navigation-bar .navbox-tiles, 
#navigation-bar .navbox-tiles .tile, 
#navigation-bar .navbox-tiles .tile .navbar-tile-icon .fa, 
#navigation-bar .navbox-tiles .tile .title,

#navigation-bar2.navigation-bar, 
#navigation-bar2.navigation-bar .navbox-tiles, 
#navigation-bar2 .navbox-tiles .tile, 
#navigation-bar2 .navbox-tiles .tile .navbar-tile-icon .fa, 
#navigation-bar2 .navbox-tiles .tile .title  {
    -webkit-transition: all .3s;
    transition: all .3s;
    
}

#navigation-bar .navbox-tiles:after ,#navigation-bar2 .navbox-tiles:after{
    content: '';
    display: table;
    clear: both;
}

/* Core Styles */


#navigation-bar.navigation-bar,#navigation-bar2.navigation-bar {
    height: 0;
    position: relative;
    z-index: 1;
}

    #navigation-bar.navigation-bar .bar,  #navigation-bar2.navigation-bar .bar {
        background-color: #204267;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 2;
    }

    #navigation-bar.navigation-bar .navbox,#navigation-bar2.navigation-bar .navbox {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1;
        -webkit-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        transform: translateY(-200px);
        -webkit-transition: all .2s;
        transition: all .2s;
    }

    #navigation-bar.navigation-bar .navbox-tiles,#navigation-bar2.navigation-bar .navbox-tiles {
        -webkit-transform: translateY(-200px);
        -ms-transform: translateY(-200px);
        transform: translateY(-200px);
    }


    #navigation-bar.navigation-bar.navbox-open .navbox,#navigation-bar2.navigation-bar.navbox-open .navbox {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition: opacity .3s, -webkit-transform .3s;
        transition: opacity .3s, transform .3s;
    }

    #navigation-bar.navigation-bar.navbox-open .navbox-tiles,#navigation-bar2.navigation-bar.navbox-open .navbox-tiles {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }


#navigation-bar .navbox,#navigation-bar2 .navbox {
    background-color: #204267;
    width: 100%;
    max-width: 380px;
    -webkit-backface-visibility: initial;
    backface-visibility: initial;
}

#navigation-bar .navbox-tiles ,#navigation-bar2 .navbox-tiles {
    width: 100%;
    padding: 15px;
}

   #navigation-bar .navbox-tiles .tile,   #navigation-bar2 .navbox-tiles .tile  {
        display: block;
        background-color: #3498db;
        width: 23%;
        height: 0;
        padding-bottom: 20%;
        float: left;
        border: 2px solid transparent;
        color: #fff;
        position: relative;
        vertical-align: middle;
        text-align: center;
        line-height: 70px;
       cursor: pointer;
    }

      #navigation-bar  .navbox-tiles .tile .navbar-tile-icon,#navigation-bar2  .navbox-tiles .tile .navbar-tile-icon {
            width: 100%;
            height: 100%;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
        }

         #navigation-bar   .navbox-tiles .tile .navbar-tile-icon .fa,#navigation-bar2   .navbox-tiles .tile .navbar-tile-icon .fa {
                font-size: 35px;
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
                -webkit-backface-visibility: initial;
                backface-visibility: initial;
            }

       #navigation-bar .navbox-tiles .tile .title, #navigation-bar2 .navbox-tiles .tile .title {
            padding: 5px;
            font-size: 14px;
            vertical-align: middle;
            line-height: normal;
            display: inline-block;
            text-align: center;
        }

       #navigation-bar .navbox-tiles .tile:hover,#navigation-bar2 .navbox-tiles .tile:hover {
            border-color: #fff;
            text-decoration: none;
        }

       #navigation-bar .navbox-tiles .tile,#navigation-bar2 .navbox-tiles .tile {
            margin-right: 2%;
        }

        #navigation-bar .navbox-tiles .tile:nth-child(n+5),#navigation-bar2 .navbox-tiles .tile:nth-child(n+5) {
            margin-top: 15px;
        }

@media screen and (max-width: 370px) {

   #navigation-bar .navbox-tiles .tile .navbar-tile-icon .fa,#navigation-bar2 .navbox-tiles .tile .navbar-tile-icon .fa {
        font-size: 25px;
    }

 #navigation-bar   .navbox-tiles .tile .title,#navigation-bar2   .navbox-tiles .tile .title {
        padding: 3px;
        font-size: 11px;
    }
}