/*STYLE SHEET FOR ORIGINTECHNICALPRODUCTIONS.CO.UK */
/* LAST EDITED BY: PETER COX */

/* otp_body_global.css v21.4 (15.01.21) */
/* W3C validated 15.01.21 */

/* 20.3 Form css removed to separate file */
/* 20.4 All Show/hide code removed (reintstated on Location page only) */
/* 20.5 Max limiting width applied to r_contentWrapper /*
/* 20.6 Min height on introText negated for .latest page - sorted on page rather than here/*
/* 20.7 imgGridWrapper adjusted for .dryhire et al
/* 20.8 Dryhire search elements remeoved to separate file */
/* 20.9 Dryhire table and other elements removed to dryhire css file : Package spec list deleted */
/* 20.10 dartBulletLink added with updates to image pathing and section pages; & faded background added for dryhire pages
/* 20.11 Selector grid styles developed */
/* 20.12 Selector grid styles moved to separate css file */
/* 21.0 Cleaned and streamlined with page files */
/* 21.1 dartBulletList modified; xintro and xportfolio removed; expanding imgGridWrappers removed
/* 21.1 Min height set for body.display .introText
/* 21.2 #introText added from About page
/* 21.3 Added ancillary text styles for Terms pages; added styles for Production Homepage
/* 21.4 layherLogo style added to control sizing
/* NOTE FOR FUTURE: Maybe all site pages should have the faded OTP roundel to improve contrast of content */




/* Known screen sizes & breakpoints */ 
/* Galaxy S5 Neo - Device widths: 360 x 640 (1080 x 1920)  */                    
/* Samsung Tablet - 800 x 1280  */


/* zero everything from browser defaults. Don't put list selectors in here */
html, body, p, h1, h2, h3, h4, h5, h6, form, fieldset, a, img, td, tr, blockquote q { 
margin: 0; 
padding: 0; 
border: 0;
outline:0;
}

* { /* reset all elements */ /* need to move this to global style file */
    box-sizing: border-box;
    padding: 0;
    margin: 0;
	}

html {
	background-color:#000000; /* makes no difference */
	}

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:62.5%; /*	 Makes 1 em = 10pts (.625 x 16) rather than 16pts */
	color:#000000;
	background-color:#000000;
	/*background-color:#4e2b49;*/ /* too purple */
	/*background-image:url(/site09/visual1.gif);
	background-image:url(/site09/background1-8col.gif);
	background-image:url(/images09/gif256/background2-8col.gif);
	background-image:url(/images09/gif256/background3-4col.gif);
	background-image:url(/images09/gif256/background4-4col.gif);*/
	background-position:top left;
	background-repeat:no-repeat;
	}

.clear {
	clear:both;
	font-size:0;
	line-height:0
	}

#pagewrapper, #r_pageWrapper { 
	position:relative;
	display:flex;
	flex-direction:column;
	width:100vw;
	margin:auto;
	min-height:200px;
	/*z-index:1;*/
	/*margin-top:-10px;*/
	border:0px solid yellow; /* DEV only */
	}
	
#contentWrapper, /* This may be defunct; replaced by r_contentWrapper */
.contentWrapper {  /* added 19.02.12 */
	position:relative;
	width:900px;
	margin:auto;
	border:1px dotted white;
	}
	
	
	

/* ///////////////////////////////////// BODY SECTION /////////////////////////////////////////////////////// */
/* ///////////////////////////////////// BODY SECTION /////////////////////////////////////////////////////// */
/* ///////////////////////////////////// BODY SECTION /////////////////////////////////////////////////////// */


#r_bodyWrapper_Homepage, #r_bodyWrapper { /* Standard styling for all widths unless overridden */
	order:2; /* Second item in the pageWrapper */
	position:relative;
	display:flex; /* It needs to contain items that will need to flex within the body space */
	flex-direction:column;
	flex-wrap:wrap;
	/*justify-content:center;*/
	width:100%; /* of it's containing element - pageWrapper*/
	margin:auto;
	margin-top:0; /* Controls top margin */
	margin-bottom:0; /* Controls bottom margin */
	min-height:200px;
	/*min-height:80vh;*/
	z-index:1; /* Keeps body and topLight below Roundel */
	/*margin-top:-10px;*/
	/*margin-top:10px;*/ /* for dev purposes */
	/* Try putting the background in here */
	overflow:visible;
	background-image:url(/images-site/gif/logobackground2.gif);
	background-position:top center; /* Fine tuning position is best done changing the graphic dimensions */
	background-repeat:no-repeat;
	/*border:1px dotted magenta;*/  /* DEV only */
	/*background-color:#996699;*/  /* DEV only */
	}
	
#r_bodyWrapper.ancillaryBackground { /* uses a darker Roundel for text-only pages */
	background-image:url(/images09/gif256/logobackground3.gif);
	}

.dryhire #r_bodyWrapper { /* uses a darker Roundel for ALL dryhire pages */
    background-image:url(/images09/gif256/logobackground3.gif);
	}

@media only screen and (min-width: 799px) { /* For screen widths down to 799px wide: Tablet vertical*/
#r_bodyWrapper_Homepage, #r_bodyWrapper { 
	order:3;
	/*position:relative;*/
	/*display:flex;*/ /* seems to make no difference in containing buttonWrapper */
	/*width:100vw;*/
	/*margin:auto;*/
	/*min-height:200px;*/
	/*z-index:1;*/
	/*margin-top:-10px;*/
	/*margin-top:10px;*/ /* for dev purposes */
	/* Try putting the background in here */
	/*overflow:visible;
	background-image:url(/images09/gif256/logobackground2.gif);
	background-position:top center;
	background-repeat:no-repeat;
	border:0px dotted magenta;*/
	}
}



#r_topLight { /* The image id for the topLight image */
	position:absolute;
	width:100%;
	height:44px; /* Maintain its height at at any screen width */
	top:0px;
	z-index:100;
	border:0px dotted white; /* For dev only */
	}

#r_bottomLight { /* The image id for the bottomLight image */
	position:absolute;
	/*position:relative;*/
	display:block;
	width:100%;
	height:44px;
	/*margin-top:-44px;*/
	bottom:44px;
	bottom:0;
	z-index:100;
	}

/* ///////////////////////////////////////////  MAIN CONTENT CONTROL ////////////////////////////////////////// */
/* ///////////////////////////////////////////  MAIN CONTENT CONTROL ////////////////////////////////////////// */
/* ///////////////////////////////////////////  MAIN CONTENT CONTROL ////////////////////////////////////////// */



#r_contentWrapper { /* the new flex contentWrapper */ /* Standard styling for all widths unless overridden */
	position:relative;
	order:2;	/* Places it after the navbar */ /* Same for all layouts */
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	color:#ffffff; /* Make all text white by default */
	padding-top:20px;
	padding-top:10px;
	padding-bottom:40px;
	width:90%; /* 90% of pageWrapper width / vw */
	margin:auto;
    /*border:2px dotted red;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#r_contentWrapper { /* the new flex contentWrapper */
	justify-content:flex-start;
	width:70%; /* 900/1366 = 66% of pageWrapper width / vw : let's go 70% */
	max-width:1000px; /* Added v20.5 to limit width on 1920 HD screens and above */
	/*border:2px dashed red;*/  /* DEV only */
	}
}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.display #r_contentWrapper { /* Styling for 'display' pages on wider screens */
	flex-direction:column; /* Different to body global */
	text-align:left; /* Different to body global */
	/*border:2px dashed red;*/  /* DEV only */
	}
}

.production #r_contentWrapper { /* the new flex contentWrapper */ /* Standard styling for all widths unless overridden */
	overflow:visible;
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.production #r_contentWrapper { /* the new flex contentWrapper */
	order:2;	/* Places it after the navbar */ /* Same for all layouts */
	flex-direction:column; /* Different to body global */
	text-align:left; /* Different to body global */
	}
}

#titleBlock {  /* Standard styling for all widths unless overridden */ /* Contains Breadcrumbs and h1 */
	position:relative;
	display:block;
	order:1; /* It's the first chunk of the page content */
	width:100%; /* Uses the full width of the contentWrapper */
	height:auto; /* Assumes natural height from contents */ /* BUT IT DOESN'T */
	align-self:flex-start;
	/*min-height:100px;*/ /* DEV only */
	/*padding-bottom:10px;*/
	/*border:1px solid #FF9900;*/ /* DEV only */
	}
	
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#titleBlock {  /* Standard styling for all widths unless overridden */ /* Contains Breadcrumbs and h1 */
	display:inline-block;
	order:1; /* It's still the first chunk of the page content */
	width:40%; /* 360/900 =  0.4 */
	/*border:1px solid #FF9900;*/ /* DEV only */
	}
}

.breadcrumbs {  /* Standard styling unless overridden below */
	position:relative;
	display:block;
	width:100%;
	top:0;
	color:#0066CC;
	z-index:150;
	margin-bottom:0;
	font-size:90%;
	font-weight:bold;
	/*border:1px dotted yellow;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */	
.breadcrumbs {
	position:relative;
	display:block;
	width:106%;
	height:auto;
	top:20px;
	top:30px;
	color:#0066CC;
	z-index:150;
	margin-bottom:20px;
	font-size:90%;
	font-weight:bold;
	/*border:1px dotted yellow;*/  /* DEV only */
	}
}

.breadcrumbs a,
.breadcrumbs a:visited,
.breadcrumbs a:active {
	color:#0066CC;
	color:#006eff; /* blue */
	text-decoration:none;
	}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
	color:#0066CC; /* blue */
	color:#f5a300; /* orange */
	}


h1 { /* These original styles need to be overridden by any flex development styles */
	position:relative;
	display:block;
	float:left;
	clear:both;
	width:350px;
	width:100%;  /* Added 31.07.20 */
	/*margin-top:40px;-*/
	margin-top:5px;
	/*margin-top:20px;*/
	margin-right:10px;
	font-size:2.0em;
	font-size:2.4em;
	line-height:1.2em;
	font-weight:normal;
	letter-spacing:0.05em;
	margin-bottom:15px;
	color:#f5a300;
	/*border:1px dotted lime;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
h1 { /* These original styles need to be overridden by any flex development styles */
	position:relative;
	display:block;
	float:left;
	clear:both;
	/*width:350px;*/
	margin-top:40px;
	/*margin-top:20px;*/
	margin-right:10px;
	font-size:2.0em;
	line-height:1.2em;
	font-weight:normal;
	letter-spacing:0.05em;
	margin-bottom:15px;
	color:#f5a300;
	/*background-color:#00FF99;*/
	/*18.02.12*/
	font-size:2.4em;
	margin-top:10px;
	}
    
    .production h1 {
    width:70%; /*/ To force a line break on wider screens */
    }
    
}

    .firstPara {
	position:relative;
	order:2;
	width:100%;
	margin-top:10px;
	margin-bottom:20px;
	font-size:1.1em;
	line-height:1.6em;
	color:#ffffff;
	/*border:1px dotted olive;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.firstPara {
	/*float:left;*/
	display:inline-block;
	width:360px;
	width:48%;
	width:100%;  /* As part of titleBlock */
	margin-bottom:0px; /* Override default above */
	/*border:1px dashed olive;*/ /* DEV only */
	}
}

#introText { /* This only features on the About page */
	position:relative;
	float:left;
	clear:left;
	width:100%;
	margin-top:0;
	color:#ffffff;
	font-size:1.1em;
	line-height:1.6em;
	margin-bottom:30px;
	padding-bottom:20px;
	/*border:1px dotted blue;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#introText { 
	position:relative;
	float:left;
	clear:left;
	width:40%;
	margin-top:10px;
	/*border:1px dotted blue;*/  /* DEV only */
	}
}


/*#introText,*/ 
.introText,
.secondaryText { /* Generally the first section or paragraph of text on the page */
	position:relative;
    display:inline-block; /* modified */
    order:5; /* As element within r_contentWrapper */
	float:left; /* original */
    float:none; /* modified */
	clear:left; /* original */
    clear:none; /* modified */
	width:360px;
	/*min-height:435px;
	min-height:310px;*/
	margin-top:34px; /* original */
	margin-top:10px; /* mod1*/
    margin-top:0; /* mod2 */
	color:#ffffff;
	font-size:1.1em;
	line-height:1.6em;
	margin-bottom:30px; /* original */
    margin-bottom:10px; /* modified */
	padding-bottom:20px; /* original */
    padding-bottom:0; /* modified */
	/*border:1px dotted yellow;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
	/*#introText,*/ /* This only features on the About page */
	.introText,
    .secondaryText {
        display:block; /* Needs tested to see if critical mod to default */   
	    order:4; /* Needs to display earlier */
        min-height:10px;
        width:40%; /* Of r_contentWrapper */
        padding-top:15px;
        /*border:1px dashed yellow;*/  /* DEV only */
	    }
    
    .display .introText {
        min-height:380px;
        /*border:1px solid magenta;*/  /* DEV only */
    }       
}

ul.displayList {
    width:85%;
    margin:0 30px;
    padding:0 20px;
    /*border:1px dotted yellow;*/  /* DEV only */
}

/*#titleBlock h1 {*/ /* The title text itself */
	/*position:relative;
	display:inline-block;
	float:none;
	width:100%;*/ /* of its parent */
	/*margin-right:10px;
	margin-top:10px;*/ /* Gap between title and breadcrumbs */
	/*font-size:2.4em;
	line-height:1.2em;
	font-weight:normal;
	letter-spacing:0.05em;
	margin-bottom:15px;
	color:#f5a300;*/ /* Orange */
	/*color:#00FFFF;*/ /* DEV only */
	/*background-color:#99FFCC;*/ /* DEV only */
	/*}*/



/* \\\\\\\\\\\\\\\\\\\\\\\\ ANCILLARY PAGE STYLES  ////////////////////////////////// */
/* \\\\\\\\\\\\\\\\\\\\\\\\ ANCILLARY PAGE STYLES ////////////////////////////////// */	

/* See also ancillary background holder */

.ancillary h1 { /* Default styling for the main title */
	float:left;
	clear:left;
	width:100%;
	font-size:1.6em;
	font-weight:normal;
	letter-spacing:0.05em;
	color:#f5a300;
	}
@media only screen and (max-width: 500px) { /* Styling mods for screen widths up to 420px */
.ancillary h1 {
    max-width:90vw;
    font-size:1.2em;
    }
}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.ancillary h1 {
    font-size:2.0em;
    }
}
    
    
/* See also h2 and h3 ancillary styling */

#ancillaryText { /* Standard styling for all widths unless overridden */
	position:relative;
	width:100%; /* Use the full width of #r_contentWrapper */
	color:#ffffff;
	font-size:1.2em;
	line-height:1.6em;
	padding-bottom:40px;
    margin-top:20px;
	/*border:1px dotted blue;*/  /* DEV only */
	}	
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#ancillaryText { /* r_contentWrapper is already at 900/1366 = 66% of pageWrapper width / vw : let's go 70% */
	width:700px; /* so 700px = 700/900 = 78% */
	width:78%;
	/* Then it needs brought to the middle of the page: */
	display:inline-block;
	margin:auto;
	font-size:1.1em;
	}
}

#ancillaryText ul { /* added 27.07.20 to maintain list layouts specifically in ancillary text */
	margin:10px;
	}
#ancillaryText li { /* added 27.07.20 to maintain list layouts specifically in ancillary text */
	margin-left:30px;
	padding-left:8px;
	}


.ancillary a	{
	color:#006eff;
	}
	
.ancillary a:hover, 
.ancillary a:focus {
	color:#ff9900;
	}

#ancillary p {
	margin-top:10px;
	}

#ancillary a, #ancillary a:visited, #ancillary a:active {
	color:#fff;
	color:#006eff;
	color:#7fb6ff;
	text-decoration:underline;
	}

#ancillary a:hover, #ancillary a:focus  {
	color:#fff;
	text-decoration:underline;
	}



    
 .domain {
	display:inline-block;
	font-size:0.8em;
	}   
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.domain {
	display:inline-block;
	font-size:1.0em;
	}
}	





.jobs h1 {
	width:100%;
	font-size:3.0em;
	}	

















#imageBlock {
	position:relative;
	display:block;
	order:2;
	justify-self:flex-end;
	width:100%;
	border:1px dotted lime; /* DEV only */
	}

@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#imageBlock {
	position:relative;
	display:inline-block;
	width:53%; /* 475 / 900 */
	left:50px;
	border:1px dotted lime; /* DEV only */
	}
}

#textBlock { /* Standard styling for all widths unless overridden */
	position:relative;
	display:block;
	order:3;
	width:100%; /* same as titleBlock */
	margin-top:10px;
	color:#ffffff;
	font-size:1.1em;
	line-height:1.6em;
	margin-bottom:30px;
	padding-bottom:20px;
	border:1px dotted cyan;
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#textBlock {
	position:relative;
	display:inline-block;
	order:3;
	align-self:flex-start;
	width:40%; /* same as titleBlock */
	border:1px dotted cyan;
	}
}	
	

h2 {
	display:block;
	font-size:1.0em;
	color:#f5a300; /* Orange*/
	font-weight:bold;
	margin-top:15px;
	}
.ancillary h2 {
	color:#ffffff;
	}
.ancillary.production h2,
.ancillary.dryhire h2 {
    color:#ff9900; /* Orange */
}

h3 {
	display:block;
	margin-top:10px;
	padding-top:10px;
	font-size:1.0em;
	font-weight:bold;
	line-height:1.5em;
	color:#fff;
	}

.ancillary h3 {
	color:#ff9900; /* Orange */
	}
	


#backgroundHolder { /* IE Conditional */
	position:relative;
	float:left;
	/*margin-top:-44px;*/ /* This is what's causing the "non contained issue with buttonWrapper in buttonContainer! */
	margin-left:40px; /* added v20.0 - countered by moving button container -30px to stay on station */
	min-height:470px;
	width:100%;
	overflow:visible;
	background-image:url(/images09/gif256/logobackground2.gif);
	background-position:top center;
	background-repeat:no-repeat;
	border:0px dotted yellow;
	}
	
.homepage #backgroundHolder {
	min-height:410px;
	}
	
.ancillary #backgroundHolder {
	background-image:url(/images09/gif256/logobackground3.gif);
	}






body.jobs #introText {  /* ooh! Need to check this with on-page styling */
	position:relative;
	float:left;
	margin-left:135px;
	width:700px;
	margin-top:34px;
	color:#ffffff;
	font-size:1.1em;
	line-height:1.6em;
	padding-bottom:40px;
	/*border:1px dotted blue;*/
}


.moreLink {
	font-size:85%;
	font-weight:bold;
	line-height:1.1em;
	text-decoration:none;
	color:#FFFFFF;
	}
a.moreLink, a.moreLink:visited, a.moreLink:active {
	color:#006eff; /* blue */
	}
a.moreLink:hover, a.moreLink:focus {	
	color:#f5a300; /* orange */
	}


/* \\\\\\\\\\\\\\\\\\\\\\\\ DARTBULLETLISTS & LINKS ////////////////////////////////// */
/* \\\\\\\\\\\\\\\\\\\\\\\\ DARTBULLETLISTS & LINKS ////////////////////////////////// */	

	
ul.dartBulletList,
ul.dartBulletLink { /* Default mobile-first styling for the parent UL element of a bulleted link list */
	position:relative;
	margin-top:10px;
    margin-left:0;
    margin-left:20px; /* To 'zero' the left hand side with the text */
    margin-bottom:10px;
	list-style-type:none;
	list-style-image:url(/images-nav/png/arrow-dart-or-fwd.png);
	font-weight:bold;
    line-height:2.0em;
    /*border:1px dotted cyan;*/  /* DEV only */
	}

ul.dartBulletLink {
    width:80%;
    }

.dartBulletList li a,
.dartBulletLink li a,
.dartBulletList li a:visited,
.dartBulletLink li a:visited,
.dartBulletList li a:active,
.dartBulletLink li a:active {
	color:#026DFC; /* Bright blue */
	text-decoration:none;
	}
.dartBulletList li a:hover,
.dartBulletLink li a:hover,
.dartBulletList li a:focus,
.dartBulletLink li a:focus {
	color:#f5a300; /* Orange */	
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */	
ul.dartBulletList { /* The parent UL element */
	display:inline-block;
	width:80%;
    line-height:1.6em;
	/*margin-left:120px;*/
    /*margin-left:0;*/ /* Positioned for covered stage pages */
	/*padding-left:100px;*/
	/*border:1px dashed cyan;*/  /* DEV only */
	}
    
    ul.dartBulletLink {
        width:80%;
        margin:auto;
    }
}

/* Positioning for coveredStagesSub link list */
ul.dartBulletList.coveredStagesSub {
    margin-left:100px;
}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */	
ul.dartBulletList.coveredStagesSub {
    width:60%;
    }
}


/* PRODUCTION HOMEPAGE */

.production .dartBulletLink {
    width:90%; /* Append global style for link to Ts & Cs */
    /*border:1px dotted yellow;*/ /* DEV only */
    }

/* Default styling for .servicesCol and .servicesCol2 */
.servicesCol1 {
    position:relative;
    color:#FF9900;
    display:inline-block;
    width:100%;
    font-size:1.35em;
    line-height:2.0em;
    margin-bottom:20px;
    padding-bottom:0;
    margin-bottom:0;
    /*border:1px solid yellow;*/ /* DEV only */ 
    }           
.servicesCol2 {
    display:inline-block;
    width:100%;
    font-size:1.35em;
    line-height:2.0em;
    margin-top:0px;;
    padding-top:0;
    margin-bottom:10px;
    top:-20px;
    /*border:1px dotted magenta;*/  /* DEV only */
    }    
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
  .servicesCol1 {
    position:relative;
    color:#FF9900;
    display:inline-block;
    width:100%;
    font-size:1.1em;
    line-height:1.6em;
    /*margin-bottom:20px;*/
    margin-bottom:0;
    /*border:1px dashed yellow;*/  /* DEV only */ 
    }           
.servicesCol2 {
    display:inline-block;
    width:100%;
    font-size:1.1em;
    line-height:1.6em;
    margin-top:0;
    margin-bottom:10px;
    /*border:1px dashed magenta;*/ /* DEV only */
    }
}
    

/*@media only screen and (min-width: 799px) {*/ /* Styling mods for wider screen widths down to 799px */
.about .xdartBulletLink,
.production .xdartBulletList,
.production .xdartBulletLink,
.staging .xdartBulletList,
.staging .xdartBulletLink,
.structures .xdartBulletList,
.structures .xdartBulletLink,
.dryhire .xdartBulletLink { /* The parent UL element */
	display:block;
	width:80%;
	margin-left:20px;
	padding-left:0px;
	/*border:1px dotted yellow;*/  /* DEV only */
	}
/*}*/



		
/* \\\\\\\\\\\\\\\\\\\\\\\\ IMAGE GRID CLUSTERS ////////////////////////////////// */
/* \\\\\\\\\\\\\\\\\\\\\\\\ IMAGE GRID CLUSTERS ////////////////////////////////// */	


#imgGridWrapper,  /* Standard styling unless overridden below */
.imgGridWrapper {
	position:relative;
	display:block;
	width:100%; /* of r_contentWrapper for mobile screens */
	height:450px; /* This will need to vary for differing pages */
	height:auto;
	margin-top:0;
	margin-right:0;
	margin-bottom:30px;
	overflow:hidden;
	/*border:1px solid yellow;*/  /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
#imgGridWrapper,
.imgGridWrapper {
	float:right;
	width:48%; /* of r_contentWrapper */ /* Was 475px before responsive layout  */
	height:386px;
	margin-top:43px;
	margin-right:36px;
	margin-left:30px;
	/*border:1px solid lime;*/  /* DEV only */
	}
}


.about #imgGridWrapper { /* To display embedded FaceBook page */
	width:90%; /* To give thumbimg room at sides to scroll FaceBook embed */
	height:80vh;
	}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.about #imgGridWrapper {
	width:48%; /* of r_contentWrapper */ /* Was 475px before responsive layout  */
	height:550px;
	}
}


.display #imgGridWrapper,  /* Standard styling for .display pages unless overridden below */
.display .imgGridWrapper {
	position:relative;
	order:3;
	display:inline-block;
	width:100%; /* of r_contentWrapper for mobile screens */
    width:50%; /* of r_contentWrapper for mobile screens */
    width:100vw;
    /*height:450px;*/ /* This will need to vary for differing pages */
	/*height:auto;*/
	margin-top:0;
	margin-right:0;
	margin-bottom:30px;
    margin-bottom:10px; /* Specific to Production page */
	overflow:hidden;
    overflow:visible;
/* Re-positions the image within the screen with width of 100vw */
    left:50%; /* Move the image left by 50% */
    margin-left:-100%; /* Move it back by 100% to keep it on centre */
/* End re-position fiddle */
	/*border:1px dotted fuchsia*/  /* DEV only */
	}
@media only screen and (min-width: 400px) { /* Styling mods for wider screen widths down to 370px */
.display #imgGridWrapper, .display .imgGridWrapper {
	position:relative;
    /*right:0;*/
    width:80%; /* Of content wrapper */
    left:0;
    margin:auto;
    margin-bottom:30px;
    /*border:1px solid cyan;*/ /* DEV only */
	}  
}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.display #imgGridWrapper,    /* Styles in here will be overriding default styles AND those directly above */
.display .imgGridWrapper {
	position:absolute;
    right:0;
	order:3;
    order:4;
	right:0px;
	/*width:475px;*/
	width:48%; /* of r_contentWrapper */ /* Was 475px before responsive layout  */
	margin-top:5px; /* vertically centres on background roundel */
	left:50%; /* Put it back where it was in default */
    margin-left:0; /* Counter-act fiddle above */
    margin-left:-60px; /* Re-centre horizontally over background Roundel */
    /*border:1px dashed fuchsia;*/  /* DEV only */
	}
}


.production #imgGridWrapper { /* Standard styling unless overridden below from body global css file*/
	position:relative;
	order:3;
	display:inline-block;
	width:100%; /* of r_contentWrapper for mobile screens */
    width:50%; /* of r_contentWrapper for mobile screens */
    width:100vw;
    margin-top:0;
	margin-right:0;
	margin-bottom:30px;
    margin-bottom:10px; /* Specific to Production page */
	overflow:hidden;
    overflow:visible; /* Necessary to see image thumbnails */
/* Re-positions the image within the screen with width of 100vw */
    left:50%; /* Move the image left by 50% */
    margin-left:-100%; /* Move it back by 100% to keep it on centre */
/* End re-position fiddle */
	/*border:1px dotted fuchsia*/  /* DEV only */
	}
@media only screen and (min-width: 400px) { /* Styling mods for wider screen widths down to 370px */
.production #imgGridWrapper {
	position:relative;
    width:80%; /* Of content wrapper */
    left:0;
    margin:auto;
    margin-bottom:30px;
    /*border:1px solid cyan;*/
	}  
}
@media only screen and (min-width: 799px) { /* Styling mods for wider screen widths down to 799px */
.production #imgGridWrapper /* Styles in here will be overriding default styles AND those directly above */
 {
	position:absolute;
    right:0;
	order:3;
    order:4;
	right:0px;
	width:48%; /* of r_contentWrapper */ /* Was 475px before responsive layout  */
	margin-top:5px; /* vertically centres on background roundel */
	left:50%; /* Put it back where it was in default */
    margin-left:0; /* Counter-act fiddle above */
    margin-left:-60px; /* Re-centre horizontally over background Roundel */
    /*border:1px dashed fuchsia;*/  /* DEV only */
	}
}


img#otplogoset {
	margin-bottom:20px;
	margin-right:30px;
	}

 .layherLogo {
    max-width:35%; /* Width of container */
    }


/* ////////////////////////// SHOW / HIDE CODE DELETED 20.08.2020  ///////////////////////// */