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

/* otp_homepage.css v21.0 (16.01.21) */
/* W3C validated 16.01.21 */

/* v20.3 : Revised styling after rework for tabbing navigation and highlighting */
/* v21.0 : Updated over otp_homepage.css ; sorted large alt text on refresh ; streamlined all homepage css to here
	
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ HOME PAGE BODY ////////////////////////////////// */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ HOME PAGE BODY ////////////////////////////////// */	

#r_buttonWrapper {
	position:relative;
	order:2; /* Second item after the nav bar */
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	padding-top:40px;
	padding-bottom:40px;
	/*border:1px dashed #00FFCC;*/ /* DEV only */
	}
@media only screen and (min-width: 799px) { /* Modifications to style at widths above 1400px */
#r_buttonWrapper {
	position:relative;
	order:2; /* Second item after the nav bar */
	display:flex;
	width:90%;
	margin:auto;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	padding-top:40px;
	padding-bottom:40px;
	/*border:1px dashed #yellow;*/ /* DEV only */
	}
}

@media only screen and (min-width: 1400px) { /* Modifications to style at widths above 1400px */
#r_buttonWrapper {
	position:relative;
	order:2; /* Second item after the nav bar */
	display:flex;
	width:80%;
	margin:auto;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	padding-top:40px;
	padding-bottom:40px;
	/*border:1px dashed #yellow;*/ /* DEV only */
	}
}

/* *********************************  PRODUCTION BUTTON ********************************* */

#r_productionButton {
	position:relative;
	order:1;
	width:18vw;
	min-width:300px; /* Needed to prevent them from shrinking completely!*/
	max-width:300px;
	height:318px;
	background-image:url(/images12/png/stagingButton.png);
	background-repeat:no-repeat;
	background-size:contain; /* Ensures the full shadow remains visible when resized */
	text-align:center;
	font-size:2.4em;
	letter-spacing:0.05em;
	/*border:1px dotted red;*/
	}


/* *********************************  STAGING BUTTON ********************************* */
	
#r_stagingButton {
	position:relative;
	order:2;
	width:18vw;
	min-width:300px; /* Needed to prevent them from shrinking completely!*/
	max-width:300px;
	height:318px;
	background-image:url(/images12/png/stagingButton.png);
	background-repeat:no-repeat;
	background-size:contain; /* Ensures the full shadow remains visible when resized */
	text-align:center;
	font-size:2.4em;
	letter-spacing:0.05em;
	/*border:1px dotted red;*/
	}


/* *********************************  STRUCTURES BUTTON ********************************* */
	
#r_structuresButton {
	position:relative;
	order:3;
	width:18vw;
	min-width:300px; /* Needed to prevent them from shrinking completely!*/
	max-width:300px;
	height:318px;
	background-image:url(/images12/png/stagingButton.png);
	background-repeat:no-repeat;
	background-size:contain; /* Ensures the full shadow remains visible when resized */
	text-align:center;
	font-size:2.4em;
	letter-spacing:0.05em;
	/*border:1px dotted red;*/
	}

/* *********************************  DRYHIRE BUTTON ********************************* */

#r_dryhireButton {
	position:relative;
	order:4;	
	width:18vw;
	min-width:300px; /* Needed to prevent them from shrinking completely!*/
	max-width:300px;
	height:318px;
	background-image:url(/images12/png/stagingButton.png);
	background-repeat:no-repeat;
	background-size:contain; /* Ensures the full shadow remains visible when resized */
	text-align:center;
	font-size:2.4em;
	letter-spacing:0.05em;
	/*border:1px dotted red;*/
	}


a.buttonLink {  /* The button link area sitting within the button object */
	position:relative;
	display:block;
	width:90%;
	height:79%;
	margin:auto;
	margin-top:7%;
	text-decoration:none;
	/*border:1px dotted yellow;*/  /* DEV only */
	}
a.buttonLink:hover > .buttonTitle,  /* Highlight behaviours on hover and tab-focussing */
a.buttonLink:hover > .strapline,
a.buttonLink:focus-within > .buttonTitle,
a.buttonLink:focus-within > .strapline {
	color:#f5a300; /* orange */
	}
	
.buttonTitle {  /* The top title of each button */
	position:relative;
	display:block;
	color:#ffffff;
	padding-top:7px;
	}


.productionImages, 
.stagingImages, 
.structuresImages,
.dryhireImages { /* These must remain specifically named beacuse of the js rotation script. Container Divs, not actual images! */
	position:relative;
	left:-5px;
	width:240px;
	width:75%;
	height:170px;
	/*height:auto;*/
	/*height:54%;*/
	/*height:52%;*/
	margin:auto;
	margin-top:10px;
	border:0px solid magenta;
	overflow:hidden;
	}


.productionViewport ,  /* The viewport through which the images are displayed */
.stagingViewport, 
.structuresViewport,
.dryhireViewport { /* These must remain specifically named beacuse of the js rotation script. Container Divs, not actual images! */
	position:relative;
	left:-5px;
	width:240px;
	width:80%;
	height:170px;
	height:160px;
	/*height:auto;*/
	/*height:54%;*/
	/*height:52%;*/
	margin:auto;
	margin-top:10px;
	overflow:hidden;
	/*border:1px solid magenta;*/  /* DEV only */
	}
	
.homepage ul img { /* This is sizing the actual images within the container divs */
	width:240px; /* Maintain image size */
	/*width:100%;*/
	/*width:75%;*/
	height:160px; /* Specify as some images are a bit short so need stretched to fill the space */
	/*height:100%;*/
	border:0px solid cyan;
	}
	
.productionViewport ul li,
.stagingViewport ul li,
.structuresViewport ul li,
.dryhireViewport ul li {
    font-size:0.5em;
}


.strapline {  /* The strapline at the foot of each button */
	 position:absolute;
	 display:block;
	 bottom:0px;
	 color:#ffffff;
	 /*margin-top:7px;*/
	 width:260px;
	 width:75%;
	 left:25px;
	 font-size:0.5em;
	 letter-spacing:0.05em;
	 padding-bottom:5px;
	 /*border:1px dotted yellow;*/  /* DEV only */
	 }


/* BUTTON IMAGE ROTATION //////////////////////////////////////////////////////////// */

/* rotator in-page placement */
    div.rotator {
	position:relative;
	height:345px;
	margin-left: 15px;
	display: none;
}
/* rotator css */
	/*div.rotator ul li {*/
	.productionViewport ul li, 
	.stagingViewport ul li,
	.structuresViewport ul li, 
	.dryhireViewport ul li {
	/*float:left;*/
	position:absolute; /* This is key as they have to hit the same spot */
	list-style: none;
}
/* rotator image style */	
	div.rotator ul li img {
	border:1px solid #ccc;
	padding: 4px;
	background: #FFF;
}
    .productionViewport ul li.show,
	.stagingViewport ul li.show,
	.structuresViewport ul li.show, 
	.dryhireViewport ul li.show {
	z-index:90
}




/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ END HOME PAGE ////////////////////////////////// */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ END HOME PAGE ////////////////////////////////// */