@charset "utf-8";
/* CSS Document */

/* 2024 */
.content_wrapper {
/**/position:relative;
/**/width:100%;
/**/height:auto;
/**/overflow-y :hidden;
/**/overflow-x: hidden;
/**/cursor: grab;
/**/background-color:#FFF;
/**/}

.content_wrapper::-webkit-scrollbar {
/**display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.top_inline_pushdown { /* pushes the content down, below the <header> (absolute) - top movie - 130px + - nav 30px */
/**/display:flex;
/**/flex:1 ;
/**/overflow: hidden;
/**/min-height: 0px; /* 0/30px - controlled by JS_navigation.js*/
/**/max-height: 160px; /* 160/30px - controlled by JS_navigation.js*/
/**/width: 100%;
/**/}

.outer_flex_container {
position: relative;
/**/display:flex;
/**/flex-direction:row;
/**/background: #FFF;
/**height:600-750px; /* set by js */
/**width:+100%; /* set by js */
/**border:1px solid orange;
/**/}

.page {
/**position: relative;
/**/flex:1 ;
/**aspect-ratio: 9 / 6;   /* choose your ratio */
/**max-height:600px;       /* desktop cap */
/**flex-direction:;  /* set by js */
/**width:;  /* set by js */
/**height:auto;
/**border:1px solid #F2F2F2;
/**/}
	
.blank_item {
/**/flex:1 ;
/**width:100%;
/**/height:auto;
/**border:1px solid green;
/**/}	

.grid_container{ /* PAGE - generic settings */
/**/position: relative;
/**/display: grid;
/**background: #FFF;
/**min-width: 700px; /* set by js */
/**max-width: 900px; /* set by js */
/**max-height: 600px; /* set by js */
/**border: 1px solid blue;
/**/height:auto;
/**/}

	.grid_item {
	/**border: 1px solid #DBDBDB;
	/**/flex:1 ;
	/**/display:grid; 
	/**/place-items:center; 
	/**/width:100%;
	/**height:auto;
	/**/}
	
		
		.flex_column {
		display: flex;         /* Establishes a flexbox container, enabling the use of flex properties */
		flex-direction: row; /* Sets the flex-direction to column, stacking children vertically */
		justify-content: center; /* Aligns children along the main axis (here vertical), centering vertically */
		align-items: center;   /* Aligns children along the cross axis (here horizontal), centering horizontally */
		overflow: hidden;      /* Clips any child content that overflows the element's box */
		}
		
		.flex_row {
		display: flex;         /* Establishes a flexbox container, enabling the use of flex properties */
		flex-direction: column; /* Sets the flex-direction to column, stacking children vertically */
		justify-content: center; /* Aligns children along the main axis (here vertical), centering vertically */
		align-items: center;   /* Aligns children along the cross axis (here horizontal), centering horizontally */
		overflow: hidden;      /* Clips any child content that overflows the element's box */
		}

		.cover_flex_row {
		display: flex;         /* Establishes a flexbox container, enabling the use of flex properties */
		justify-content: center; /* Aligns children along the main axis (here vertical), centering vertically */
		align-items: center;   /* Aligns children along the cross axis (here horizontal), centering horizontally */
		width:fit-content; 
		height: fit-content;
		}

		.flex_image_undertext { /*max-width - allows Flex , max-height:px sets height */
		max-width: 100%; /* Ensures the image is responsive and scales down */
		max-height: 95%; /* allows for under writing*/
		}
		
		.flex_image_undertext_90 { /*max-width - allows Flex , max-height:px sets height */
		max-width: 100%; /* Ensures the image is responsive and scales down */
		max-height: 90%; /* allows for under writing*/
		}
		
.JS_maxheight_image{ /*max-width - allows Flex , max-height:px sets height of image-  eOuterFlexContainer.style.maxHeight = '600px'; JS_page.js */
max-width: 100%; /* Ensures the image is responsive and scales down */
/**max-height: 800px; /* initial set by js JS_page.js - switch / G_genericName*/ 
}
	
.JS_height_row{
/**height:600px; /*set by js JS_page.js - switch / G_genericName*/
}

.pages_padding {padding:0 0 0 0;}

  .margin_section {margin:0 0 0 0;}
  
  .padding_page {padding:2vh 4vw 2vh 4vw;}
  
  .padding_header {padding:2vh 2vw 2vh 2vw;}
  
  .padding_text {padding:0 2vw 0 2vw;}
  
  .left_edge {border-left: 1px solid #CCC;}
  .right_edge {border-right: 1px solid #CCC;}



.center_text{
    display: grid;
    place-items: center; /* Centers content both vertically and horizontally */
	text-align:center;
}

.grid_item_centre{
	position:absolute;
	left: 75%;
	display: block;
    margin-left: auto;
    margin-right: auto;/* Centers content both vertically and horizontally */
}

.right_text{
    display: grid;
    place-items: center; /* Centers content both vertically and horizontally */
	text-align:right;
}

.V_align{
    display: grid;
    align-self:center; /* Centers content both vertically and horizontally */
}



figure{
/**/margin:0 0 0 0;
/**/padding:0 0 0 0;
/**/}

figcaption{
/**/width:100%;
/**/text-align:center;
/**/}

.large_img_format {display:block; margin:0 auto; }

.image_format {border:1px solid #323232; box-shadow:3px 3px 5px rgba(50, 50, 50, .5); display:block; margin:0 auto; }

.image_border {border:1px solid #323232; }

img .image_width{width:auto;}

.cover_text_topImage{ position:absolute; top:15px; border:0px dashed lightblue; z-index:10;}
.cover_text_underImage{ position:absolute; top:570px; border:0px dashed lightblue; z-index:10;}

.text_topImage{ position:absolute; top:1vw; border:0px dashed lightblue;}

.text_underImage{ position:absolute; bottom:1vw; border:0px dashed lightblue;}

.text_centreImage{ position:absolute; top:50%; border:0px dashed lightblue;}

.border_right{
/**/border-right:solid 1px #EAEAEA
}
.border_left{
/**/border-left:solid 1px #EAEAEA
}

.text_vertical h1{
	vertical-align:middle;
/**/text-align:center;
/**/transform: rotate(270deg);
/**/width:600px; /* becomes the column width /
/**/height:auto; /* lets it expand downward */
}