/* Universeel */
@media (min-width: 2400px){

}

@media (max-width: 1560px) {

	.container{
		width: 96%;	
	}	
	.header.container, .header .container{
		width: 100%;	
	}
	
	.planningoverviewloader form .column:first-child{
		width: 20%;
	}	
}

/* iPad verticaal */
@media (min-width: 600px) and (max-width: 780px) {

	.container{
		width: 90%;	
	}
	
	.populairearragementen{
		width: 100%;
	}
	
	.werktsamen{
		width: 95%;	
	}
	
	.arrangementen.overview li{
		width: 29.9%;
	}
	.arrangementen.overview h2{
		font-size: 11px !important;			
	}
	
	.meerinformatie{
		width: 45%;	
	}

	.cycle-slideshow{
		min-height: 0px;	
	}
	
}

/* iPhone horizontaal */
@media (min-width: 451px) and (max-width: 600px){

}

/* iPhone verticaal */
@media (max-width: 450px) {
		

	
	.twocolumn, .twocolumn ol, .hometable ol, .fourcolumn, .fourcolumn ol, .footer table, .footer tbody, .footer tr, .footer td, .arrangementen.overview li{
		display: block !important;
		width: 100% !important;
		padding: 0px !important;
		height: auto !important;
		margin-bottom: 30px !important;
	}	
	
	.tableview{
		width: 100%;
		overflow-x: scroll;	
	}
	
	.planningfilter li{
		margin-bottom: 10px;	
	}
	
	.formitem{
		display: block;	
	}
	.formitem li{
		display: block;	
	}
	.form .column{
		display: block !important;
		width: 100% !important;
		padding-left: 0px !important;
		padding-right: 0px !important;	
	}
	
	.multicolumncontainer{
		margin-left: 0px !important;
		width: 100% !important;	
	}
	.multicolumncontainer .row{
		display: block;	
	}
	.multicolumncontainer .multicolumn{
		display: block !important;
		padding-left: 0px !important;
		padding-right: 0px !important;	
	}
	
	.multicolumn.lineleft{
		border-left: none;
		border-top: solid 2px #045891;	
	}
	
	.websiteuserloginmydata .row .column{
		display: block !important;
		width: 100% !important;
		padding-left: 0px !important;
		padding-right: 0px !important;			
	}
	
	.planninginstellingen, .planninginstellingen > .column{
		display: block !important;
		width: 100% !important;
		padding-left: 0px !important;
		padding-right: 0px !important;	
		border-right: none !important;				
	}
	.planninginstellingen .instellingenmenu{
		margin-bottom: 30px;	
	}
	
	.container{
		box-sizing: border-box;
	}	
	
	.websiteoverlaykader .lightboxcontent{
		width: 90%;
		left: 5%;
		margin-left: 0px;
		box-sizing: border-box;	
		max-height: 500px;	
	}
	.websitechoisecontainer{
		width: 100%;
		left: 0px;
		margin-left: 0px;
		box-sizing: border-box;	
		min-width: auto;		
	}
	
	.loginForm{
		width: 90%;
		margin-left: 5%;
		box-sizing: border-box;	
	}
	.forgotpasswordbtn{
		margin-top: 40px;
		float: right;	
		margin-right: -5%;
	}
	.forgotpasswordbtn a{
		color: #FFF;	
	}
	
	
	.activiteitentabscontent .formitem{
		padding-left: 0px !important;
		padding-right: 0px !important;
		float: none !important;
		width: 100% !important;	
		border-left: none !important;
		border-right: none !important;
	}
	
	.subfields input.websitechoisebtn{
		max-width: 100%;	
	}
	.websitechoisecontainer{
		width: 280px !important;				
	}
	.websitechoisecontainer .choiselist{
		width: 100%;
		box-sizing: border-box;	
	}
	
	
}

@media (max-width: 320px) {

	#rc-imageselect, .g-recaptcha {transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;}	

}



@media (max-width: 780px) {

	.main{
		overflow: inherit;
	}

	.logo.image{
		margin-left: 0px;	
	}


	.footer .menucontainer{
		display: none !important;	
	}


	.showresponsivemenu {
	  width: 32px;
	  height: 32px;
	  margin-top: 20px;
	  position: absolute;
	  right: 5%;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .3s ease-in-out;
	  -moz-transition: .3s ease-in-out;
	  -o-transition: .3s ease-in-out;
	  transition: .3s ease-in-out;
	  cursor: pointer;
	  z-index: 99999;
	}
	.floating.showresponsivemenu{
		margin-top: 0px;	
	}
	
	.showresponsivemenu span{
	  display: block;
	  position: absolute;
	  height: 3px;
	  width: 100%;
	  background: #FFF;
	  border-radius: 9px;
	  opacity: 1;
	  left: 0;
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  -o-transform: rotate(0deg);
	  transform: rotate(0deg);
	  -webkit-transition: .25s ease-in-out;
	  -moz-transition: .25s ease-in-out;
	  -o-transition: .25s ease-in-out;
	  transition: .25s ease-in-out;
	}
	
	.showresponsivemenu span:nth-child(1) {
	  top: 0px;
	}
	
	.showresponsivemenu span:nth-child(2) {
	  top: 10px;
	}
	
	.showresponsivemenu span:nth-child(3) {
	  top: 20px;
	}
	
	.showresponsivemenu.open span:nth-child(1) {
	  top: 18px;
	  -webkit-transform: rotate(135deg);
	  -moz-transform: rotate(135deg);
	  -o-transform: rotate(135deg);
	  transform: rotate(135deg);
	}
	
	.showresponsivemenu.open span:nth-child(2) {
	  opacity: 0;
	  left: -32px;
	}
	
	.showresponsivemenu.open span:nth-child(3) {
	  top: 18px;
	  -webkit-transform: rotate(-135deg);
	  -moz-transform: rotate(-135deg);
	  -o-transform: rotate(-135deg);
	  transform: rotate(-135deg);
	}

	
	
	.showresponsivemenu{
		      
	}	
	.floating .showresponsivemenu{
		margin-top: 10px;	
	}
	.menucontainer{
		margin-top: 60px;
		padding-top: 0px;
		padding-bottom: 20px;
		min-height: auto;
		right: -280px;
		width: 230px;
		z-index: 9999;
		position: absolute;
		-moz-transition: all 0.3s ease-out;  /* FF4+ */
	    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
	    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
	    -ms-transition: all 0.3s ease-out;  /* IE10 */
	    transition: all 0.3s ease-out; 
	    display: none;
	}
	.showmainmenu .menucontainer{
		display: block;	
	}
	.maincontainer{
		-moz-transition: all 0.3s ease-out;  /* FF4+ */
	    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
	    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
	    -ms-transition: all 0.3s ease-out;  /* IE10 */
	    transition: all 0.3s ease-out; 
	}
	.showmainmenu .maincontainer{
		margin-left: -280px;	
		margin-right: 280px;
	}
	
	.showmainmenu .main{
		-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
		filter: grayscale(100%);		
	}
	
	.header.floating .container .menucontainer{
		margin-top: 60px;	
	}
	.menucontainer .menu{
		padding-top: 2px;
		margin-right: 0px;
	}
	.menucontainer .menu li{
		float: none;
		margin-left: 0px;
		margin-top: 0px;
		text-align: left;
		display: block;
		text-align: right;
		height: auto;
	}
	.menucontainer .menu li a{
		background-color: none;
		margin-left: 0px;
		margin-right: 0px;
		font-size: 18px;
		line-height: 30px;
		height: auto !important;
		padding: 0px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		padding-right: 5% !important;
		color: #FFF;
	}
	.menucontainer .menu li:first-child a{
	}
	.menucontainer .menu a:hover{
		color: #FFF;
	}
	.menucontainer .menu .selected a{
		color: #FFF;
	}
	.menucontainer .menu ul li:first-child{
		margin: 0px;	
	}
	.menucontainer .menu ul{
		position: relative;
		margin: 0px;
		display: block;	
		margin-left: 30px;
		display: none !important;
	}
	.menucontainer .menu ul li{
		padding-top: 0px;	
	}
	.menucontainer .menu ul li a{
		background: none;
	}
	.menucontainer .menu ul li a:hover{
		background: none;
		color: #E4287B;
	}
	.menucontainer .menu ul li:first-child{
		padding-top: 0px;
		padding-left: 10px;	
	}
	.menu li{
		margin-left: 0px;
	}	

	.cycle-slideshow li .title{
		margin-left: 30px;	
	}
	
	.showmainmenu .showresponsivemenu span, .floating.showresponsivemenu span{
		display: inherit;	
	}

	.customerlogin{
		margin-top: 20px;		
	}
	.customerlogin a{
		padding: 10px;	
		font-size: 23px;
		line-height: 18px;
		background-color: #FFF;
		color: #000;
	}

	.header .menucontainer li{
		border: none !important;	
	}
	.header .menucontainer li{
		float: none !important;	
	}



}


@media (max-height: 500px){
	.header{
		position: absolute;	
	}
}