/* 
Theme name: Kapsalon
Author: Marin Wiellersen
Version: 1.0
*/

a {
	text-decoration: none;
	color: #FC4B05;
}

button {
	margin: none;
	padding: none;
	display: block;
	background: none;
	border: none;
}

body {
	font-family: 'Dosis', sans-serif;
	font-size: 14px;
	width: 100%;
	margin: 0;
	background-image: url("/wp-content/uploads/2017/12/mettebackground.jpg");
	background-attachment: fixed;
	background-size: 300px 300px;
}



#background /* Not using */ {
	width: 100%;
	margin: 0;
}

#container {	
	height: calc(100vh - 190px);
	width: 100%;
	position: absolute;
	bottom: 0;
}

/* Booking button */
#booknow {
	position: fixed;
	top: 10px;
	right: 260px; /* Ruimte voor menu */
	z-index: 99999;
	height: 220px;
	width: 220px;
	cursor: pointer;
}

.grow {
	height: 270px!important;
	width: 270px!important;
	top: 10px!important;
}

/* All header styling */
header.site-header {
	background-color: white;
	display: flex;
	height: 220px;
	width: 100%;
	margin: 0;
	position: fixed;
	top: 0;
	z-index: 1;
}

#menuopen {
	padding: 10px;
	margin-top: 50px;
	position: fixed;
	right: 20px;
	top: 10px;
}

	@media screen and (min-width: 1351px) {
	#container {	
		height: calc(100vh - 220px);
	}
	
	.titlelarge {
		padding: 10px 20px;
		margin-top: 10px;
	}
	
	#menuopen {
		top: 30px;
	}

		.title {
			display:none!important;
		}
		
		.title2 {
			display: none!important;
		}
		
		.titlesmall {
			display: none!important;
		}
		.titlesmall2 {
			display:none!important
		}	
		.titleextrasmall {
			display: none!important;
		}
		
		.titlemedium {
			display: none!important;
		}
		
		
		
	}

			@media screen and (min-width: 1120px) and (max-width: 1350px) {
			header.site-header {
				height: 190px;
			}

			.title {
				padding: 10px 20px;
				margin-top: 10px;
			}
			
				.title2 {
					display: none!important;
				}
				
				.titlelarge {
					display: none!important;
				}
				
				.titlesmall {
					display: none!important;
				}
				.titlesmall2 {
					display:none!important
				}	
				.titleextrasmall {
					display: none!important;
				}
				
				.titlemedium {
					display: none!important;
				}
			}

			
						@media screen and (min-width: 950px) and (max-width: 1119px) {
							header.site-header {
								height: 170px;
							}
							
							#menuopen {
								top: 0px;
							}
									
							.title2 {
								display: block;
								padding: 10px 10px;
								margin-top: 20px;
							}
								
								.titlemedium {
									display: none!important;
								}
								.title {
									display: none!important;
								}
								
								.titlelarge {
									display: none!important;
								}
								
								.titlesmall {
									display: none!important;
								}
								.titlesmall2 {
									display:none!important
								}	
								.titleextrasmall {
									display: none!important;
								}
							}
									
	@media screen and (min-width: 851px) and (max-width: 949px) {
	header.site-header {
		height: 150px;
	}
	
	#menuopen {
		top: 0px;
		margin-top: 40px;
	}
			
	.titlemedium {
		display: block;
		padding: 10px 10px;
		margin-top: 20px;
	}
		
		.title {
			display: none!important;
		}
		
		.title2 {
			display: none!important;
		}
		
		.titlelarge {
			display: none!important;
		}
		
		.titlesmall {
			display: none!important;
		}
		.titlesmall2 {
			display:none!important
		}	
		.titleextrasmall {
			display: none!important;
		}
	}	


			@media screen and (min-width: 610px) and (max-width: 850px) {
			.site-header {
				height: 160px!important;
				position: fixed;
				display: block;
			}
			
			#menuopen {
				top: 0px;
				margin-top: 45px;
			}
			
			#booknow {
				margin: 200px auto auto auto;
				width: 200px!important;
				height: 200px!important;
			}

			.title2 {
				display: block;
				padding: 10px 10px;
				margin-top: auto;
				margin-bottom: auto;
				width: calc(90% - 50px);
			}
	
			.title2 img {
				width: 100%;
				height: initial;
			}
				
				.title {
					display: none!important;
				}
				
				.titlemedium {
					display: none!important;
				}
				
				.titlelarge {
					display: none!important;
				}
				
				.titlesmall {
					display: none!important;
				}
				.titlesmall2 {
					display:none!important
				}
				.titleextrasmall {
					display: none!important;
				}

			}
			
						@media screen and (min-width: 470px) and (max-width: 609px) {
							.site-header {
								height: 150px!important;
								position: fixed;
								display: block;
							}
							
							#menuopen {
								top: 10px;
								right: 5px;
								margin-top: 40px;
								width: 30px;
								height: 30px;
							}
							
							#booknow {
								margin: 190px auto auto auto;
							}

							.titlemedium {
								display: block;
								padding: 10px 10px;
								margin-top: auto;
								margin-bottom: auto;
								width: calc(90% - 20px);
							}
							
							.titlemedium img {
								width: 100%;
								height: initial;
							}
								
								.title {
									display: none!important;
								}
								
								.title2 {
									display: none!important;
								}
								
								.titlelarge {
									display: none!important;
								}
								
								.titlesmall {
									display: none!important;
								}
								.titlesmall2 {
									display:none!important
								}	
								.titleextrasmall {
									display: none!important;
								}

							}
							
	
			@media screen and (max-width: 469px) {
				.site-header {
						height: 90px!important;
				}
				
				#menuopen {
					top: 50px;
					right: 10px;
					width: 26px;
					height: 26px;
					border-radius: 3px;
					padding-right: 10px;
					background-color: #fff;
				}
				
				#booknow {
					margin: 130px auto auto auto;
				}
					
				.titlesmall2 {
						display:block!important;
						margin: auto;
						width: 90%
				}	
				
				.titlesmall2 img {
					width: 100%;
					height: initial;
				}
					
					.titleextrasmall {
						display: none!important;
					}
					.titlesmall {
						display: none!important
					}
					.titlelarge  {
						display: none!important;
					}
					.title {
						display: none!important;
					}
					.title2 {
						display: none!important;
					}
					.titlemedium{
						display: none!important;
					}

			}

											
											

/* End header styling */

/* Menu */
#menu {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 2;
	min-width: 100px;
}

#menuclose {
	padding: 10px;
	display: none;
	margin-top: 50px;
}

.menubutton {
	display: none;
	padding: 15px 20px;
	cursor: pointer;
	text-transform: uppercase;
	text-align:left;
	font-size: 105%;
}

.menubutton:hover {
	color: #FC4B05;
	transition: color 0.3s ease;
}

#Button1 {
	margin-top: 50px;
}

/*
#menubackground {
	width: 100px;
	height: 100vh;
	background-color: rgba(255,255,255,0);
	
}

.active {
	background-color: rgba(255,255,255,0.8)!important;
	width: 260px!important;
	/* border-left: solid 2px black;*/
/* } */


#menubackground {
	display: none; 
	width: 260px;
	height: 100vh;
	background-color: rgba(255,255,255,0.8)!important;
}

	
/* End Menu */


/* Page content */
#contentcontainer {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	height: 100%;
	width: 90%;
}

.content {
	margin: auto;
	display: none;
	width: 100%;
	min-width: 400px;
	padding: 5px;
	background-color: rgba(255, 255, 255, 0.9);
}

.content.number6 {
	background: none;
}

.contentflex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: justify;
	margin: auto;
}

.contentflex img {
	display: block;

}

#wiecontenttext a {
	display: block;
    text-align: center;
}

.contenttext {
	display: block;
	height: 100%;
	width: 60%;
	font-size: 20px;
	margin: auto;
}

.contenttext h2 {
	text-align: center;
	margin-top: 0px;
}

.contenttext img {
	width: 100%;
	max-width: 250px;
	margin: auto;
	height: 100%;
}

img.contentimg {
	display: block;
	margin: auto;
	padding: 10px;
}

.content a {
	color: #FC4B05;
}

.content a:hover {
	text-decoration: underline;
}

.content p {
	color: #FC4B05;
	cursor: pointer;
	text-align: center;
	display: inline;
}

.booklink.block {
	display: block;
}

.content p:hover {
	text-decoration: underline;
}

.contenttextlink {
	display: block;
	text-align: center;
}

/* Alleen Wat Is section */


/*Alleen voor waar section */


#contentcolumn {
	width: 100%;
	margin-top: 20px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	text-align: center;
}

.column {
	width: 40%;
	min-width: 180px;
	margin: auto;
}

#googlemaps {
	display: block;
	width: 30%;
	height: 100%;
	margin: auto;
	min-width: 300px;
}

.dayoftheweek {
	text-align: left;
}

.timeofday {
	text-align: right;
}

#column2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 0;
}

.fullwidth {
	width: 100%;
	text-align: center;
}

.dayoftheweek {
	width: 50%;
	text-align: left;
}

.timeofday {
	width: 50%;
	text-align: right;
}


/* Alleen kost sectie */

.threecolumn {
	margin: 10px auto;
	display: flex;
	flex-wrap: wrap;
	line-height: 150%;
}

#contenttextkost {
	width: 60%;
	text-align: center;
}

#contenttextkost a {
	display: block;
	margin-bottom: 10px;
}

#price1 {
	width:280px;
	height: 100%;
}

#price2 {
	width: 255px;
	height: 100%;
}

#price3 {
	width: 250px;
	height: 100%;
}

.linebreak {
	margin-top: 10px;
}

.subcolumnleft {
	width: 85%;
	text-align: left;
}

.subcolumnright {
	width: 15%;
	text-align: right;
}

/* Booking page */

#afspraaktekst {
	font-size: 20px;
	color: black;
	text-align: justify;
	padding: 10px;
	/* border: 3px solid black; 
	border-radius: 10px; */
	background-color: rgba(255,255,255,0.6);
	width: 90%;
	max-width: 660px;
	margin: 40px auto auto auto;
}

#bookingwidget {
	margin: auto;
	max-width: 700px;
	margin-top: 50px
}

#backlink {
	margin-right: 30px;
	margin-top: 50px;
	position: absolute;
	right: 0;
}

div.contenttextbooking {
	display:none;
}

div.contenttextbooking h2{
	display:none;
}


@media screen and (min-width: 850px) and (max-width: 1350px) {
	.contenttext {
			font-size: 18px;
		}
	
	#price1 {
		min-width: 148px;
	}
	
	#price2 {
		min-width: 160px;
	}
}



@media screen and (max-width: 1200px) {
	
	#contentcolumn {
		display: block;
	}
	
	.threecolumn {
		width: 220px!important;
		margin: 10px auto;
		max-width: 100%;
	}
}

@media screen and (min-width: 851px) and (max-width: 1200px) {

	/* Reposition button on smaller screen */
	
	
	#menuclose {
		margin-top: 40px;
	}
	
	.active {
		width: 240px!important;
	}
	
	
	
	#booknow {
		right: 240px; /* Ruimte voor menu */
		height: 180px;
		width: 180px;
	}
	
	.grow {
		height: 220px!important;
		width: 220px!important;
		top: 55px!important;
	}
	
	


}

/* Change hamburger button 

@media screen and (max-width: 850px) {
	#menuopen {
		padding: 3px;
		background-color: white;
		border-radius: 5px;
		margin-top: 20px;
		height: 25px;
		width: 25px;
		position: fixed;
		right: 7px;
		top: 15px;
	}
}*/


/* Spacing menu buttons */

@media screen and (max-width: 850px) and (orientation: landscape) {
.menubutton {
		padding: 5px 20px;
	}
}

/* Mobile screen settings */
@media screen and (max-width: 850px) {
    body {
		background-image: url("/wp-content/uploads/2018/01/mettebackground-e1516039420472.jpg");
        background-size: 250px 250px;
		image-rendering: -webkit-crisp-edges;
    }
	
	#container {	
	height: 100%;
	position: static;
	}
	
	/* Booking */
	
	#booknow {
		display: block;
		position: static;
		z-index: 2;
		z-index: 0;
	}
	
	.grow {
		height: 170px!important;
		width: 170px!important;
	}
	
	
	
	/* Menu */
	#menu {
		z-index: 3;
	}
	
	#menuclose {
		margin-top: 20px;
		height: 30px;
		width: 30px;
	}
	
	#Button1 {
	margin-top: 0px;
	}
	

	/* Content */
	.content {
		margin: 20px auto;
		display: block;
		width: 94%;
		max-width: 600px;
		height: 100%;
		padding: 5px;
		min-width: initial;
	}
	
	.content.number6 {
		background: rgba(255, 255, 255, 0.9);
		padding-bottom: 0px;

	}

	.contenttext {
		min-width: initial;
		width: 95%;
		margin: auto;
		float: none;
		font-size: 18px;
	}
	
	.contenttext h2 {
	margin-top: 20px;
	}
	
	img.contentimg {
		padding: 0;
		max-width: 100%;
	}

	#contentcontainer {
		margin-top: 20px;
	}
	
	
	.contentflex {
		padding: 15px 0px;
	}
	
	/* Booking page */
	
	#backlink {
		margin-top: 12px;
		width: 30px;
		height: 30px;
	}

	#afspraaktekst {
		display: none;
	}
	
	#bookingwidget {
		margin-top: 20px;
	}
	
	div.contenttextbooking {
	display: block;
	height: 100%;
	width: 95%;
	margin: auto;
	font-size: 18px;
	text-align: justify;
}

	div.contenttextbooking h2 {
	display: block;
	text-align: center;
	margin-top: 20px;
	}

	/* #backlink {
		display: none;
	} */
	
	/* Specific blocks */
	
	#googlemaps {
		width: 90%;
		height: 100%;
		margin: auto;
		padding: 0;
		min-width: initial;
		text-align: center;
	}
	
	#price1 {
		min-width: 132px;
	}
	
	
	#contenttextkost {
		width: 95%;
	}
}

@media screen and (max-width: 1200px) {
	#column1 {
		margin-bottom: 10px;
	}
	
}


/* CORONA CONTENT */
#coronahome {
	display: block;
}

#hometext {
	width: calc(100% - 40px);
	padding: 12px 0;
	color: black;
}

#hometext p {
	color: black;
	display: block;
	cursor: unset;
	text-align: justify
}

#hometext p:hover {
	text-decoration: none;
}

/* All footer styling */

footer.site-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: rgba(255,255,255,0.2);
}

/* End footer styling */