/* welcome */
.welcome{
	width: 100%;
	height: 70vh;
	overflow: hidden;
}

.welcomeContent{
	width: 100%;
	height: 100%;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-animation-name: fade;
	-webkit-animation-duration: .5s;
	animation-name: fade;
	animation-duration: .5s;
	display: flex;
}

.welcomeContent div{
	width: 100%;
	height: 100%;
}

.welcomeContent div img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@-webkit-keyframes fade {
	from {opacity: .0} 
	to {opacity: 1}
}

@keyframes fade {
	from {opacity: .0} 
	to {opacity: 1}
}

/* over ons */
.overOns{
	width: 100%;
	padding: 7% 1%;
	background-color: #fcfcfc;
}

.overOnsTable{
	display: table;
	width: 100%;
}

.overOnsRow{
	display: table-row;
	width: 100%;
}

.overOnsWrapper{
	width: 75%;
	margin: 0 auto;
}

.overOnsTd{
	display: table-cell;
	width: 50%;
	padding: 0 1%;
	position: relative;
}

.overOnsText{
	text-align: center;
	vertical-align: middle;
}

.overOnsText h1{
	font-size: 3vw;
	font-family: canter-bold;
	text-transform: uppercase;
}

.overOnsText p{
	font-size: 1vw;
}

.overOnsImg{
	text-align: center;
	overflow: hidden;
	position: relative;
}

.overOnsImg img{
	/*width: 100%;*/
	border-radius: 2%;
	/*box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;*/
	transition: .3s ease;
	cursor: pointer;
	position: relative;
	height: 25vw;
}

.hiddenImg{
	display: none;
}

.overOnsImg img:hover{
	transform: scale(1.1);
	filter: brightness(120%);
}

/* behandelingen */

.behandelingen{
	width: 100%;
	background-color: #f5f5f5;
}

.behandelingenTable{
	width: 100%;
	display: table;
	background-size: cover;
	background-position: center center;
	padding: 7% 1%;
}

.behandelingenRow{
	display: table-row;
	width: 100%;
}

.behandelingenWrapper{
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
  	justify-content: center;
}

.behandelingenWrapper .behandelingenTd{
	/*display: table-cell;*/
	width: 50%;
	padding: 0 1%;
	text-align: center;
	align-items: center;
  	justify-content: center;
}

.behandelingenImg{
	display: none !important;
}

.behandelingenImg .iconsFlex{
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	width: 100%;
	margin: 1% 0;
}

/*.behandelingenImg .iconsFlex:last-of-type{
	width: 75%;
	margin: 0 auto;
}*/

.iconsFlex .icon{
	width: 100%;
	margin: 0.2em;
}

.icon img{
	width: 8vw;
}

.behandelingenText{
	text-align: center;
}

.behandelingenText .buttonWrapper{
	width: 100%;
	align-items: center;
  	justify-content: center;
}

.buttonWrapper a{
	padding: 3%;
	color: black;
	border: .1em solid #4a3d26;
	border-radius: 10em;
	text-decoration: none;
	font-size: 1.1vw;
	transition: .5s;
	display: inline-block;
	font-weight: bold;
	text-transform: lowercase;
	background: #edfbfc;
	outline: none;
}

@media only screen and (min-width: 900px){

	.behandelingenText a{
		background: linear-gradient(to left, #edfbfc 50%, rgb(232, 212, 179) 50%);
		background-size: 200% 100%;
    	background-position:right bottom;
	}

	.behandelingenText a:hover{
		background-position:left bottom;
	}
}

.behandelingenText .lblOf{
	font-size: 1em;
	margin: 0% 1%;
	font-weight: bold;
}

/* corona */

.corona{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	overflow: auto;
}

.coronaFlex{
	width: 30%;
	height: auto;
	background-color: #fff;
	padding: 1.5%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.coronaImg{
	width: 100%;
	height: 60%;
}

.coronaImg img{
	max-width: 100%;
	max-height: 100%;
}

.coronaText{
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
}

.coronaText h3 {
	margin-bottom: 1em;
}

.coronaText p{
	margin-bottom: 1em;
	font-size: 1em;
}

.coronaText .btnVerder{
	padding: 3%;
	color: black;
	border: .1em solid #4a3d26;
	border-radius: 10em;
	text-decoration: none;
	font-size: 1.1vw;
	transition: .5s;
	font-weight: bold;
	text-transform: lowercase;
	background: #edfbfc;
	margin-top: 1em;
	outline: none;
	width: fit-content;
    display: flex;
    align-self: center;
}

.coronaText .btnVerder:hover{
	background: rgb(232, 212, 179);
}

/*@media only screen and (max-width: 768px) and (orientation:portrait), (max-width: 500px) and (orientation:landscape){*/
@media (pointer: coarse) and (orientation:portrait){
	/* welcome */

	.first{
		background: url("../img/back.png");
		filter: blur(1px);
	}

	.welcomeContent{
		background-position: unset;
		background-size: cover;
	}

	.welcomeContent div{
		display: none;
	}

	.welcome{
		height: 110vw;
	}
}

@media (pointer: coarse){
	.overOnsImg img{
		height: 70vw;
	}
}

@media (pointer: coarse){
	.lockPopup{
		height: 100%;
		overflow: auto;
	}

	/* over ons */

	.overOns, .behandelingenTable, .contactContent{
		padding: 15% 1% !important;
	}

	.overOnsWrapper{
		width: 100%;
	}

	.overOnsTd{
		width: 100%;
		display: block;
	}

	.overOnsText h1{
		font-size: 10vw;
	}

	.overOnsText p{
		font-size: 3vw;
	}

	/* behandelingen */

	.behandelingenWrapper{
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.behandelingenWrapper .behandelingenTd{
		width: 100%;
		padding: 5% 1%;
	}

	.behandelingenText a{
		padding: 3%;
		font-size: 3vw;
		display: block;
	}

	.behandelingenImg{
		padding: 0;
		padding-top: 5%;
	}

	.behandelingenImg .iconsFlex{
		display: flex;
		flex-direction: column;
		text-align: left;
		padding-left: 5%;
	}

	.behandelingenImg .iconsFlex:last-of-type{
		width: 100%;
	}

	.icon img{
		width: 15vw;
	}

	.behandelingenText a:hover{
		background: rgb(232, 212, 179);
	}

	.coronaFlex{
		width: 95%;
		padding: 3%;
	}

	.coronaText .btnVerder{
		font-size: 3vw;
	}
}

@media (pointer: coarse) and (orientation:landscape){
	.coronaFlex{
		width: 30%;
		padding: 1.5%;
	}

	.coronaText .btnVerder{
		font-size: 1vw;
	}

	.coronaText p{
		font-size: .5em;
	}
}