/* box hotels en vakantiehuizen */




/* overlay */

.cont {
    position: relative;
    width: 50%;
    margin-bottom:30px
}

.image {
  opacity: 1;
  display: block;
  height: auto;
  transition: .5s ease;
  backface-visibility:hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  
}

.cont:hover .image {
  opacity: 0.3;
}

.cont:hover .middle {
  opacity: 1;
}





.hoteldiv {
    width:450px;
    border:3px #5092CF solid;
    background-color:#FFFFFF;
    padding: 0 10px 10px;
    margin-right:50px; 
    float:left 	
}

.hotelimage {
	border:0px;
	padding-left:0px;
	padding-right:0px;
	margin-left:-10px;
}



.hoteldiv2 {
    width:450px;
    border:3px #5092CF solid;
    background-color:#FFFFFF;
    padding: 0 10px 10px; 
    margin-left:520px;    	
}






/* boekbutton groot */


.bookhotelgroot {
	background-image:url('../button-groot-hotel.jpg');
	background-repeat:no-repeat;		
	width:400px;
	height:250px;
    float:left;
	margin-left:10px;
	margin-top:10px;
	
}







.bookhuisjegroot {
	background-image:url('../button-groot-huis.jpg');
	background-repeat:no-repeat;		
	width:400px;
	float:left;
	height:250px;
    margin-top:10px;	
    
}

/*

a:hover .bookhuisjegroot {
	background-image:url('../button-groot-huis-hover.jpg');
	background-repeat:no-repeat;		
	width:400px;
	float:left;
	height:250px;
    margin-top:10px;	
    
}

*/


.bookappgroot {
	background-image:url('../button-groot-app.jpg');
	background-repeat:no-repeat;		
	width:400px;
	float:left;
	height:250px;
    margin-top:10px;	
    
}


/*

a:hover .bookappgroot {
	background-image:url('../button-groot-app-hover.jpg');
	background-repeat:no-repeat;		
	width:400px;
	float:left;
	height:250px;
    margin-top:10px;	
    
}

*/








/* hotel en vakhuis button op bestemmingspagina*/


.bestboek {
	background-image:url('../button-bestemming-hotels.jpg');
	background-repeat:no-repeat;		
	width:480px;
	height:220px;
    float:left;
    margin-bottom:20px
	
}



a:hover .bestboek {
	background-image:url('../button-bestemming-hotels-hover.jpg');
	background-repeat:no-repeat;		
	width:480px;
	height:220px;
    float:left;
    margin-bottom:20px
	
}





/* boeking info op hotel pagina*/








@media screen and (-webkit-min-device-pixel-ratio:0) { 
    

    /* Safari 5+ ONLY */
    ::i-block-chrome, .overlay3 {
    margin-left:-200px;
    margin-bottom:100px
    }
}








/* hotels en vakantiehuizen per plaats */

.plaatshotel {
	float:left;
	margin-right:10px;
	margin-top:19px;
	width:200px;
	height:260px
	
	}

A:hover .plaatshotel {
	float:left;
	margin-right:10px;
	margin-top:19px;
	 -webkit-transform: scale(0.99);
	transform: scale(0.99);

   
}



.plaatshuisje {
	margin-top:19px;
	
}

a:hover .plaatshuisje {
	margin-top:19px;
    -webkit-transform: scale(0.99);
	transform: scale(0.99);

  

}



 /* Style the button that is used to open and close the collapsible content */

#container .column .collapsible {
  /*background-color: #FFFFFF;
  color: #285899;
  */
  background-color: #3D6A0F;
  color: #FFFFFF;  
  border-radius: 10px;
  cursor: pointer;
  padding: 15px;
  margin-top:10px;
  width: 100%;
  border: none;
  text-align:center;
  outline: none;
  font-size: 20px;
  font-weight:bold;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

#container .column .active, .collapsible:hover {
  background-color: #28589A;
  color:#FFFFFF;
  border-radius: 10px;
}

#container .column .collapsible2 {
  background-color: #28589A;
  border-radius: 10px;
  color:#FFFFFF;
  cursor: pointer;
  padding: 15px;
  margin-top:10px;
  width: 100%;
  border: none;
  text-align:center;
  outline: none;
  font-size: 22px;
  font-weight:bold;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

#container .column .active, .collapsible2: hover {
 background-color: #FFFFFF;
  color: #285899;
  
}


@media all and (max-width:600px) {

#container .column .collapsible {
	font-size: 12px;
}

#container .column .collapsible2{
	font-size: 12px;


}

}



/* Style the collapsible content. Note: hidden by default */

.content {
  padding: 0 0px;
  display: none;
  overflow: hidden;
  background-color: #FFFFFF;
   
} 

/* Ruimte weghalen onder de nivoslider */

.slider-wrapper {
	margin-bottom:-20px;max-width:995px
}



/* tabs */


#tabs {
	margin-bottom:30px;
}

#tabs a {
color:#2655C1;
font-weight:bold;
text-decoration:none	;
font-size:16px
}


#tabs li a {
color:#FFFFFF;
background-color:#356500;
	
}



/* resizen tab-breedte voor kleinere schermen*/

@media only screen and (max-width: 500px) and (min-width:490px) {

#tabs li a {

width:427px;

}
}


@media only screen and (max-width: 491px) and (min-width:480px) {

#tabs li a {

width:417px;

}
}


@media only screen and (max-width: 481px) and (min-width:470px) {

#tabs li a {

width:407px;

}
}


@media only screen and (max-width: 471px) and (min-width:460px) {

#tabs li a {

width:397px;

}
}


@media only screen and (max-width: 461px) and (min-width:450px) {

#tabs li a {

width:387px;

}
}


@media only screen and (max-width: 451px) and (min-width:440px) {

#tabs li a {

width:377px;

}
}


@media only screen and (max-width: 441px) and (min-width:430px) {

#tabs li a {

width:367px;

}
}



@media only screen and (max-width: 431px) and (min-width:420px) {

#tabs li a {

width:357px;

}
}


@media only screen and (max-width: 421px) and (min-width:410px) {

#tabs li a {

width:347px;

}
}


@media only screen and (max-width: 411px) and (min-width:400px) {

#tabs li a {

width:337px;

}
}


@media only screen and (max-width: 401px) and (min-width:390px) {

#tabs li a {

width:327px;
font-size:10px;
}
}


@media only screen and (max-width: 391px) and (min-width:380px) {

#tabs li a {

width:317px;
font-size:10px;
}
}


@media only screen and (max-width: 381px) and (min-width:370px) {

#tabs li a {

width:307px;
font-size:10px;
}
}


@media only screen and (max-width: 371px) and (min-width:360px) {

#tabs li a {

width:297px;
font-size:10px;
}
}


@media only screen and (max-width: 361px) and (min-width:350px) {

#tabs li a {

width:287px;
font-size:10px;

}
}

@media only screen and (max-width: 361px) and (min-width:350px) {

#tabs li a {

width:287px;
font-size:10px;
}
}

@media only screen and (max-width: 351px) and (min-width:340px) {

#tabs li a {

width:277px;
font-size:10px;
}
}


@media only screen and (max-width: 341px) and (min-width:330px) {

#tabs li a {

width:267px;
font-size:10px;
}
}



@media only screen and (max-width: 331px) and (min-width:320px) {

#tabs li a {

width:257px;
font-size:10px;
}
}


@media only screen and (max-width: 321px) and (min-width:310px) {

#tabs li a {

width:247px;
font-size:10px;
}
}


@media only screen and (max-width: 311px) and (min-width:300px) {

#tabs li a {

width:237px;
font-size:10px;
}
}



@media only screen and (max-width: 301px) and (min-width:290px) {

#tabs li a {

width:227px;
font-size:10px;
}
}




#tabs li a:focus {
color:#FFFFFF;
background-color:#5092CF;
	
}


#tabs li a:hover {
color:#FFFFFF;
background-color:#D1372B;
	
}

#tabs li a:active {
color:#FFFFFF;
background-color:#5092CF;
	
}


#tabs a:hover {
	color:#F7A539;
}


#tabs .tabex {
color:#FFFFFF;
background-color:#285899;

}