@import url('https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap');


body {
    /*font-family: Arial, Helvetica, sans-serif;*/

    font-family: 'Oleo Script', cursive;
	font-weight:100;
    font-size: 18px;

    background: url("../images/marmer_bruin.jpg");
    background-color: #ddd;
    opacity: 1;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    
}

div.titelpagina {
    margin: 20px;

}

p.paragraaf {
    font-size: 1.2em;
    padding-left: 15px;
    padding-right: 15px;
}

li.paragraaf{
    font-size: 1.2em;
}
.headerbackground{
    width: 100%;
    /*position: fixed;*/
    position:sticky;
    top: 0;
    z-index: 100;
}

.flex-header {
    background: url("../images/marmer_bruin.jpg");
    background-color: #ddd;


}

.flex-container {
    display: flex;
    
}
.flex-container2 {
    display:none;
}

.header  {
    flex: 70%;
    padding: 5px;
    text-align: center;
    color: black;
}



.flex-container2 {
    display: none;
    justify-content: center;
   
}

.header-left {
    flex: 15%; /* Set the width of the sidebar */
 }

.header-right {
    flex: 15%; /* Set the width of the sidebar */
    box-align: middle;
    
}
.logo {
    max-width : 200px; 
    border-radius: 50%;
    
   
}

.titelpagina {
    width: 100%;
    color:bisque;
}
.header h1 {
    font-size: 2em;
}

.header h3 {
    font-size: 1.1em;
}

/* Style de navigatiebalk */
.navbar {
    overflow: hidden;
    background-color: #333;
    list-style-type: none;
    
}
/* Style links van de navigatiebalk */
.navbar a {
    float: left;
    display: block;
    color:bisque;
    text-align: center;
    padding: 7px 8px;
    text-decoration: none;
    font-size: 1em;
}

/* verander van kleur bij het 'hooveren' */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}
.navbar a:active {
    background-color: red;
    color: black;
}

hr {
    background-color: #333;
    height: 25px;
    width: 100%;

}


.navbar ul {
    list-style-type: none;
    margin:  0;
    padding: 0;
    overflow: hidden;
    background-color: #333;

}




/* Ensure proper sizing */
* {
    box-sizing: border-box;
}

/* Column container */
.row {
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
   /* background: url("../images/marmer_bruin.jpg");
    background-color: #ddd;*/
    padding: 0px;
    
    
    
}
/* we maken 2 ongelijke kolommen (side en main) naast mekaar. Wanneer scherm te klein komen deze onder mekaar */

.side , .main{
    flex: 50%; /* Set the width of the sidebar */
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-top: 0px;
    text-align:left;
    margin-top: 0px;
    margin-bottom: 0px;
}




/* de footer */
.footer {
    padding: 5px;
    text-align: center;
  
}

/*  bij de footer een soort venster zetten bij de tekst  */
#content {
    text-align: left;
    width: 75%;
    margin: auto;
    position: relative;
    /*background: url('images/marmer_wit.jpg');*/
    border-radius: 25px;
   
   
   
  }

  #content::before {
    position: absolute;
    content:"";
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    bottom: 0;
    border-radius: 25px;
    background-color: rgba(0,0,0,0.2);
    z-index: -1;
    
  }




 /* Style the navigation menu (klein sherm)*/

 


 .topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
    display: none;  /* oorspronkelijk niet tonen enkel bij kleine schermen  */
  }
  
  /* Hide the links inside the navigation menu (except for logo/home) */
  .topnav #myLinks {
    display: none;
  }
  
  /* Style navigation menu links */
  .topnav a {
    color: grey;
    padding: 4px 16px;
    text-decoration: none;
    font-size: 1.7em;
    display: block;
  }
  
  /* Style the hamburger menu */
  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  /* Add a grey background color on mouse-over */
  .topnav a:hover {
    /*background-color: #ddd;*/
    color: red;
  }
  
  /* Style the active link (or home/logo) */
  .active {
    color: white;
  } 



  .grid-container {
        display: grid;
        /*column-gap: 20 px;*/
        grid-template-columns: auto auto;
        border-radius: 25px;
        border-style: solid;
        border-width: 2px;
        border-color:black;
        background-color: bisque;
  

  }

 

  .contact_tablet,  .contact_pc,  .contact_tel {
    border-color: grey;
    border-radius: 25px;
    opacity: 0.65;
  }

  .contact_tablet{
    display: none;
    max-width: 800px;
    padding: 8px;
  }
  .contact_pc {
    max-width: 800px;
    padding: 25px;
  }
  .contact_tel{
    display: none;
    max-width: 340px;
    padding: 4px;
    font-size: 1.1em;
  }

  .inputtablet, .inputpc, .inputtel, #vraag {
    font-family: 'Oleo Script', cursive;
	font-weight:100;
    font-size: 1em;
    }
    .inputtel {
        font-size: 1,1em;
    }

    #verstuur {  /* button bij contactformulier  */
        font-family: 'Oleo Script', cursive;
	    font-weight:900;
        font-size: 1.1em;
        
        cursor: pointer;
        width:150px;
        height: 30px;
        border-style: solid;
        border-width: 2px;
        border-color:black;
        border-radius: 25px;
        background-color: brown;
        

    }
    #verstuur:hover {
        background-color: green;
    }



    #flyercm {
        max-width: 400px;
        border-style:solid;
        border-color: black;
        border-width: 4px;
        border-radius: 20px; 
    }


    .vraagteken{
        width: 20px;
        height: 20px;
        cursor: pointer;
    }











 /* Add responsiveness */
        /*  voor laptopes en small screens 1025-1200 px */
        @media screen and (max-width: 1200px) {

            body {
                /*font-family: Arial, Helvetica, sans-serif;*/
                font-size: 18px;
                width: 96%;
            }

            .logo {
                max-width : 125px; 
            }
/*
            .leuze {
                display: none;
            }
 */
            .leuze2 {
                display: none;
            }
 /*           .flex-container2 {
                display: flex;
                justify-content:center;
                height: 80px;
                margin-top: -20px;
            }
 */   
            .row {
            flex-direction: flex;}

           .main{
                  margin-top: -20px;
            }

            .side{
                  margin-bottom: -20px;
            }
/*
            .navbar {
                display:block;
            }
            .navbar a{
                float: none;
                width:100%;
                font-size: 1.2em;
                padding: 6px 10px;
                display:none;
            }
            */
            .topnav {
                display:none;
            }

            .header h1 {
                font-size: 2.5em;
            }

            .header h3 {
                font-size: 1.2em;
            }

          
          
            
          
        }
        

/*  voor laptops en small screens  769-1024 px*/

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

            body {
                /*font-family: Arial, Helvetica, sans-serif;*/
                font-size: 16px;
                width: 96%;
                padding-left: 10px;
                padding-right: 10px;
            }

            .logo {
                max-width : 75px; 
            }

            .leuze {
                font-size: 1.2em;
                
            }

    
            .row {
            flex-direction: column;}

           .main{
                  margin-top: -20px;
            }

            .side{
                  margin-bottom: -20px;
            }

            .topnav {
                display:block;
            }

/*
            .navbar {
                display:block;
            }
            .navbar a{
                float: none;
                width:100%;
                font-size: 1.2em;
                padding: 6px 10px;
                display:none;
            }
            */







            .navbar {
                display:none;
            }

 /*           
            .navbar a{
                float: none;
                width:100%;
                font-size: 1.2em;
                padding: 6px 10px;
            }
*/      
            .header h1 {
                font-size: 2em;
            }

            .header h3 {
                font-size: 1.2em;
            }

            
            .contact_tel {
                display: none;
               
            }
            .contact_pc {
                display: none;
               
            }.contact_tablet {
                display: block;
               
            }
            .grid-container {
                /*display: grid; */
                /*column-gap: 20 px;*/
                grid-template-columns: auto;
        
          }
        }


/* voor ipads and tablets 481-768 px  */

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

            body {
                /*font-family: Arial, Helvetica, sans-serif;*/
                font-size: 16px;
                width: 96%;
                padding-left: 10px;
                padding-right: 10px;
            }

            .logo {
                max-width : 80px; 
            }

            .row {
            flex-direction: column;}


            #aanbod_main{
                            
                margin-top: -220px;
               
            }
            #sofrologie_main {
                margin-top: -220px;
            }
            #stress_main {
                margin-top: -320px;
            }
            #yoga_main {
                margin-top: -80px;
            }


   /*        
            .navbar a{
                float: none;
                width:100%;
                font-size: 1.2em;
                padding: 6px 10px;
            }
  */      
            .header h1 {
                font-size: 1.5em;
            }

            .header h3 {
                font-size: 1.1em;
            }

            
            .contact_tel {
                display: block;
               
            }
            
            .contact_tablet {
                display: none;
               
            }


        }

/* voor mobieltjes  */

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

    .leuze{
        display: none;
    }

    .flex-container2, .leuze2 {
        display: block;
    }
    .leuze2 {
        font-size: 1,2em;
    }

    #flyercm {
        
        max-width: 300px;
    }

        }