.waldfest{
	position:absolute;
	top:-20px;
	left: 20px;
	width: 170px;
	height: 170px;
	background: url(/images/waldfest.png) no-repeat center center;
	background-size: contain;
	z-index: 100;
	transition: all 0.15s ease-in;
}
.waldfest:hover{
	width: 180px;
	height: 180px;
  transform: rotate(10deg); /* Adds rotation */
	transition: all 0.15s ease-in;
}

.bovenvouw{
	min-height: calc(100vh - 88px); 
	position:relative;
}   

.scrolldown{
	position:absolute;
	width: 60px;
	height: 60px;
	bottom: -30px;
	left: calc(50vw - 50px);
	background: white;
	border-radius: 999px;
	display: flex;
	align-items: start;
	justify-content: center;	
	transition: 0.2s;
}
.scrolldown:hover{
	text-decoration:none;
	background: #F7F2ED;
	transition: 0.2s;
}
.scrolldown span{
	margin-top: 10px;
  transform: rotate(90deg);
  font-size: 18px;
  color: #6D7F49;
}
 
	
.swiper-background,
.carousel{
	width: 100%;
	height: calc(100vh - 101px) !important;
  margin-left: auto;
  margin-right: auto;

	position:absolute !important;
	top:0;
	left:0;
	z-index: -1 !important
}
@media(min-width: 768px){
		
	.swiper-background,
	.carousel{
		width: 100%;
		min-height: calc(100vh - 88px);
		height: 100%;
		position:absolute !important;
		top:0;
		left:0;
		z-index: -1 !important
	}
}
 
.swiper-background .swiper-wrapper,
.swiper-background .swiper-slide{ 
	min-height: calc(100vh - 101px);
}

/*
.swiper-background .swiper-button{
	border: 0 !important;
	background: none !important;
	width: 67px !important;
	height: 67px !important;
	border-radius: 9999px !important;
	top:  calc(50vh - 10px) !important;
	opacity: 0.7 !important;
}
.swiper-background .swiper-button:after{
	display: none !important;
}
.swiper-background .swiper-button:hover,
.swiper-background .swiper-button:focus{
	opacity: 1 !important;
	transition: 0.2s;
	outline: none;
}
.swiper-background .swiper-button-prev{
	background: url(/images/prev.svg) no-repeat center center !important;
	background-size: contain;
	left: 20px !important;
	transition: 0.2s;
}
.swiper-background .swiper-button-next{
	background: url(/images/next.svg) no-repeat center center !important;
	background-size: contain;
	right: 20px !important;
}
.background-swiper-pagination{
	text-align: right !important;
	z-index: 10;
	position:absolute;
	top: calc(50vh - 141px);
	right: 70px;
	width: calc(50% - 100px);
	width: 17px;
}  
.background-swiper-pagination .swiper-pagination-bullet{
	border-radius: 999px !important;
	width: 15px !important;
	height: 15px !important;
	border: 2px solid #F7F2EC !important;
	background-color: rgba(247,242,236,0)  !important;
	outline: none !important;
	opacity:1 !important;
	transition: .5s cubic-bezier(.215, .61, .355 ,1) ; 
	display: block;
	margin: 20px 0 0 !important;
}
.background-swiper-pagination .swiper-pagination-bullet+.swiper-pagination-bullet{
	margin-left: 20px;
}
.background-swiper-pagination .swiper-pagination-bullet-active{  
	transition: .5s cubic-bezier(.215, .61, .355 ,1) ;
	background-color: rgba(247,242,236,1)   !important;
}
*/

.hero{
	padding-bottom: 120px;
}
.hero h1{
	color: white;
	font-size: 4rem
}
.hero p{
	color: white;
	font-size: 20px;
}

span.lead {
	font-family: 'Carrara';
	font-size: 1.5rem;
	line-height:1
}
@media(min-width: 768px){ 
	span.lead { 
		font-size: 2rem
	}
}

.swiper-rooms .cardlink .card{
	background: #F7F2EC;
	color: #364F2F;
	text-align: center;
}


.swiper-rooms .cardlink .btnwrapper{
	position:absolute;
	bottom:0;
	width: 100%;
	opacity:0;	
	transition: 0.2s ease-in;
}

.swiper-rooms .cardlink:hover  .card .btnwrapper{
	opacity:1;
	bottom:30px;
	transition: 0.2s ease-in;
}

.rooms-swiper-pagination{
	text-align: center !important;
	z-index: 10;     
	width: calc(100% - 30px); 
}  
.rooms-swiper-pagination .swiper-pagination-bullet{
	border-radius: 999px !important;
	width: 12px !important;
	height: 12px !important;
	border: 1px solid #6E7F49 !important;
	background-color: rgba(247,242,236,0)  !important;
	outline: none !important;
	opacity:1 !important;
	transition: .5s cubic-bezier(.215, .61, .355 ,1) ; 
	display: inline-block;
	margin: 20px 5px 0 !important;
}
.rooms-swiper-pagination .swiper-pagination-bullet+.swiper-pagination-bullet{
	margin-left: 20px;
}
.rooms-swiper-pagination .swiper-pagination-bullet-active{  
	transition: .5s cubic-bezier(.215, .61, .355 ,1) ;
	background-color: rgba(247,242,236,1)   !important;
}


.btn-booknow ,
.btn-booknow:hover { 
	color: #6E7F49;  
  background: #F7F2EC;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
	padding:  10px 45px 10px 15px;
  transition: padding 0.3s, margin 0.3s;   
  margin-right: 15px; 
}
.btn-booknow:after {
	position:absolute;
	right: 6px;
	top: calc(50% - 8px);
	font-size: 16px;
	color: #6E7F49;
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  content: "\e903"; 
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  transition: transform 0.3s ;   
  border-radius: 9999%;
}


.activiteit{ 
	max-width: 1440px;
	margin: 0 auto;
	margin-top: 80px;  
}
@media(min-width: 768px){ 
	.activiteit{   
		background-size: 46% auto !important;
	}
}
@media(min-width: 1200px){ 
	.activiteit{
		min-height: 718px ;
	}
}
@media(max-width: 767px){
	.activiteit{ 
		background: none !important;
	}
}


.activiteit2{ 
	max-width: 1440px;
	margin: 0 auto;
	margin-top: 80px;  
}
@media(min-width: 768px){ 
	.activiteit2{   
		background-size: calc(50% - 100px) auto !important;
	}
}
@media(min-width: 1200px){ 
	.activiteit2{
		min-height: 465px ;
	}
}
@media(max-width: 767px){
	.activiteit2{ 
		background: none !important;
	}
}
 

@media(min-width:1200px){
	.uitstekend1440{
		background-size: 800px auto; 
	}  
}


.slidercaption{  
	background: #F7F2EC; 
	padding: 15px;
	z-index: 10;
	width: 100%;
	display: block;
	position:relative;
}

.slidercaption h2{
	font-family: 'Carrara';
	font-size: 35px;
	color: #23381E; 
}

@media(min-width: 768px){
	
.slidercaption .showonhover{
	max-height: 0; 
	overflow: hidden;
  transition: max-height 0.15s ease-out;
}
.slidercaption:hover .showonhover{
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}
}

@media(min-width: 992px){
		
	.slidercaption{  
		position: absolute;
		right: 35px;
		bottom: 20px;
		max-width: 40%;  
		z-index: 10;
		width: auto;
	}
}



.portrait {
  position: relative;
  width: 100%;
	transition: background 0.2s ease-in; 
}

	.portrait:after {
	  content: "";
	  display: block;
	  padding-bottom: 160%;
	}
	a.portraitlink {
		display: flex;
		flex-direction: column
	} 
	a.portraitlink .titlewrap{
		transition: 0.4s;
	}
	a.portraitlink .titlewrap h5{
		position:relative;
		padding-bottom: 70px;
		color: #344B4A;
    font-family: 'Helvetica Neue LT Pro';
    font-size: 15px;
	}
	a.portraitlink .titlewrap h5:after{
		content:'';
		height: 50px;
		width: 1px;
		position:absolute;
		bottom:10px;
		left: 50%;
		background:#344B4A
	} 
		 
a.portraitlink:hover {
	text-decoration:none;
}
a.portraitlink:hover .portrait {
	background-size: auto 110% !important;
	transition: background 0.2s ease-in; 
}
@media(min-width: 768px){
		 
		a.portraitlink:hover .titlewrap {
			transform:translateY(120%);
			opacity:0;
			transition: 0.4s;	
		}
}	


@media(min-width: 768px){
		
	a.portraitlink.upsidedown{
		flex-direction: column-reverse;	
	}
		a.portraitlink.upsidedown .titlewrap h5{ 
			padding-bottom: 0; 
			padding-top: 70px;
		}
		a.portraitlink.upsidedown .titlewrap h5:after{ 
			top:10px; 
			bottom:auto; 
		}
		a.portraitlink.upsidedown:hover .titlewrap {
			transform:translateY(-120%); 
		}
		 
}


@media(max-width: 767px){
	
	.portrait  { 
	  margin-bottom: 60%;
	}
	 
	a.portraitlink .titlewrap h5{ 
		padding-bottom: 50px; 
	}
	a.portraitlink .titlewrap h5:after{
		content:'';
		height: 20px; 
	}


}
@media(min-width: 768px){  
	.overons{
		margin-top: 130px;
	}
}
.overlap{
	display: flex;
	flex-direction: column;
	height: 80vw;
  justify-content: space-between;
  align-items: left;
}
@media(min-width: 576px){ 
	.overlap{ 
		height: 450px; 
	}
} 
@media(min-width: 992px){ 
	.overlap{ 
		height: 650px; 
	}
}

@media(min-width: 768px){  
	.overlap .overlap1{
		width: 50%;;
	  flex-shrink: 0; 
	  align-self: flex-end;
	}
	.overlap .overlap2{
		width: 62%;;
	  flex-shrink: 0; 
	  margin-top: -70%;
	}
	.overlap .overlap3{
		width: 37%;
	  flex-shrink: 0;
	  margin-top: -40%;
	  align-self: flex-end;
	  margin-right: 12%;
	}
}



.alertbar{
	z-index: 20;
	position:absolute;
	display: block;
	padding: 6px 10px;
	top:0;
	left:0;
	width: 100%;
	height: auto;
	background: rgba(36,56,30,1);
	transition: background 0.2s ease-in;
	color: white;
	text-align: center;
}
a.alertbar:hover{ 
	background: rgba(56,76,50,1);
	transition: background 0.2s ease-in;
	color: white;
	text-decoration: none;
}