/* MEDIA QUERIES ----------------------------------------------------------------------------------- */

/* -------------- */
/* MASTHEAD */
/* -------------- */
img#mastheadImage {
	display:none;
}
@media (max-width: 640px) {
#MastheadImageDiv img{
	padding-left:0!important;	/* Cancels left padding on logo */
}
img#mastheadImage{
	display:block!important;
	text-align:center;
}
img.FullSizeMastheadImage{
	width:85%;
}
.masterstyles #masthead-div {

background-image:none!important;
}
}

@media (max-width: 640px) {
	div #mastheadlegend{
	display:none;
	}
	div #mastheadlegendmobile{
	display:block;
	max-width:225px;
	position:relative;
	margin-top:20px;
	margin:auto;

}	
	div #mastheadlegendmobile p{
	margin-left:5px;
	text-align:center;	
}
}
@media (min-width: 641px) {
	div #mastheadlegendmobile{
	display:none;
}	
}

/* ------------------ */
/* Social media panel */
@media (max-width: 720px) {
div#SocialMedia{
	position:absolute;
	top:118px;
	right:190px;
	z-index:2
}
}
/* ------------ */
/* Search panel */

@media (max-width: 900px) {
div#SearchBox{
	position:absolute;
	top:110px;
	right:55px;
}
}

@media (max-width: 875px) {
div#SearchBox{
	position:absolute;
	top:110px!important;
	right:15px!important;
}
}
/* ------- */
/* GENERAL */
/* ------- */

@media (min-width: 1140px) {
	.masterstyles #container { 
	width:1140px!important; 
	margin:0 auto!important;	/* Necessary to re-centre entire container after shrinking*/	
	}
}

/*@media (max-width: 980px) {*/
@media (max-width: 1140px) {
	.masterstyles #container { 
	width:100%!important; 
	}
	div #CentralPanel{
	/* to allow for double-decked absolutely positioned menu. Not needed unless long menu strip*/
	/*margin-top:24px;	*/
	/*2018 Caoncelled following entry:	*/
	/* margin-top:-20px!important;*/
	}		
}
@media (min-width: 670px) and (max-width: 1900px){ 
	.appendedMenu{
	display:none!important;
	}
	#mobileMenuDivider{
	display:none!important;
	}
}

/* NewsYearList (more below) */
/* ------------------------- */

@media (min-width: 870px) and (max-width: 1900px){ 	
	.visibleOnMobile{
	visibility:hidden;
	}	
	.visibleOnDesktop{
	visibility:visible;
	}
	#rightHandMenuItem{
	display:none;
	}
}

/* end of preliminary NewsYearList */


/* --------- */
/* Various */
/* --------- */
@media (min-width: 871px){

}


@media (max-width: 870px){
	#FullTopPanel{
	height:auto!important;
}

/* Images in a container div (i.e. with a caption): div constrained, pic 100% */
	.MainPanel .divWithImage img{
	width:100%!important;
	height:auto!important;
	}
	.divWithImage{
	width:30%!important;
	}
}	
/* Lower heading image to allow room for burger symbol above it */
@media (max-width: 720px){
	div#FullTopPanel{
	margin-top:35px!important;
	}
}
@media (max-width: 640px) {
img.blog-on-home-page{
	/*margin-left:221px!important; overriddebn 20 Jun 2018*/
}
}
@media (max-width: 640px) {
	.masterstyles #container { 
	width:100%!important; 
	}
	.MainPanel img:not(.gallery-img-div img){
	/* Fills out blog pics to fill width on home page */
	/* The NOT qualification prevents image gallery thumbnails being stretched and squashed to fit */
	max-width:96%!important;
	width:96%!important;	
	height:auto!important;
	
	/**/
	}
	.divWithImage{
	width:40%!important;
	}
	#FullTopPanel img{
	width:100%!important;
	}
	.cycle-slideshow img{
	width:100%!important;		
	/*height:22%!important;	*/
	}

	#MastheadImageDiv div{
	width:100%;
	}
	#MastheadImageDiv img{
     display:block; margin: 0 auto;
	 }
	 .masterstyles #sidebar1{
	/* Already set with !important keyword in phpstyles.css:	 */
	 margin-left:10px!important;
	 }
	#CentralPanel div{
	/* Active until break removed above panel to allow background colour to fill */
	/*margin-top:-10px!important;	/* No longer needed when top menu not absolutely positioned menu (see above)*/
	}	 
	 
.masterstyles #masthead-div {
	 height:7em;
	 border-style:!important; 
	 border-width: 0; 
	 border-color:white;
	 border-bottom-color:white!important; 	 	 
	 margin-bottom:0!important;
	}	 
#MastheadImageDiv{
     height:auto;
}	
}

@media (max-width: 870px) {
div.BreadcrumbText{
	display:none;
	}
}

/* NewsYearList (and see above)*/
/* --------------------------- */

@media (max-width: 870px) {
.visibleOnMobile{
	visibility:visible;
	}	
.visibleOnDesktop{
	display:none;
	}

.NewsYearList a:active,
.NewsYearList a:visited,
.NewsYearList a:link {
color: white; text-decoration: none
}
.NewsYearList a:hover{
	color:#a6ba5c;
}
p.NewsYearList {
margin-bottom:11px!important;
}
}
@media (min-width: 670px) and (max-width: 870px){
div #rightHandMenuItem{		/* NewsYearList mobile drop-down */
	/*margin-top:80px!important;*/	/* Can't have this because adds margin over heading pic on all pages */
}

}
@media (max-width: 670px) {
#pressMenu{
	margin-top:0;
}

/* end of NewsYearList */

.masterstyles#mainContent { 
display: block; width:95%!important;
}
.appendedMenu{
	display:block!important;
	}
	
#pressMenu{
/*
	position:absolute;
	left:400px;
	top:130px;
	z-index:300;
	*/
}
#rightHandMenuItem{	/* NewsYearList mobile drop-down */
	display:block;
}
}
@media (max-width: 640px) {
.masterstyles #mainContent { 
display: block; width:90%!important;
}
}
/* Sidebar 1 + 2 + 3 were here */


/* SecondMenu display none was here */

/* BLOGS ON HOME PAGE */
/* ------------------ */

@media (min-width: 871px){
div#FirstColumn{
	display:inline-block;
	width:58%!important;
}
div#SecondColumn{
	width:34%!important;
	float:right;
}
}

@media (max-width: 870px){
div#FirstColumn, div#SecondColumn{
	display:block!important;
	width:100%!important;
}
div#SecondColumn{
	float:none;
}
}



/* ------ */
/* FOOTER */
/* ------ */
/* set in style.css */
@media (max-width: 640px) {
.footerstyle {
	width:100%;
	min-height:84px;
	background-color:#F1F2F7 /*#5b5c5e;*/
	background-image:url('layout/footer-920x64px.jpg');
	background-repeat:repeat-x;
	margin:auto;
}
}
/* Default (non-media query) style: */
.mobilefooter{
	display:none;
}
.desktopfooter{
	display:block;
}
}
@media (max-width: 670px) {
.mobilefooter{
	display:block;
}
.desktopfooter{
	display:none!important;
}

}

/* ----------------------- */
/* NAVIGATION MENU CHANGES */
/* ----------------------- */
/* Corrects offset-left mega menu position when converted to normal menu by mediaquery*/ 
@media (max-width: 1120px) { 
#nav > li:hover > div.megafarleft{
	left:0!important;	/* -115*/
}
}

/* -------------- */
/* SIDEBAR WIDTHS */
/* -------------- */
@media (max-width: 870px) { 
.masterstyles #sidebar1, #leftpagescroll {
display: block; width:90%!important; float:left;  padding-left:5px;padding-right:5px;padding-top:0px!important; vertical-align:top;
min-height:10px!important; 
margin-top:-00px;	/* Why? */
}
.masterstyles #leftpagescroll {
margin-left:-2px!important; /* Why? */
}
.masterstyles #sidebar1{
margin-left:15px!important; /* Why? */
}
.masterstyles #sidebar2, #centrepagescroll{
display: block; width:90%!important; float:left!important;padding-left:5px;padding-right:5px;padding-top:0px; vertical-align:top;
min-height:10px!important;
margin-left:12px!important;
}
#sidenav, .secondMenu{
/*Prevents all left-hand side menus working on mobiles*/
display:none!important;
}
.masterstyles #sidebar3, #rightpagescroll {
display:none!important;
}
}

/* Media query to set position for booking form (third or second column) */
/*
#EventCentrePanel{
	width:70%!important;
	margin-right:10px;	
}
.BookingFormPosition{
	position:relative;
	width:30%!important;
}
*/

/* Media query to set position for booking form (third or second column) */
@media (max-width: 800px) { 
.BookingFormPosition{
	position:relative;
	width:100%!important;
}
#EventCentrePanel{
	width:100%!important;
	margin-right:10px;	
}
}
/* Set mainContent to more or lessd full width. Was same as above 800 */
@media (max-width: 870px) { 
.masterstyles #mainContent { 
display: block; width:90%!important;
/*margin-left:0!important; /* Why? */
margin-left:15px!important; /*2016 test*/
}
#sidebar1{
	float:auto;
}
}

@media (min-width: 801px) and (max-width: 1000px){ 
.BookingFormPosition{
	position:relative;
	width:100%!important;
}

@media (max-width: 800px){ 
div.BookingFormPosition{
	margin-top:600px!important;
}
}
@media (min-width: 1001px) { 
/* Aug 2015 removed:
.BookingFormPosition{
	float:right;
	width:250px!important;
	margin-right:-30px;
	
	/*position:absolute;
	right:220px;
	top:200px;	
	*/
	
}
}
/* Set lowertextpanel (in module_crosspanel) to full width*/

@media (max-width: 800px) { 
#lowertextpanel{
	width:100%!important;
}
.OversizePanel{
	width:100%!important;
	margin-left:0!important;
}

}

/* ------------------- */
/* CONTAINER FOR BURGER */
/* ------------------- */

/* In template_main.php: This prevents height being inserted above page content at desktop sizes */
@media (min-width: 801px){ 
#burgerspan{
	/*display:none!important;*/
}
}
@media (max-width: 640px){ 
/* Ensure burge appears before content in all browsers by inserted clear both */
#clearMobileMenu{
	display:block!important;
	margin-top:8px!important;
}
}
@media (min-width: 641px){ 
/* Ensure burge appears before content in all browsers by inserted clear both */
#clearMobileMenu{
	display:none!important;	/**/
}
}
/* ------------------- */
/* CYCLE2 CAPTION TEXT */
/* ------------------- */

@media (min-width: 1140px) {
.cycleheading {
 	font-size:2.7em!important;
	line-height:normal;
}	
}
@media (min-width: 901px) and (max-width: 1140px){ 
.cycleheading {
 	font-size:1.7em!important;
	line-height:normal!important;	
}
}
@media (min-width: 751px) and (max-width: 900px){ 
.cycleheading {
 	font-size:1.3em!important;
	line-height:normal!important;	
}
}
@media only screen and (max-width: 720px){ 
.cycle-pager {
	display:none;
	/*top:230px!important;*/
}
}
@media only screen and (min-width: 641px) and (max-width: 750px){ 
.cycleheading {
 	font-size:1.2em!important;
	line-height:1.3em!important;	
}
.cycle-overlay { 
	/*height:80%!important; */
	width: 65%!important;
	bottom:10%!important;	
}
#SmallTopnavContainer{
	display:none;
}
}
@media (max-width: 640px){ 
.cycleheading {
 	font-size:1.2em!important;
	line-height:auto!important;	
}
.cycle-overlay { 
	/*height:85%!important; */
	width: 85%!important;
	bottom:10%!important;
}
#SmallTopnavContainer{
	display:none;
}
}
@media  (min-width:640px) and (max-width: 780px){ 
#cookiebar{
	height:60px!important;
}
.cookiebox.accept, .cookiebox.reject{
	display:inline!important;
	margin-top:-25px!important;
	float:right!important;
}
#cookiePara{
	width:70%!important;
}
}
@media only screen and (min-width:300px) and (max-width: 640px){ 
#cookiebar{
	height:75px!important;
}
.cookiebox.accept, .cookiebox.reject{
	display:inline!important;
	margin-top:-25px!important;
	float:right!important;
}
#cookiePara{
	width:70%!important;
}
}

/* ------------------ */
/* CONTACT FORMS */
/* ------------------ */
@media (max-width: 1000px) { 
	#contactFormDiv  {
	width:100%!important;
	}

}

/* ------------------ */
/* MINI-CONTACT FORMS */
/* ------------------ */

@media (max-width: 870px) {
div #qcont_loginbox, div #qcont_messageboxQ, div #qcont_panel_header, 
div #micro_qcont_loginbox, div #micro_qcont_messageboxQ, div #micro_qcont_panel_header {
	max-width:75%!important;
	margin:auto;
}
	#qcont_loginbox input:not([type='checkbox']),
	#micro_qcont_loginbox input:not([type='checkbox'])
	 {
	min-width:220px!important;
	width:50%!important;
	}
	#qcont_loginbox textarea, #micro_qcont_loginbox textarea{
	min-width:220px!important;
	width:60%!important;	
	}	
}
/* ------------------------ */
/* FIXED CALL TO ACTION BOX */
/* ------------------------ */
@media (max-width: 1075px) {
	#callToAction{
	width:195px!important;
	}
}
@media (max-width: 1000px) {
	#callToAction{
	width:195px!important;
	}
}
@media (max-width: 1000px) {
	#callToAction{
	width:175px!important;
	}
}

@media (max-width: 870px) {
	#callToAction{
	width:75%!important;
	margin-left:5%;
	
	}
}

/* ------------------------ */
/* PRODUCT OFFSET IMAGES    */
/* ------------------------ */
@media (max-width: 1075px) {
div.Offset-right, p.Offset-right{
	margin-right:-200px!important;
/*
	width:80%;
	height:80%;	
		*/
}
}
@media (max-width: 1025px) {
div.Offset-right, p.Offset-right{
	margin-right:-175px!important;
/*
	width:80%;
	height:80%;	
		*/
}
}
@media (max-width: 975px) {
div.Offset-right, p.Offset-right{
	margin-right:-150px!important;
/*
	width:80%;
	height:80%;	
		*/
}
}
@media (max-width: 800px) {
div.Offset-right, p.Offset-right{
	margin-right:0!important;
/*
	width:80%;
	height:80%;	
		*/
}

}


@media (max-width: 800px) {
div.Offset-right{

	/* Overridden Feb 2025
	max-width:40%!important;
	max-height:40%!important;
	*/
}
}
@media (max-width:640px) {
div.PicCaption{
	max-width:80%!important;
	font-size:10pt!important;
	float:left;
	padding-top:5px;
	padding-left:2px!important;	
}
.divWithImage.Offset-right .PicCaption{
	/* Correct mislalignment at small sizes, where div is extended left */
	/* Why is div extended left? See line 121, where temp correction to width inserted */
	float:right!important;
}
}

/*
div.PicCaption{

	width:auto!important;
	height:50%!important;
	
/*
width:100%!important;
	width:80%;
	height:80%;	
		*/

/* ------------------------ */
/* VIEW DESKTOP VERSION     */
/* ------------------------ */

@media (max-width: 870px) {
	#desktopbox{
	display:block;
	}
}
/* ------------------ */
/* BROCHURE PANEL ETC */
/* ------------------ */
@media (max-width: 1000px) {
#heading-panel-div .MediumText{
	font-size:.85em!important;
}	
}
@media (max-width: 900px) {
#heading-panel-div .MediumText{
	font-size:.75em!important;
}	
}
@media (max-width: 820px) {
#heading-panel-text-div {
	display:none!important;
}
#heading-panel-picture-div{
	width:100%!important;
}
}

/* -------------- */
/* BASKETLIST BOX */
/* -------------- */

@media (max-width: 1000px) {
#BasketListDiv p{
	font-size:.75em!important;
}
#BasketListDiv{
	margin-top:20px!important;
}
#BasketPanelWithBorder img{
	display:none;
}
}
@media (max-width: 900px) {
#BasketListDiv{
	margin-top:5px!important;
}	
#BasketPanelWithBorder .linkitems{
	bottom:5px!important; 
	left:20px!important;
}

#BasketPanelWithBorder .linkitems a{
	font-size:.85em!important;
	line-height:1.1em!important;
	margin-bottom:1px;
}
}
@media (max-width: 820px) {
#BasketPanelWithBorderMobile{
	margin-left: 10%!important;
	width: 90%!important;
}
#BasketPanelWithBorder .linkitems{
	position:relative;
	bottom:auto!important; 
	left:auto!important;	
}
}

/* Hide basket box when screen size small */
@media (max-width: 820px) {
.panelWithBorderMobile{
	display:block;
}
.panelWithBorderMobile .linkitems a{
	font-size:.9em!important;
	line-height:1.1em!important;
	margin-bottom:1px;
}
}
/* Restore basket box when screen size increased */
@media (min-width: 951px) {
#BasketPanelWithBorder{
	/*float:left!important;*/
}
.panelWithBorderMobile{
	display:none;
}
}
/* -------------------- */

#BasketListDiv{
	margin-top:30px;
}
#BasketListDiv p{
	font-size:.8em!important;font-weight:bold;
}
#BasketListDiv p span#BasketLegend {
	color:#FF0099;
}
#BasketListDiv p span#BaskletList {
	color:yellow!important;
}
div#BasketPanelWithBorder{
	margin-left:3px;
}
p#zeroBasketList, p#reviewBasketList{
	font-size:.3em!important;
}
#BasketPanelWithBorder .linkitems{
	position:absolute; 
	bottom:35px; 
	left:25px;
}
#BasketPanelWithBorder .linkitems p{
	font-size:.9em!important;
	line-height:1.3em!important;
	margin-bottom:1px;
}



/* ---------------------------------------------------------------------------------- */
/* -------------------- */
/* HEADING PANEL TEXT   */
/* -------------------- */
@media (max-width: 820px) {
div #staticImageTextBox, div #staticImageTextBox p{
	top:8%;
	font-size:.85em!important;
	line-height:1.2em!important;	
}
div.headingBoxRight{
	right:2%!important;
}
}
@media (max-width: 640px) {
div #staticImageTextBox, div #staticImageTextBox p{
	top:7%;
	
	font-size:.75em!important;
	line-height:1.1em!important;		
}
}
/* ------------------------ */
/* LOWER PANEL + NEWS PANEL   */
/* ------------------------ */
@media (max-width: 640px) {
.Xbox{
	width: 95%!important;/*290px;*/	
	margin-bottom:10px!important;

	border-bottom:3px!important;
	border-bottom:solid!important;
	/*border-bottom-color: yellow!important;	*/
					/* Separate first of three news panels from second on mobile: */
					/*border-top:20px solid #F7D749!important;*/
				
	/*border-bottom:100px solid yellow!important;	*/
}
.Xbottom, .Xbottom.recent, .Xbottom.older{
	width:95%;
	margin:0;
	height:15px;
	color:yellow!important;

}
.externalWrapper{
	/* Originally restated orange backgroundL*/
	/*background-color:#F7D749!important;	*/
}
#homePanel1{
					border-bottom:20px solid white!important;	
}
#homePanel2{
					/* Separate second of three news panels from third on mobile: */
					/*border-bottom:20px solid #F7D749!important;*/
					border-bottom:20px solid white!important;
					border-top:20px solid white!important;
	margin-bottom:10px!important;
	padding-bottom:10px;!important;

	/*padding-bottom:400px;*/
}
#homePanel2 h3, #homePanel2 h6, #homePanel2 p{
	margin-left:15px!important;
}
}
/* ---------------------- */
/* MODULE TRAINING EVENTS */
/* ---------------------- */
@media (max-width: 900px) {
#eventModuleOutcomes div, #productEventDates div{
	width:99%!important;
	margin: 0 auto!important;
	margin-left:10px!important;
	}
}

/* System images applied in training events list moduile */
.TrainingFullList img{
	max-width:30%!important;

}

/* ---------------------- */
/* GOOGLE MAP */
/* ---------------------- */
.googlemap{
	width:400px;
	height:450px;
}

@media (max-width: 1050px) {
.googlemap{
	width:350px;
	height:400px;
}	
}
@media (max-width: 950px) and (min-width: 640px) {
.googlemap{
	width:300px;
	height:350px;
}	
}
@media (max-width: 820px){
.googlemap{
	width:95%!important;
	float:right;
	margin-right:3%;
}	
#mapcontainer{
	float:left;
	width:90%;	
}
}

@media (min-width:300px) and (max-width: 640px) {
.googlemap{
	width:95%!important;
	float:right;
	margin-right:3%;	
}	
}
/* ---------------------- */
/* CORSSPAGE MODULE */
/* ---------------------- */
/* Need to cancel deep bottom margin on individual panels, which is used to even depths in desktop view */

@media (max-width: 640px) {
.Xbox{

	padding-bottom:0px!important; 	
	margin-bottom:20px!important;
	margin-left:5px!important;	
	border-bottom:1px solid #D7D7D7!important;

}
.Xleft, .Xcentre{
	margin-left:0!important;
	margin-right:0!important;	
	float:left!important;
	width:100%!important;	
}
.Xright{
	float:left!important;
	margin-left:0!important;
	width:100%!important;
}

div#crosspageWrapper{
	margin-top:0!important;
}
}
@media (min-width: 641px) {
div.Xright{
	float:right!important;
}	

div#crosspageWrapper{
	margin-top:0!important;
}
}
/* ---------------------- */
/* TEXTSTREAM MODULE */
/* ---------------------- */

@media (min-width: 641px) {
div#storyblock{
	width:70%!important;
}
}	
/* Width of visible panel in space available (set in module to e.g. 70% */
@media (max-width: 640px) {
div#storyblock{
	width:110%!important;
	margin-left:0!important;
	margin-right:-40px!important;

}
div#instructions{
	width:95%!important;
	margin: 0 auto;

}
#instructions img, #instructions br{
	display:none;
}
.toStreamer{
	position: relative; margin-top:10px; 
}
}

/* ---------------------- */
/* CUSTOM MODULE 2*/
/* ---------------------- */
/* Can be applied later to all modules */

@media (max-width: 870px) {
div.Module2CentreCol{
	display:none;
	margin:0;padding:0;
	text-align:top;
}
div.Module2RightCol{
	display:block;
	margin:0;padding:0;	
	text-align:top;	
}
div#sidebar1{
	margin-top:-130px!important;
}	
#sidebar2{
	/*margin-top:-25px!important;*/
}
}
@media (max-width: 840px) {
#sidebar2{
	margin-top:-20px!important;
}

}
@media (min-width: 871px) {
div.Module2CentreCol{
	display:block;
	margin:0;padding:0;		
	text-align:top;	
}
div.Module2RightCol{
	display:none;
	margin:0;padding:0;	
	text-align:top;	
}
}

/* ---------------------- */
/* MOBILE BURGER MENU*/
/* ---------------------- */

/* ---------------------- */
/* POPUP ALERT*/
/* ---------------------- */
/* Used with module_popup_alert.php */
@media (max-width: 640px) {
div#adHocContact {
	top:250px!important;
	left:12%!important;
	min-width:220px!important;
}
div#adHocContact.notHomePage{
	top:1400px!important;
}
}

/* ------------------*/
/* SITEMAP OVERRIDES */
/* ------------------*/

@media (max-width: 870px){
#sitemapnav li{
	text-decoration:none;
	list-style-type:none!important;
}
#sitemapnav ul li a:active,  #sitemapnav ul li a:visited, #sitemapnav ul li a:link, #sitemapnav ul li a:hover{
	text-decoration:none;
	color:#333333;
}
#sitemapnav ul li a:hover{
	color:red;
}
}
/* ---------------------- */
/* Social media alert footer panel */
@media (max-width: 640px) {
div#SocMedPanel{
	bottom:70px!important;
	left:130px!important;
}
}
@media (min-width: 641px) {
div#SocMedPanel{
	bottom:27px!important;
	left:15px!important;
}	
}
/* ------------------*/
/* VERSE OVERRIDES */
/* ------------------*/
div.lower-padding{
	height:30px!important;
}
@media (max-width: 1150px) {
div.lower-padding{
	height:30px!important;
}
}
div.widepoem{
	white-space: nowrap!important;
}
@media (max-width: 800px) {
div.widepoem{
	white-space: normal!important;
}
}
/* ------------------*/
/* IMAGES ON MOBILES (experimental) */
/* ------------------*/
/* Transferred to separate file, hundred... Oct 2025
@media (max-width: 800px) {
img.FillOut{
	width: 95%!important;
}
div.divWithImage{
	width:100%!important;
}
}
*/