*{		margin: 0;
		padding: 0;
}

body {	min-height: 100vh;
	font-family: sans-serif;
	font-size: 13px;
	border: 0px solid #bf0000;
	background-color: #f0f0f0;
}

/*arranges the navigation links e.g. links to all the other pages*/
navbar ul {	position: relative;
		width: 100%;
		list-style: none;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color: #ffffff;
}
/*sets the height of the navigation links e.g. links to all the other pages*/
navbar li {	height: 50px;
}

/*styles the navigation links e.g. links to all the other pages*/
navbar a {	height: 100%;
		padding: 0 30px;
		text-decoration: none;
		display: flex;
		align-items: center;
		color: black;
}

/*highlights the link for the current page being diplayed in the pageload div*/
navbar a.highlite
	{	background-color: #f0f0f0;
		color: black;
}

/*formats the logo in the navigation bar*/
navbar li:first-child{	margin-right: auto;
}

/*changes the color of a links background when hovered over*/
navbar a:hover {background-color: #f0f0f0;
}

/*styles and hides the sidebar that appears when the screen shrints to a certain size*/
.sidebar{	position: fixed;
		top: 0;
		right: 0;
		height: 100vh;
		width: 250px;
		z-index: 999;
		background-color: rgba(255,255,255, 0.2);
		backdrop-filter: blur(10px);
		box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
		display: none;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
}

/*styles the links on the sidebar that appear when the screen shrints to a certain size*/
.sidebar li{width: 100%;}
.sidebar a{width: 100%;}

/*styles the menu button on the sidebar that appears when the screen shrints to a certain size*/
.menu-button{
display: none;
}

/*detects when the screen is a certain size and therefore when to hide the sidebar*/
@media(max-width: 800px){
.hideonmobile{display: none;
}

/*styles the menu button on the sidebar*/
.menu-button{
display: block;}
}

/*detects when the screen is a certain size and therefore when to show the sidebar*/
@media(max-width: 400px){
.sidebar{width: 100%;}
}		

/*holds the title text on the home page*/
h1 {		font-size: 35px;
		color: #73787c;
		padding: 60px 0px 0px 0px;
		max-width: fit-content;
		margin-inline: auto;
}
/*formats the subheading text on the home page*/
h2 {		font-size: 14px;
		color: #73787c;
		padding: 0px 0px 30px 0px;
		max-width: fit-content;
		margin-inline: auto;
}

/*creates buttons for product information on the gallery pages to be displayed in a popup box on hover, e.g. Print Quality.*/
.probutton {	position: relative;
		padding: 14px 10px 10px 10px;
		margin: 5px 25px 0px 0px;
		width: 90px;
		height: 16px;
		border: 0px solid #bbb;
		border-radius: 4px;
		text-align: center;
		color: #94acc2;
		font-size: 14px;
		font-weight: bold;
		cursor: default;
		float: left;
		line-height: 10px;
}
/*creates a box to display popup text for 'Print Quality' on the gallery pages and sets it to invisible*/
.propopup {	position: absolute;
		top: 40px;
		left: -20px;
		width: 300px;
		background-color: #ffffff;
		color: #94acc2;
		padding: 20px;
		border-radius: 8px;
		border: 1px solid #bbb;
		text-align: left;
		font-size: 12px;
		visibility: hidden;
		opacity: 0;
		line-height: 16px;
}
/*triggers the product buttons popup boxes to become visible when they are hovered over e.g. Print Quality*/
.probutton:hover .propopup{visibility: visible; opacity: 1;
		z-index: 1;}

/*holds the chevrons that scroll through the colour gallery*/
.cheader_chevron {height: auto;
		padding: 30px 0px 15px 0px;
		max-width: fit-content;
		margin-inline: auto;
		border: 0px solid #ff0000;
}
/*holds the probuttons for the colour gallery*/
.cpro		{display: inline-block;
		width: 447px;
		height: 50px;
		padding: 0px 0px 0px 20px;
		margin: 0px 0px 0px 85px;
		border: 0px solid #ff0000;
}
/*holds the chevrons that scroll through the monochrome gallery*/
.mheader_chevron {height: auto;
		padding: 30px 0px 15px 0px;
		max-width: fit-content;
		margin-inline: auto;
		border: 0px solid #ff0000;
}
/*holds the probuttons for the monochrome gallery*/
.mpro		{display: inline-block;
		width: 440px;
		height: 50px;
		padding: 0px 0px 0px 0px;
		margin: 0px 0px 0px 55px;
		border: 0px solid #ff0000;
}
/*creates the left arrow that scrolls through the galleries*/
.lchevron {
	--s: 50%; /* control the shape (can be percentage) */
	display: inline-block;
	margin: 0px 0px 0px 20px; /*moves chevron left or right*/
	height: 40px;
	float: left;
	aspect-ratio: 4/5;
	clip-path: polygon(100% 0,calc(100% - var(--s)) 0,0 50%,calc(100% - var(--s)) 100%,100% 100%,var(--s) 50%);
	background: #94acc2;
}

/*creates the right arrow that scrolls through the galleries*/
.rchevron {
	--s: 50%; /* control the shape (can be percentage) */
	display: inline-block;
	margin: 0px 20px 0px 0px; /*moves chevron left or right*/
	height: 40px;
	float: right;
	aspect-ratio: 4/5;
	clip-path: polygon(0 0,var(--s) 0,100% 50%,var(--s) 100%,0 100%,calc(100% - var(--s)) 50%);
	background: #94acc2;
}
			
/*frame that holds each pages contents in conjunction with the navigation link selected. Height and width are set to auto to enable it to use the height and width
set for each individual page in the 'loadp' script*/
#pageload{	max-width: fit-content;
		margin-inline: auto;
		border: 0px solid #ff0000;
}

/*controls the hover over purchase icons and their placement for the stock images*/
.purchase a.image {			;}
.purchase a .buyicon {			opacity: 0; width:0; height:0; border:0;}
.purchase a.image:hover .buyicon {	display: inline;
					position: relative;
					top: -50px;
					left: 20px;
					float: left;
					opacity: 1;
				   	cursor: default;}


/*The container that holds all content for the flowers gallery 4x4*/
.ccontainer {	width: 860px;
		height: auto;
		max-width: fit-content;
		margin-inline: auto;
		padding: 20px 20px 20px 20px;
		border: 0px solid #ff0000;
}

/*The container that holds all content for all other galleries 3x3*/
.mcontainer {	width: 655px;
		height: auto;
		max-width: fit-content;
		margin-inline: auto;
		padding: 20px 20px 20px 20px;
		border: 0px solid #ff0000;
}
/*The container that holds both the search box and search box title for the stock page*/
.container .search{	justify-content: space-between;
			padding: 10px 0px 10px 0px;
			border: 0px solid #ff0000;
			text-align: center;
}

/*The search box title for the stock page*/
.container .search h1{	width: 50%;
			height: 40px;
			margin: auto;
			letter-spacing: 1px;
}

/*The search box and format of text entered for the stock page*/
.container .search input{	width: 500px;
				height: 40px;
				margin: auto;
				padding: 5px 16px;
				background: transparent;
				border: 1px solid #000;
				font-size: 12px;
				letter-spacing: 0px;
				outline: none;
}

/*The color and weight of the 'hint' text in the search box for the stock page*/
.container .search input::placeholder{	color: black;
					font-weight: 500;
}

/*styles and places the image text in the div on the home page*/
.himagetext{	display: inline-block;
		width: 300px;
		font-size: 16px;
		font-weight: normal;
		color: #73787c;
		font-style: italic;
		text-align: center;
		text-wrap: wrap;
		border: 0px solid #000;
		padding: 50px 0px 0px 0px;
}

/*styles the images in the div on the home page*/
.himage{	display: inline-block;
		width: 270px;
		border: 5px solid #ffffff;
		border-radius: 25px;
		border-style: double;
		overflow: hidden;
}

/*centres the div on the homepage that the image text and images sit in*/
.autocentre{	max-width: fit-content;
		margin-inline: auto;
		border: 0px solid #000;
}

/*styles the buyflow text on the home page*/
.hbuyflow{	border: 0px solid #000;
		padding: 50px 0px 0px 0px;
		max-width: fit-content;
		margin-inline: auto;
}

/*holds the quote text for the home page*/
.hquote{	font-size: 18px;
		color: #73787c;
		text-align: center;
		max-width: fit-content;
		margin-inline: auto;
}

/*The container that holds all the image boxes for the stock gallery page*/
.sgallery {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(4,250px);
	grid-auto-rows: 200px;
}

/*The individual image boxes for the stock gallery page*/
.sgallery .item img {
	display: flex;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        transition: transform 0.3s;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*The dimensions for each item image for the stock gallery page*/
   .sgallery .item:first-child { grid-row: span 2; }
   .sgallery .item:nth-child(4n) { grid-row: span 2; }
	
/*The container that holds all the image boxes for the flower gallery page*/
.gallery01 {	display: grid;
		grid-row-gap: 10px;
		grid-column-gap: 20px;
		grid-template-columns: repeat(32, 200px);
		grid-auto-rows: auto;
		justify-content: start;
		align-items: start;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		border: 0px solid #bbb;
		grid-template-areas:
		"p1  p2  p3  p4  p13 p14 p15 p16  p25 p26 p27 p28  p36 p37 p38 p39  p48 p49 p50 p51  p60 p61 p62 p63  p72 p73 p74 p75  p84 p85 p86 p87"
		"p1  p5  p6  p4  p13 p17 p18 p16  p25 p29 p30 p28  p36 p40 p41 p39  p48 p52 p53 p51  p60 p64 p65 p63  p72 p76 p77 p75  p84 p88 p89 p87"
		"p7  p5  p8  p9  p19 p17 p20 p21  p31 p29 p32 p33  p42 p40 p43 p44  p54 p52 p55 p56  p66 p64 p67 p68  p78 p76 p79 p80  p90 p88 p91 p92"
		"p10 p11 p8 p12  p22 p23 p20 p24  p31 p34 p32 p35  p45 p46 p43 p47  p57 p58 p55 p59  p69 p70 p67 p71  p81 p82 p79 p83  p93 p94 p91 p95";
}

/*The placement for each item image in the flower gallery page*/
.gallery01 .item-01 {grid-area: p1;}
.gallery01 .item-02 {grid-area: p2;}
.gallery01 .item-03 {grid-area: p3;}
.gallery01 .item-04 {grid-area: p4;}
.gallery01 .item-05 {grid-area: p5;}
.gallery01 .item-06 {grid-area: p6;}
.gallery01 .item-07 {grid-area: p7;}
.gallery01 .item-08 {grid-area: p8;}
.gallery01 .item-09 {grid-area: p9;}
.gallery01 .item-10 {grid-area: p10;}
.gallery01 .item-11 {grid-area: p11;}
.gallery01 .item-12 {grid-area: p12;}

.gallery01 .item-13 {grid-area: p13;}
.gallery01 .item-14 {grid-area: p14;}
.gallery01 .item-15 {grid-area: p15;}
.gallery01 .item-16 {grid-area: p16;}
.gallery01 .item-17 {grid-area: p17;}
.gallery01 .item-18 {grid-area: p18;}
.gallery01 .item-19 {grid-area: p19;}
.gallery01 .item-20 {grid-area: p20;}
.gallery01 .item-21 {grid-area: p21;}
.gallery01 .item-22 {grid-area: p22;}
.gallery01 .item-23 {grid-area: p23;}
.gallery01 .item-24 {grid-area: p24;}

.gallery01 .item-25 {grid-area: p25;}
.gallery01 .item-26 {grid-area: p26;}
.gallery01 .item-27 {grid-area: p27;}
.gallery01 .item-28 {grid-area: p28;}
.gallery01 .item-29 {grid-area: p29;}
.gallery01 .item-30 {grid-area: p30;}
.gallery01 .item-31 {grid-area: p31;}
.gallery01 .item-32 {grid-area: p32;}
.gallery01 .item-33 {grid-area: p33;}
.gallery01 .item-34 {grid-area: p34;}
.gallery01 .item-35 {grid-area: p35;}
.gallery01 .item-36 {grid-area: p36;}

.gallery01 .item-37 {grid-area: p37;}
.gallery01 .item-38 {grid-area: p38;}
.gallery01 .item-39 {grid-area: p39;}
.gallery01 .item-40 {grid-area: p40;}
.gallery01 .item-41 {grid-area: p41;}
.gallery01 .item-42 {grid-area: p42;}
.gallery01 .item-43 {grid-area: p43;}
.gallery01 .item-44 {grid-area: p44;}
.gallery01 .item-45 {grid-area: p45;}
.gallery01 .item-46 {grid-area: p46;}
.gallery01 .item-47 {grid-area: p47;}
.gallery01 .item-48 {grid-area: p48;}

.gallery01 .item-49 {grid-area: p49;}
.gallery01 .item-50 {grid-area: p50;}
.gallery01 .item-51 {grid-area: p51;}
.gallery01 .item-52 {grid-area: p52;}
.gallery01 .item-53 {grid-area: p53;}
.gallery01 .item-54 {grid-area: p54;}
.gallery01 .item-55 {grid-area: p55;}
.gallery01 .item-56 {grid-area: p56;}
.gallery01 .item-57 {grid-area: p57;}
.gallery01 .item-58 {grid-area: p58;}
.gallery01 .item-59 {grid-area: p59;}
.gallery01 .item-60 {grid-area: p60;}

.gallery01 .item-61 {grid-area: p61;}
.gallery01 .item-62 {grid-area: p62;}
.gallery01 .item-63 {grid-area: p63;}
.gallery01 .item-64 {grid-area: p64;}
.gallery01 .item-65 {grid-area: p65;}
.gallery01 .item-66 {grid-area: p66;}
.gallery01 .item-67 {grid-area: p67;}
.gallery01 .item-68 {grid-area: p68;}
.gallery01 .item-69 {grid-area: p69;}
.gallery01 .item-70 {grid-area: p70;}
.gallery01 .item-71 {grid-area: p71;}

.gallery01 .item-72 {grid-area: p72;}
.gallery01 .item-73 {grid-area: p73;}
.gallery01 .item-74 {grid-area: p74;}
.gallery01 .item-75 {grid-area: p75;}
.gallery01 .item-76 {grid-area: p76;}
.gallery01 .item-77 {grid-area: p77;}
.gallery01 .item-78 {grid-area: p78;}
.gallery01 .item-79 {grid-area: p79;}
.gallery01 .item-80 {grid-area: p80;}
.gallery01 .item-81 {grid-area: p81;}
.gallery01 .item-82 {grid-area: p82;}
.gallery01 .item-83 {grid-area: p83;}

.gallery01 .item-84 {grid-area: p84;}
.gallery01 .item-85 {grid-area: p85;}
.gallery01 .item-86 {grid-area: p86;}
.gallery01 .item-87 {grid-area: p87;}
.gallery01 .item-88 {grid-area: p88;}
.gallery01 .item-89 {grid-area: p89;}
.gallery01 .item-90 {grid-area: p90;}
.gallery01 .item-91 {grid-area: p91;}
.gallery01 .item-92 {grid-area: p92;}
.gallery01 .item-93 {grid-area: p93;}
.gallery01 .item-94 {grid-area: p94;}
.gallery01 .item-95 {grid-area: p95;}

/*The individual image boxes for the flower gallery page*/
.gallery01 .item img {
	display:grid;
	padding: 7px;
        box-sizing: border-box;
        box-shadow: 0 6px 6px #d3d3d3;
        border-radius: 8px;
	width: 100%;
	height: 100%;
}


/*The container that holds all the image boxes for the architecture gallery*/
.gallery02 {	display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(3, 200px);
		grid-auto-rows: auto;
		justify-content: start;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		border: 0px solid #bbb;
		grid-template-areas:
		"m01 m02 m03"
		"m01 m04 m05"
		"m06 m04 m07"
		"m08 m09 m07";
}

/*The placement for each item image in the architecture gallery*/
.gallery02 .mitem-01 {grid-area: m01;}
.gallery02 .mitem-02 {grid-area: m02;}
.gallery02 .mitem-03 {grid-area: m03;}
.gallery02 .mitem-04 {grid-area: m04;}
.gallery02 .mitem-05 {grid-area: m05;}
.gallery02 .mitem-06 {grid-area: m06;}
.gallery02 .mitem-07 {grid-area: m07;}
.gallery02 .mitem-08 {grid-area: m08;}
.gallery02 .mitem-09 {grid-area: m09;}

/*The individual image boxes for the architecture gallery*/
.gallery02 .mitem img {
	display: grid;
        padding: 14px;
        box-sizing: border-box;
        box-shadow: 0 6px 6px #d3d3d3;
        border-radius: 8px;
	width: 100%;
	height: 100%;
}

/*The container that holds all the image boxes for the landscape gallery*/
.gallery03 {	display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(6, 200px);
		grid-auto-rows: auto;
		justify-content: start;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		border: 0px solid #bbb;
		grid-template-areas:
		"m01 m02 m03  m10 m11 m12"
		"m01 m04 m05  m10 m13 m14"
		"m06 m04 m07  m15 m13 m16"
		"m08 m09 m07  m17 m18 m16";
}

/*The placement for each item image in the landscape gallery*/
.gallery03 .mitem-01 {grid-area: m01;}
.gallery03 .mitem-02 {grid-area: m02;}
.gallery03 .mitem-03 {grid-area: m03;}
.gallery03 .mitem-04 {grid-area: m04;}
.gallery03 .mitem-05 {grid-area: m05;}
.gallery03 .mitem-06 {grid-area: m06;}
.gallery03 .mitem-07 {grid-area: m07;}
.gallery03 .mitem-08 {grid-area: m08;}
.gallery03 .mitem-09 {grid-area: m09;}

.gallery03 .mitem-10 {grid-area: m10;}
.gallery03 .mitem-11 {grid-area: m11;}
.gallery03 .mitem-12 {grid-area: m12;}
.gallery03 .mitem-13 {grid-area: m13;}
.gallery03 .mitem-14 {grid-area: m14;}
.gallery03 .mitem-15 {grid-area: m15;}
.gallery03 .mitem-16 {grid-area: m16;}
.gallery03 .mitem-17 {grid-area: m17;}
.gallery03 .mitem-18 {grid-area: m18;}

/*The individual image boxes for the landscape gallery*/
.gallery03 .mitem img {
	display: grid;
        padding: 14px;
        box-sizing: border-box;
        box-shadow: 0 6px 6px #d3d3d3;
        border-radius: 8px;
	width: 100%;
	height: 100%;
}

/*The container that holds all the image boxes for the abstract gallery*/
.gallery04 {	display: grid;
		grid-gap: 20px;
		grid-template-columns: repeat(3, 200px);
		grid-auto-rows: auto;
		justify-content: start;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		border: 0px solid #bbb;
		grid-template-areas:
		"m01 m02 m03"
		"m01 m04 m05"
		"m06 m04 m07"
		"m08 m09 m07";
}

/*The placement for each item image in the abstract gallery*/
.gallery04 .mitem-01 {grid-area: m01;}
.gallery04 .mitem-02 {grid-area: m02;}
.gallery04 .mitem-03 {grid-area: m03;}
.gallery04 .mitem-04 {grid-area: m04;}
.gallery04 .mitem-05 {grid-area: m05;}
.gallery04 .mitem-06 {grid-area: m06;}
.gallery04 .mitem-07 {grid-area: m07;}
.gallery04 .mitem-08 {grid-area: m08;}
.gallery04 .mitem-09 {grid-area: m09;}

/*The individual image boxes for the abstract gallery*/
.gallery04 .mitem img {
	display: grid;
        padding: 14px;
        box-sizing: border-box;
        box-shadow: 0 6px 6px #d3d3d3;
        border-radius: 8px;
	width: 100%;
	height: 100%;
}

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

/* Hide scrollbar for IE Edge and Firefox*/
.scroll2 {-ms-overflow-style: none; scrollbar-width: none;}

#footer{	border: 0px solid #000;
		max-width: fit-content;
		margin-inline: auto;
}