/*responsive setting*/
@media (min-width: 1025px) {
    header ul li {  margin: 10px 10px 0 10px; }
    header ul li a {  margin: 0; padding: 0 5% 0 5%;   }
}
/*--------------------------------------------------------------------------------------------------------------------------------*/


/* -----------------------------------------------------------tablet dwars------------------------------ */

@media (min-width: 992px) and (max-width: 1200px) {
    header {width: 100%;}
	header ul li { margin: 5px 5px 0 5px; }
    header ul li a { margin: 0;  padding: 0px 1% 0 1%;  }
    header #logo img {width: 70% margin-left: 20px; }
    
    #slideshow #main-slider .flex-caption p { font-size: 11px !important; line-height: 20px;  }
    #slideshow #main-slider .flex-button a { bottom: 14%; }
 
	#normaal { background:#fff;width: 80%;border-radius: 25px; border:0px solid #c3d117; margin-top: 50px; }
	#normaal p {  color: #000;}
	#normaal a {color: black; text-decoration:underline;}
	#normaal a span {    font-size: 10px;}
	#normaal .container .row { padding-top: 50px;margin-bottom: 38px; margin-right: 10px; margin-left: 10px; margin-top:60px;  width: 80%;	}
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* tablet dwars */
@media (min-width: 768px) and (max-width: 992px) {
    header { width: 100%; background: #fff;  position: fixed;  left: 0;  top: 0;  z-index: 200;  height: 80px; }
	header ul li { margin: 10px 0 0 0; padding: 0; }
    header ul li a { margin: 0;  padding: 0 12px 0 12px !important; }
    header #logo img {  width: 100%; margin-left:2%;	}
	header#logo { padding-top: 5px; float: left;  }
    header ul li a{ margin-top:-60px; padding: 0; list-style: none; float: right;  height: 25px; }    

    #slideshow { width: 100%; position: relative; margin: 0; border-radius: 20px; padding-top: 115px; }
    #slideshow #main-slider .flex-caption { margin-left:3%}
    #slideshow #main-slider .flex-caption p { font-size: 10px !important; line-height: 18px; }
    #slideshow #main-slider .flex-button a { background: #c3d117;color: #fff; margin: 0;  position: absolute; right: 4.5%; bottom: 1.5%; border-radius: 8px; border: 1px #000 solid;
    box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;padding: 10px 5%; text-decoration: none; font-size: 16px; text-shadow: 2px 2px #000000; }
	#slideshow #main-slider .flex-button a { margin-bottom:2%}
	
	#workshop {margin-top: 100px;}
	#workshop img {width: 60%;}
    #workshopa h2 { text-align: center; font-size: 16px; text-shadow:none; font-weight: 600; margin-top:15px; margin-bottom:10px; color: #454545; }
	#workshopb h1 { text-align: left; font-size: 32px; text-shadow:none; font-weight: 600; margin-top:15px; margin-bottom:10px; color: #606060; }
	#workshopc {  width: 100%;background:#f7f7f7;padding-left: 20px; margin-top:420px;}  
	
	#workshops p { font: normal normal normal 14px/22px 'Century Gothic', sans-serif; text-align: justify;  }
	#normaal .container .row { width: 80%; padding-top: 50px;margin-bottom: 10px;  margin-right: 10px; margin-left: 10px; }

	#verslagen .row {width: 100%;}
	#verslagen .row img  { width: 60%;}	
	
	#verslag {width: 90%; background:#fff;margin-top: 10%;margin-left:5%;margin-bottom:10%; }
	#verslag .container .row { margin-top: 3%; margin-left: 3%; margin-right: 3%; margin-bottom: 10%; }
	#verslag p { color: #000; text-align: justify; padding: 0; }
	#verslag a { color: black; text-decoration:underline; }
	#verslag a span { font-size: 10px; }
}

/*--------------------------------------------------------------------------------------------------------------------*/
/*staand tablet*/
@media (max-width: 768px) {
   
	header { width: 100%; background: #fff;  position: fixed;  left: 0;  top: 0;  z-index: 200;  height: 80px; }
	header ul li a { margin: 0; padding: 22px 0 0 0; }
    header #logo img { width:80%; }
	header #logo {padding-top: 5px; float: left; margin-left: 15px;}
	 
    header #mobile_menu {
        font-size: 28px;
        margin-top: -30px;
        float: right;
        color: #a85dca;    }
        
    header #mobile_menu_list ul {
        list-style: none;
        float: left;
        margin: 0;
        padding: 0;
        width: 100%;  }
        
    header #mobile_menu_list li {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 50px;
        background: #a85dca;
        text-align: center;
        border-bottom: 1px solid #4b1f5f;    }
        
    header #mobile_menu_list li:hover {
        background: #a85dca;
        border-bottom: 1px solid #4b1f5f;    }
        
    header #mobile_menu_list li a {
        width: 100%;
        color: #fff;
        margin: 0;
        padding: 0;
        line-height: 50px;
        border-bottom: none;
        text-decoration: none;    }
        
    #slideshow { width: 90 %; position: relative; margin-left: 10px; border-radius: 20px; padding-top: 115px; }
    #slideshow #main-slider .flex-button a { width: 80%; bottom: auto;  margin-top: -120px;  }
    #menutop { margin: 0; padding-top:3%; list-style: none; float: right; height: 3%; padding-right: 2%;}
	#intro, #tekeningen, #bio, #proces, #contact {margin-top: 30px;margin-left: 10px;  width: 100%;}
 	
	
    
    /*#intro img { max-width: 100%; margin: 20px auto 20px auto;  }*/
     
    #intro {background:#fff; margin-top: 20%; margin-bottom:5%; }
    #intro .container .row { width: 100%; margin-bottom: 10px; margin-left:0%; margin-right:2%}
    #intro p { color: #000; text-align: justify; padding: 0;}
	#intro a {color: black;text-decoration:underline; }
	#intro a span {font-size: 10px; }
	#intro .row  iframe {	width: 80%; height :120% }	
	#intro .row  video {	width: 80%; height :80% }
	#intro .flex-button6	{width: 90%;}
	#intro .flex-button6a	{width: 90%;}
	
	#tekeningen .container .row {width: 100%; margin-bottom: 10px; margin-left:0%; margin-right:2%}
	
	
	
	#bio {background:#fff; margin-top: 20%; margin-left: 10%; margin-bottom:5%; }
	#bio .container { width: 100%; margin-bottom: 10px; margin-left:0%; }
	#bio .row { width: 100%;}
	#bio .flex-button6	{width: 100%;}
	#bio .flex-button6a	{width: 100%;}
	#bio .row { width: 100%;}
	#bio .row img  { width: 100%;}	
	#bio table img  { width: 100%;}	
	#bio p { color: #000; text-align: justify; padding: 0;}
	#bio a {color: black;text-decoration:underline; }
	#bio a span {font-size: 10px; }
	#bio .row  iframe {	width: 80%; height :120% }	
	#bio .row  table {	width: 80%; height :80% }
}

/* -------------------telefoon  staand  --------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
	
	header { height: 70px; position: fixed;}
	
	header #mobile_menu { font-size: 24px;}
	header #logo {margin-left: 5%; padding-top: 15px;}
	
	header #logo img { width: 60%; }
	.flex-button { display: none; }
	
	#menutop { margin: 0; padding-top:3%; list-style: none; float: right; height: 3%; padding-right: 2%;}
	/*#menutop a {   }
	#menutop a:hover {    }*/
  
	#slideshow { width: 130%; position: relative; padding-top: 70px; margin-bottom: -60px; }
	 
	    
    #intro { width: 130%; padding-left:5%;font-size: 16px; }
    #intro h1 { font-size: 20px; margin-bottom: 1%;}
    #intro h3 { font-size: 16px; margin-bottom: 1%;}
	#intro h2 { font-size: 18px;}
	#intro img { display: none; }
	#intro .flex-button6	{ height: 35px; font-size: 18px; width: 100%}
	#intro .flex-button6a	{width: 95%;}
	
    #tekeningen { width: 130%; padding-left:5%;font-size: 16px; }
    #tekeningen h1 { font-size: 20px; margin-bottom: 1%;}
    #tekeningen h3 { font-size: 16px; margin-bottom: 1%;}
	#tekeningen h2 { font-size: 18px;}
	
	#tekeningen img {width: 100%;}
	#tekeningen .flex-button6	{ height: 35px; font-size: 18px; width: 100%}
	#tekeningen .flex-button6a	{width: 95%;}

   
    
    #projecten h1 { font-size: 20px; margin-bottom: 1%;}
    #projecten h3 { font-size: 16px; margin-bottom: 1%;}
	#projecten h2 {font-size: 20px;line-height: 30px;padding: 20px 0 10px 0; text-align: center; }
    
    #contact h1 { font-size: 20px;}
	#contact p {font-size: 10px;}
	
	#normaal { width: 95%; padding-left:1%; padding-top: 5%;padding-right:2%; font-size: 10px;}
	#normaal h1 { font-size: 16px; margin-bottom: 1%;}
    #normaal h4 { font-size: 12px; margin-bottom: 1%;}
	#normaal h3 { font-size: 14px;}
	#normaal br { font-size: 10px;}
	#normaal img {width: 70%; height: 70%; }
	
	#footer .row {width: 100%;padding-left:5%; font-size: 10px;	} 
	#footer p {font-size: 10px;}
	#footer a {font-size: 10px;}
	
}