.navmenu {grid-area: navmenu; justify-self: left;}
.navicon {grid-area: navicon; justify-self: left;}
.navtoggle {grid-area: navtoggle; justify-self: left;}
.navdrop {grid-area: navdrop; justify-self: left;}

.navlogin {grid-area: navlogin; justify-self: end; }
.navtheory {grid-area: navtheory; justify-self: left; }
.navpractice {grid-area: navpractice; justify-self: left; }
.navblogs {grid-area: navblogs; justify-self: left; }
.navhelp {grid-area: navhelp; justify-self: left; }

.navmenu{
    display: grid;
    grid-template-areas:
    "navicon navdrop navdrop navdrop navdrop navdrop";
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 0px;
    /*background-color: rgba(255, 255, 255, 0);*/
    padding: 0px;
}

.menu_grid {
    display: grid;
    grid-template-areas:
    "navlessons navtheory navpractice navhelp";

    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    /*background-color: rgba(255, 255, 255, 0);*/
    padding: 0px;
    justify-content: space-evenly;

    border-radius: 5px;
}

.navbar_grid {
        display: grid;
        grid-template-areas:
        "navmenu navmenu navmenu navmenu navlogin navlogin navlogin navlogin navlogin";
        grid-template-columns: repeat(9, 1fr);
        grid-gap: 10px;
        /*background-color: rgba(255, 255, 255, 0);*/
        padding: 0px;
        justify-content: space-evenly;
        width: 100%;
}

.navdrop{
    list-style-type: none;
    padding-inline-start: 0px;
}

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


    .navbar_grid{
        grid-auto-flow: row;
    }


    .navmenu{
        grid-row: auto / span 5;
        position: fixed;
        top: 0px;
        color: black;
    }

    .navmenu{
        display: grid;
        grid-template-areas:
        "navicon navtoggle";
/*        "navdrop navdrop";*/
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0px;
        /*background-color: rgba(255, 255, 255, 0);*/
        padding: 0px;
        left: -0px;
    }

    .navdrop > .menu_grid{
        position: relative;
        left: -100px;
    }

    .navbar_grid {
        grid-template-areas:
        "navmenu navlogin navlogin navlogin navlogin navlogin navlogin navlogin navlogin";
    }

    .navlogin{
        grid-row: auto;
    }

    .menu_grid {
        display: grid;
        grid-template-areas:
            'navlessons'
            'navtheory'
            'navpractice'
            'navhelp';
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 5px;
        /*background-color: rgba(255, 255, 255, 0);*/
        padding: 0px;
        justify-content: space-evenly;
        width: 100%;
        text-align: center;
        background-color: rgba(55, 55, 55, 1); /*rgb(239,252,231); */
        /*background-color: pink;*/
    }

    .navtoggle{
        margin-top: 5px;
    }

    #slice1{
        background-size: 50% !important;
    }
}


/* navbar */
.container{
    margin-left: 50px;
}

.dropdown-menu{
    top: auto;
}
/* carroussel */
#Slideshow {
  opacity: 1.0;              /* CSS3 */
  -moz-opacity: 1.0;         /* Older versions of Firefox */
  -khtml-opacity: 1.0;       /* Older versions of Safari */
  filter: alpha(opacity=100); /* Internet Explorer */
}
#Slideshow div {display:none;}
#Slideshow #slice1 {display:inline-block; float:left;}

/*dropdown*/

.dropdown-menu:hover{
    display: block;
}

#buttonDownload, #formGroup, #useFor{
    width: 90%;
}

#easy{
    border-right: 3px;
    border-left: 3px;
    border-top: 0px;
    border-bottom: 0px;
}

.navbar {
    position: fixed; /* Set the navbar to fixed position */
    font-family: "Indie Flower";
    background-color: rgba(255, 255, 255, 0);
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar_toggle, .navbar-expand{
    background-color: rgba(255,255,255,0);
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bg-dark {
    /*background-color: rgba(255,255,255,0) !important;*/
    /*background-image: url("/static/bijlies/assets/background.jpg");*/
    background-size: 50%;
    border-color: rgba(255,255,255,0);

}

.navbar a{
    font-size: 2em; /*1.8em;*/
}

.navbar-toggle {
    display:none;
}

.nav-link {
    color: darkslategrey;
}



.dropdown:hover .dropdown-menu {
  display: block;
}

.navbar li ul {
    background-color: offwhite; //darkseagreen;
}

.navbar li ul li{
    margin: 10px;
}

.navbar-nav > li > a:hover {
  border-top: 3px solid #F68220;
}

#titlebar{
    background-size: 100% 100%;
    font-stretch: expanded;
    letter-spacing: 5px;
    font-size: 2.5rem;
}

.container{
    margin-left: 0 !important;
/*    text-align: left;
    float: left;
    align-items:left;*/
}