html {
		background: url(../images/back.jpg) repeat-x top center; 	
}

body {   
background: #fff;
		font-family: 'Ubuntu', sans-serif;
		font-weight:400px;
		font-size:20px;
		line-height:28px;
		color: #000;
		margin: 0px;
		background: url(../images/header_drumles_in_bodegraven.jpg) no-repeat top center; 	   
}


img {
border: 0px;
}


table, td,div {		 
		font-size:20px;
		line-height:28px;
		 padding: 0px; 
		 margin: 0px;
		 border-collapse: collapse;  
		 border-spacing: 0px; 
		 border-style: hidden;  
}



.off {
display:none;
overflow:hidden;	
}

.hidden {
animation: SlideClose 0.5s;
animation-fill-mode: forwards;
-webkit-animation: SlideClose 1s; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards;
}

.visible{
animation: SlideOpen 0.2s;
animation-fill-mode: forwards;
-webkit-animation: SlideOpen 0.2s; /* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes SlideOpen {
    0%  {opacity:0.0}
    100% {display:block;  opacity:1.0}
}

/* Standard syntax */
@keyframes SlideOpen {
    0%  {opacity:0.0; height:0%}
    100% {display:block;  opacity:1.0; height:100%}
} 	

/* Chrome, Safari, Opera */
@-webkit-keyframes SlideClose {
    0%  {opacity:0.0; height:0%}
    100% {display:block;  opacity:1.0; height:100%}
}

/* Standard syntax */
@keyframes SlideClose {
	0% {display:block;  opacity:1.0; height:100%}
    100%  {opacity:0.0; height:0%}
    
} 


a { 
color: #0084ad;
transition: 0.3s;
}

a:hover {
	color: #000;
	text-decoration:underline;
	transition: 0.3s;
}

h1, h2 {
font-size:40px;
line-height:50px;
font-weight:200;
color:#0084ad;
text-align: center;
}

#wraper {
margin: 0 auto;
margin-top:0px;
max-width:1000px;
text-align:left;
}


#menu {  
width:100%;
background:#1d1d1b;
min-height:76px;
font-size:18px;
color:white; 
padding-top:26px;
overflow:auto;
margin-bottom:0px;
}

.menu_wraper {
	margin:0 auto;
	max-width:1236px;
	font-size:12px;
	
}

#menu .contact {
float:left;
width:65%;
text-align:center;
padding-top:15px;
}

#menu .hamburger {
width:9%;
min-height:50px;
padding-right:1%;
float:left;
text-align:right;
padding-top:15px;
cursor:pointer;
cursor:hand;
}

#menu .hamburger img {
width:28px;
padding-left:15px;	
}

#menu a {
color:#f39200;	
text-decoration:underline;	
}

#menu a:hover {
text-decoration:none;
transition:0.5;	
}

#menu .tel {
display:none;	
}

#menu .telb {
display:inline-block;
color:#f39200;
}

#menu #uitklap {
position:absolute;
left:0;
top:80px;
text-align:left;	
width:100%;
}

#menu #uitklap  div {
 margin: 0 auto;
 max-width:1380px;	
}

#menu #uitklap  div ul {
float:right;
background:white;
margin-right:90px;
margin-top:0px;
 padding-left:0;
 margin-left:0;
 list-style-type: none;
 font-size:15px;
}

#menu #uitklap  div ul li {
 margin-left:0;
 text-decoration:none;	
}

#menu #uitklap  div ul li a {
  padding:2px 10px 2px 10px;
 text-decoration:none;
 display:block;	
 transition: 0.5s;
}

#menu #uitklap  div ul li a:hover  {
 background:#f39200;
 transition: 0.5s;
 color:white;
}

#header {
	min-height:720px;
	overflow:auto;
}

#logo {
	margin-top:70px;
	margin-left:30px;	
	margin-bottom:12px;
}

#header_wraper {
	max-width:1250px;
	margin:0 auto;
	text-align:left;	
}

#header_wraper p {
	margin-top:70px;
	margin-left:30px;	
	color:black;
	font-size:17px;
}

#header_wraper p span {
	padding-right:15px;	
}

#header_wraper p span a {
	color:black;
	text-decoration:underline;	
}

#header_wraper p span a:hover {
	color:white;
	text-decoration:underline;	
	}

.header_mb {
display:none;	
}

#header #social {
float:right;
width:180px;
margin-top:0px;	
}

#header #social a.fb {
	display:inline-block;
	width:30px;
	height:40px;
	text-decoration:none;
  background: url(../images/fb.png) no-repeat left top; 
  	     -webkit-background-size: cover;
    -moz-background-size: cover;
  -o-background-size: cover;
  margin:0 auto;
  transition:0.5;
  margin-right:20px;
}

#header  #social a.fb:hover {
 background: url(../images/fb_wit.png) no-repeat left top;
  transition:0.5;
	}
	
	
#header #social a.yt {
	display:inline-block;
	width:57px;
	height:40px;
	text-decoration:none;
  background: url(../images/yt.png) no-repeat left top; 
  	     -webkit-background-size: cover;
    -moz-background-size: cover;
  -o-background-size: cover;
  margin:0 auto;
  transition:0.5;
}

#header  #social a.yt:hover {
  background: url(../images/yt_wit.png) no-repeat left top; 
    transition:0.5;
	}

#foto {
	text-align:center;
	width:100%;
	background:#302e31;
}

#foto img {
 width:100%;	
 max-width:1600px;
 margin: 0 auto;
}

#foto .dt {
display:block; 
}

#content {
color:#000;
max-width:1050px;
margin:0 auto;
margin-top:55px;
margin-bottom:0px;
padding-left:20px;
padding-right:20px;
overflow:auto;
}

#content p {
font-size:20px;
line-height:31px;
font-weight:500;
margin-top:40px;
text-align: center;
}

div.pt {
text-align:center;
max-width:1000px;
margin:0 auto;
padding-left:20px;
padding-right:20px;
}


#content ul {
margin-left:0;

}

#content li {
float:left;
width:50%;
margin:0;
}

#keuze {
width:100%;
overflow:auto;
margin-top:90px;
text-align:center;
}

#keuze_wraper {
max-width:1300px;
margin:0 auto;	
}

#keuzes {
background:#0084ad;	
padding:40px 0 40px 0;
color:white;
}

#keuze a {
color:#000;
}


#keuze a:hover img {
opacity:0.7;
}


#keuze span {
display:inline-block;
width:16%;
margin-left:1%;
margin-right:1%;	
text-align:center;
overflow:auto;
}

#keuze span img {
width:100%;
padding-bottom:30px;	
max-width:160px;
}

#prijzen {
color:#000;
max-width:1050px;
margin:0 auto;
margin-top:55px;
margin-bottom:95px;
padding-left:20px;
padding-right:20px;
overflow:auto;
text-align:center;
}

#prijzen .toelichting {
text-align:left;	
}

#prijzen .prijs {
	background:#a4a4a4;
	width:auto;
	color:white;
	float:left;
	width:20%;
	margin-right:5%;
	margin-top:5px;
	text-align:center;
	padding:0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

#prijzen .prijs h3 {
	font-size:65px;
	width:100%;
	text-align:center;
	margin-top:50px;
	margin-bottom:30px;
}

#prijzen .prijs p {
	color:white;
	font-size:15px;
	text-align:center;
	margin-bottom:40px;
}

#prijzen #toelichting {
	text-align:center;
}

#afspraak {
	margin:0 auto;
	max-width:816px;
	margin-top:95px;
	margin-bottom:150px;
	overflow:auto;
		text-align:center	
}

#afspraak p {
padding-left:20px;
padding-right:20px;	
}

#afspraak .tel {
	display:none;
}

#afspraak .telb {
	display:inline-block;

}

#afspraak .invulvak, #afspraak .invulvak_b {
	background:#f5f5f5;
	padding:2%;
	border:0px solid #f5f5f5;
}



#afspraak .invulvak {
	margin:0 1% 2% 1%;
	width:43%;
}

#afspraak .invulvak_b {
	margin:0 2% 0 2%;
	width:92%;
}

#contactform {
	text-align:center	
}

#afspraak  .button {
	text-transform: uppercase;
	background:#f7a501;
	color:white;
	display:inline-block;
	width:194px;	
	padding-top:15px;
	padding-bottom:15px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:20px;
	margin-top:20px;
	font-size:15px;
	font-weight:900;
	text-decoration:none;
	white-space: nowrap;
	transition: 0.5s;
	border:0px;;
	cursor:pointer;
	cursor:hand;

}

#afspraak  .button:hover {
	background: #0084ad;
	transition: 0.5s;
}

.error {
border:2px solid red!important;
}

#errortekst {
color:red;	
}

.errortxt {
	color:red;	
}


#footerimg {
	clear:both;
	height:359px;
	margin: 0 auto;
  background: #a2a2a2 url(../images/footer_drumles_in_bodegraven.jpg) no-repeat top center; 
  text-align:center;
}

#footerimg p {
	padding-top:350px;
}



#footerimg img {
display:none;
}

#footerimg img.dt {
display:block;	
}




#footer {  
width:90%;
background:#0084ad;
min-height:40px;
font-size:12px;
color:white; 
padding-top:36px;
padding-bottom:20px;
padding-left:5%;
padding-right:5%;
}

#footer a  {
color:white;
text-decoration:underline
}

#footer a:hover {
color:black;
text-decoration:underline
}

#footer_wraper {
	margin:0 auto;
	max-width:1236px;
	font-size:12px;
}

#footer_wraper .credits {
	font-size:14px;
	float:left;
}

#footer_wraper .gegevens {
	font-size:14px;
	float:right;
}

#footer .top {
background: white url(../images/top.png) 17px 15px no-repeat;
margin:30px auto;
margin-bottom:-20px;
width:60px;
display:none;
transition: 0.2s;
}

#footer .top:hover {
	background: white url(../images/top.png) 17px 10px no-repeat;
	transition: 0.2s;
}

#footer .top img {
width:60px;
height:55px;
}