body 
    {
    background-color: #EFE9E1;
    }

/* ------------------------------------------------------------------------------------------- menu start ------------------------------------------------------------------------------------------- */
.menubar
    {
       background-image: 
         linear-gradient(to top, rgba(239, 233, 225, 1) 0%, rgba(239, 233, 225, 0) 40%), 
        url("/Images/Paardbg.jpg");
    margin-top: -20px;
    margin-left: -10px;
    margin-right: -10px;
    background-color: #EFE9E1;
    height: 550px;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    }
ul 
    {
    list-style-type: none;
    position: center;
    background-color: transparent;
    }

li 
    {
    float: left;
    font-family: 'Times New Roman', serif;
    font-size: 25px;
    text-shadow: 2px 2px 5px black;
    }

li a 
    {
    display: block;
    color: white;
    text-align: center;
    padding: 40px 22px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent; /* Safari / Chrome */
    -moz-tap-highlight-color: transparent;    /* Firefox */
    }

li a:hover 
    {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1); 
    background-color: transparent;
    color: #EFE9E1;
    }



/* ------------------------------------------------------------------------------------------- menu end ------------------------------------------------------------------------------------------- */
                        
/* ------------------------------------------------------------------------------------------- footer start ------------------------------------------------------------------------------------------- */

footer 
    {
    padding-top: 10px;
    text-align: center;
    background-color: #72383D;
    color: white;
    left: 0;
    bottom: 0;
    width: 100%;
    }
                    
 /* -------------------------------------------------------------------------------------------  footer end ------------------------------------------------------------------------------------------- */
                        
 /* ------------------------------------------------------------------------------------------- links start ------------------------------------------------------------------------------------------- */

a:link 
    {
    color: #EFE9E1;
    background-color: transparent;
    text-decoration: none;
    }

a:visited 
    {
    color: #D9D9D9;
    background-color: transparent;
    text-decoration: none;
    }
a:hover 
    {
    color: #322D29;
    background-color: #EFE9E1;
    }
a:active 
    {
    color: #D1C7BD;
    background-color: transparent;
    text-decoration: underline;
    }

/* ------------------------------------------------------------------------------------------- links end ------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------- scrollbar ------------------------------------------------------------------------------------------- */
/* width */
::-webkit-scrollbar 
    {
    width: 10px;
    }

/* Track */
::-webkit-scrollbar-track 
    {
    background: #f1f1f1; 
    }
 
/* Handle */
::-webkit-scrollbar-thumb 
    {
    background: #888; 
    }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover     
    {
    background: #555; 
    }
/* ------------------------------------------------------------------------------------------- scrollbar end ------------------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------- phone style  ------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 700px) 
{
    .menubar ul {
        display: block; 
        padding-top: 10px;
        padding-left: 20px; /* iets naar rechts inspringen */
        box-sizing: border-box;
        margin: 0;       /* links uitlijnen */
        width: 100%;
        text-align: left; /* items links */
    }

    .menubar li {
        float: none;      
        width: 100%;    
        margin: 4px 0;    /* iets minder verticale ruimte */
        list-style: none;
    }

    .menubar li a {
        display: block;   
        padding: 12px 20px;  /* kleine padding, nog steeds klikbaar */
        font-size: 1.2rem;
        text-align: left; 
    }


}
/* ------------------------------------------------------------------------------------------- phone style end ------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------------------------- facebook & Insta  ------------------------------------------------------------------------------------------- */
.fi 
    {
    width: 50px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    text-shadow: 2px 2px 5px black;
    }

.fi:hover 
    {
    opacity: 0.7;
    }

.fi2:link 
    {
    color:#72383D;
    width: 50px;
    text-align: center;
    margin: 5px 2px;
    text-shadow: 2px 2px 5px;
    }

.fi2:hover 
    {
    opacity: 0.5;
    text-decoration-line: underline;
    }
/* ------------------------------------------------------------------------------------------- facebook & Insta end ------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------- Moderne scrollbar ------------------------------------------------------------------------------------------- */

/* Voor Chrome, Safari en Edge */
::-webkit-scrollbar {
  width: 10px;              /* breedte van scrollbar */
  height: 10px;             /* hoogte bij horizontaal scrollen */
}

::-webkit-scrollbar-track {
  background: #f0f0f0;      /* achtergrond van de scrollbar-track */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #72383D;      /* kleur van de "thumb" */
  border-radius: 10px;
  border: 2px solid #f0f0f0; /* ruimte rondom voor een 'floating' effect */
}

::-webkit-scrollbar-thumb:hover {
  background: #5a2c30;      /* donkerder bij hover */
}

/* Voor Firefox */
* {
  scrollbar-width: thin;            /* dunne scrollbar */
  scrollbar-color: #72383D #f0f0f0; /* thumbkleur trackkleur */
}