/* 
DEVICES/MOBILE VERSION CSS

Include all media queries here.

*/

/* MOBILE MENU START */
@media all and (max-width: 750px) {

	/* MOBILE MENU */
	header#header{
		padding: 0;
	}	

	nav.navMenu .menu-mainmenu-container{
		width:100%;
		margin-top:50px;
		z-index: 9999;
	}

	nav.navMenu ul{
		display: none;
		padding:0;
		position: absolute !important;
		width: 100%;
		margin: 0px;
		background-color: #000; 
	}
	nav.navMenu li{
		width:100% !important;
		float: none;
		display: block;
		border-bottom: 1px solid #222;
		-webkit-transition: background-color 0.3s ease-in;  
	    -moz-transition: background-color 0.3s ease-in;
	    -ms-transition: background-color 0.3s ease-in; 
	    -o-transition: background-color 0.3s ease-in;
	    transition: background-color 0.3s ease-in;
	}
	/*
	nav.navMenu li:hover{
		background-color:#444;
	}
	nav.navMenu li:first-of-type{
		border-top: 1px solid #DDD;	
	}
	*/
	nav.navMenu li:last-of-type{
		border-bottom: none;
	}
	nav.navMenu li a{
		padding: 0;
	}
	nav.navMenu li.mobileOnly{
		display: block;
	}
	nav.navMenu .mobile-menu-reveal{
		display: block;
		position: absolute;
		bottom: 15px;
		right: 10px;
	}

	nav.navMenu li.menu-item-last{
		padding-right:auto;
	}

	.current-menu-item a:link, .current-menu-item a:visited{
		
	}

	a.close-button{
		display: block;
		width: 68px;
		height: 19px;
		background: url('../images/mobile-menu-btn.png');
		background-size: 100% 100%;	
	}

	a.open-button{
		display: block;
		width: 68px;
		height: 19px;
		background: url('../images/mobile-menu-btn.png');
		background-size: 100% 100%;	
	}
}

@media all and (min-width: 751px) {
	/* mobile menu */
	nav.navMenu .mobile-menu-reveal{
		display: none;
	}

	#menu-mainmenu{
		display: block !important; /* force show menu on full size */
	}
}

/* MOBILE MENU END */

/* 2:1 Layout BREAKPOINT */
@media all and (max-width: 750px) {
	.pageBlock21imagetext .text1col, .pageBlock21imagetext .image2col{
		width:100%;
		float:none;
	}

	.pageBlock21imagetext .text1col{
		padding: 0px;
	}

	.pageBlock21imagetext .text1col h1, .pageBlock21imagetext .text1col h2{
		padding:20px 0;
	}
}

/* 2:1 Layout BREAKPOINT END */


/* LOGIN BREAKPOINT */
@media all and (max-height: 750px) { /* MAX HEIGHT */
	.loginLogo{
		margin-top:60px;
	}
}

/* PANORAMA BREAK POINTS */
@media all and (max-width: 450px) {
	.pageBlockPanorama{
		height:300px;
		width:90%;
	}
}

@media all and (max-device-width: 1200px) { /* -- DEVICES ONLY */
	.panorama .controls{
		display:none;
	}
	.devicePanoramaOverlay{
		display:block;
	}
}

/* LOCATIONS MAP BREAK POINTS */
@media all and (max-width: 540px) {
	.markerInfoBox{
		width:200px;
	}

	.infoBoxImg{
		float:none;
		width:100px;
		margin:0 auto 10px;
	}

	.infoBoxTxt{
		float:none;
		width:100%;
		text-align: center;
		padding:0 5px;
	}
}

@media all and (max-device-width: 1200px) {
	/* FILTER BUTTONS -- DEVICES ONLY*/
	.filterButton{
		margin: 0 auto 10px;
		float: none;
		width: 100%;
	}
	.filterButton p{
		padding: 18px 40px 15px 10px;		
	}
	
	.filterButton .mapFilterIcon{
		right: 10px;
		left: initial;
	}
	.centreMapButton{
		padding: 18px 0 15px;
	}
}

@media all and (max-height: 750px) {
	#mapCanvas, .pageBlockPanorama{
		height: 300px;
	}
	
	
}

@media all and (max-height: 450px) {
	#mapCanvas, .pageBlockPanorama{
		height: 200px;
	}
}

/* CAROUSEL CAPTION BREAK POINT */
@media all and (max-width: 650px) {
	.slideCaption p.slideDesc{
		display: none;
	}

	.slideCaption p.slideTitle{
		font-size: 14px;
		padding: 0;
	}
}