/***************************************
* Below are all the div styles
*/


div.boxes  {background: none;border: 1px solid transparent;}
div.boxes p  {font-size: 1.2em;margin: 1em 4em 1em 4em;}
div.boxes h2 {margin: 2em 2em 1em 2em;}
div.boxes h3 {margin: 2em 2em 1em 2.3em;}
div.boxes h4 {margin: 2em 2em 1em 2.8em;}
div.boxes h5 {margin: 2em 2em 1em 4em;}
div.boxes ul {margin: 1em 4em 1em 4em;padding-left: 2em;color: var(--foreground-text);}

@media 	(min-resolution: 0.9dppx) and  (max-width: 682px),
		(min-resolution: 1.4dppx) and  (max-width: 1024px),
		(min-resolution: 1.9dppx) and  (max-width: 1365px),
		(min-resolution: 2.9dppx) and  (max-width: 2048px),
		(min-resolution: 3.9dppx) and  (max-width: 2730px)
	{
	div.boxes  {background: none;border: 1px solid transparent;}
	div.boxes p  {font-size: 1em;margin: 1em 2em 1em 2em;}
	div.boxes h2 {margin: 2em 1em 1em 1em;}
	div.boxes h3 {margin: 2em 1em 1em 1.3em;}
	div.boxes h4 {margin: 2em 1em 1em 1.4em;}
	div.boxes h5 {margin: 2em 1em 1em 2em;}
	div.boxes ul {margin: 1em 1em 1em -4em;padding-left: 0em;color: var(--foreground-text);}
	div.boxes li {margin: 0 1em 0 -3em;padding-left: 0em;color: var(--foreground-text);}
	}



/*The style for unordered lists*/
div.boxes ul
	{
	margin: 0.5em 2em 0.5em 6em;
	color: var(--foreground-text);
	background: none;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	list-style-type: disc;
	/*list-style-type: circle;*/
	/*list-style-type: square;*/
	/*list-style-image: url(image.png);*/
	}

div.boxes ul>li>ul
	{
	margin: 0.5em 0 0.5em 0.5em;
	color: var(--foreground-text);
	background: none;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	list-style-type: disc;
	/*list-style-type: circle;*/
	/*list-style-type: square;*/
	/*list-style-image: url(image.png);*/
	}

div.boxes ul.left li { margin-left:1em; }
div.boxes ul.right li { margin-left:calc(50% + 3em); }


div.all {margin: 0em;padding: 2em 2em 4em 2em;}
div.right {background:#fff;margin: 0em;padding: 0em;/*border: 0.1px solid white;*/}
div.left {background:#fff;margin: 0em;padding: 0em;}
div.wide {margin: 0em;padding: 0;}


div.all>a.credit {font-size: 70%;color: white;position: absolute;left: 8em;margin: calc(16.5% - 2em) 1em 0 0;}
div.right>a.credit {font-size: 70%;color: white;position: absolute;right: 1em;}/*margin: calc(33% - 2em) 1em 0 0;}*/
div.left>a.credit  {font-size: 70%;color: white;position: absolute;left: 1em;margin: calc(33% - 2em) 1em 0 0;}
div.wide>a.credit  {font-size: 70%;color: white;position: absolute;left: 1em;margin: calc(16.5% - 2em) 1em 0 0;}


div.all>img {float: left;margin: 2em 4em 2em 4em;width: calc(100% - 8em);}
div.right>img {position: relative;float: right;margin:-2px -2px -2px 4em;width:calc(50% + 1px);}
div.left>img{float: left;margin:-2px 4em -2px -2px;width:calc(50% + 1px);}
div.wide>img {float: left;margin: -2px;width: calc(100% + 2px);}


div.photo {width: 50%;}
div.photo>img {width: 100%;}
div.photo>a.credit  {font-size: 70%;color: white;position: absolute; margin: -2em 1em 0 1em;}

div>span.credit  {font-size: 70%;color: white;position: absolute; margin: -2em 1em 0 1em;}

/*@media all and (max-width: 495px) /*When the width is over 495px*/
/*div.container>a.credit {font-size: 50%;color: white;position: absolute;bottom: 4em;left: 1em;border: 3px solid green;z-index:10000;}*/




.image-container 
	{
    position: relative; /* Positioning context for the absolute-positioned link */
    display: inline-block; /* Wraps tightly around the image */
	margin: -2px -0px -1em -2px; 
 
}

.image-container img 
	{
    display: block; /* Removes bottom margin from image */
    max-width: 100%; /* Ensures responsiveness */
    height: auto; /* Maintains aspect ratio */
	margin:-2px 0 -2px 0;
	padding:1px;
	background:black;
	 }

.image-containerRight 
	{
    position: relative; /* Positioning context for the absolute-positioned link */
    display: inline-block; /* Wraps tightly around the image */
	float: right; width: calc(50% - 6em); margin: 0em 4em 2em 4em;
	}

.image-containerRight img 
	{
    display: block; /* Removes bottom margin from image */
    max-width: 100%; /* Ensures responsiveness */
    height: auto; /* Maintains aspect ratio */
	margin:-2px 0 -2px 0;
	padding:1px;
	background:black;
	}

.image-containerLeft 
	{
    position: relative; /* Positioning context for the absolute-positioned link */
    display: inline-block; /* Wraps tightly around the image */
	float: left; width: calc(50% - 6em); margin: 0em 4em 2em 4em;
	}

.image-containerLeft img 
	{
    display: block; /* Removes bottom margin from image */
    max-width: 100%; /* Ensures responsiveness */
    height: auto; /* Maintains aspect ratio */
	margin:-2px 0 -2px 0;
	padding:1px;
	background:black;
	}








a.credit2 
	{
	position: absolute; 
	font-size: 70%; 
	bottom: 0em; 
	left: 1em; 
	background:none; 
	color: #888;
	}







div>img.half
	{
	width:25%;
	}



@media all and (max-width:  2080px)
	{
	div.left {font-size: 0.95vw;line-height:1.5vw;}
	div.right {font-size: 0.95vw;line-height:1.5vw;}
	}

@media all and (max-width: 1536px)
	{
div.boxes {line-height: 1.5em; font-size: 1em;}
	div.boxes ul {padding-left: 1em;}
	div.boxes p:nth-last-child(1)  {margin-bottom: 3em;}
	div.wide p:nth-last-child(1)  {margin-bottom: 0em;} /*Correction for weird anomaly!*/
	div.all {margin: 0em;padding: 0em 0em 1em 0em;}

	div.right>img {margin:-2px -0px 2em -0px;width:calc(100% + 2px);}
	div.left>img{margin:-2px -0px 2em -0px;width:calc(100% + 2px);}

	div.right>a.credit {margin: calc(66% - 2em) 1em 0 0;}
	div.left>a.credit  {margin: calc(66% - 2em) 1em 0 0;}

	div.boxes ul.left li { margin-left:1em; }
	div.boxes ul.right li { margin-left:1em; }


.image-containerRight 
	{
    position: relative; /* Positioning context for the absolute-positioned link */
    display: inline-block; /* Wraps tightly around the image */
	float: left; 
	width: calc(100% - 8em); 
	margin: 0em 4em 2em 4em;
	}

.image-containerLeft 
	{
    position: relative; /* Positioning context for the absolute-positioned link */
    display: inline-block; /* Wraps tightly around the image */
	float: left; 
	width: calc(100% - 8em); 
	margin: 0em 4em 2em 4em;
	}


	@media 	(min-resolution: 0.9dppx) and  (max-width: 682px),
			(min-resolution: 1.4dppx) and  (max-width: 1024px),
			(min-resolution: 1.9dppx) and  (max-width: 1365px),
			(min-resolution: 2.9dppx) and  (max-width: 2048px),
			(min-resolution: 3.9dppx) and  (max-width: 2730px)
		{
		div.boxes ul.left li { margin-left:-4em; }
		div.boxes ul.right li { margin-left:-4em; }

		.image-containerRight { width: calc(100% - 4em); margin: 0em 2em 2em 2em; }
		.image-containerLeft {width: calc(100% - 4em); margin: 0em 2em 2em 2em; }

		}


	} /*end media*/





div.dark
	{
	background: var(--background-text-2);
	}
div.dark > p
{
	color: var(--foreground-text-2);
	background: inherit;

}	


div.dark > ul li
{
	color: var(--foreground-text-2);
	background: inherit;

}
div.dark > h2
{
	color: var(--foreground-text-heading-2);
	background: inherit;
}


div.dark a
	{
	color: var(--foreground-text-link-2);
	}


div.dark a:visited
	{
	color: var(--foreground-text-link-visited-2);
	}


div.dark a:hover
	{
	color: var(--foreground-text-link-hover-2);
	}






/***************************************
* Below are all the image styles
*/
/*

div.thebanner
{
	width: 100%;
	overflow: clip;
}



img.thebanner  /*This defines the image style for images of class="thebanner"*/
	{
	display: block; /*ensures it is displayed without white-space between it and the next thing*/
	position: relative; /*This element’s position remains relative to the flow of the document*/
	padding: 0em ;
	border: 0px solid black;
	margin: 0;
	/*border-bottom: 4em solid var(--main-background); */      /*Defines the border bottom only*/
	left: calc( 50% - 1440px);
	}

img.logo  /*This defines the image style for images of class="thebanner"*/
	{
	display: inline-block; /*ensures it is displayed without white-space between it and the next thing*/
	position: relative; /*This element’s position remains relative to the flow of the document*/
	margin: 0em 0.7em 0em 0em;     /*Defines the space to be left before the edge*/
	vertical-align: -0.35em;
	width:1.414em;
	background: none;
	}

img.leftphoto
	{
	float: left;                   /*The image will be in the text and float to the left*/
	padding: 0;                    /*Defines the space to be left before the border*/
	border: 0px solid black;       /*Defines the border*/
	margin: 2em 4em 2em 0em;     /*Defines the space to be left before the edge*/
	width: 32em;                  /*The image will be scaled to a width of 200px*/
	background: none;
	}

img.rightphoto
	{
	float: right;                   /*The image will be in the text and float to the left*/
	padding: 0;                    /*Defines the space to be left before the border*/
	border: 0px solid black;       /*Defines the border*/
	margin: 2em 0 2em 4em;     /*Defines the space to be left before the edge*/
	width: 32em;                  /*The image will be scaled to a width of 200px*/
	background: none;@media 	(max-resolution: 1dppx) and  (max-width: 512px),
			(max-resolution: 1.5dppx) and  (max-width: 1024px),
			(max-resolution: 2dppx) and  (max-width: 1024px),
			(max-resolution: 3dppx) and  (max-width: 1536px),
			(max-resolution: 4dppx) and  (max-width: 2048px)

	}

img.centerphoto
	{
	float: center;                   /*The image will be in the text and float to the left*/
	padding: 0;                    /*Defines the space to be left before the border*/
	border: 0px solid black;       /*Defines the border*/
	margin: 4em 0 4em 0;     /*Defines the space to be left before the edge*/
	width: 100%;                  /*The image will be scaled to a width of 200px*/
	background: none;
	}

img.half
	{
	width: 50%;                  /*The image will be scaled to a width of 200px*/
	}

img.third
	{
	width: 33%;                  /*The image will be scaled to a width of 200px*/
	}









/* Bottom left text NEW*/
.bottom-left {position: absolute;bottom: 8px;left: 16px;}


/* Bottom right text NEW*/
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}




/***************************************
* Inline text styles
*/

/*display: inline; puts the element in the flow of the document*/

p {margin:0.5em 0 0.5em 0 ;background: none;}
p.clear {clear: both;}

n {background: none;}







/*The element generates a block box for the content and a separate list-item inline box.TODO*/
/*
li {display: list-item;background: none;color:green;}
*/




/***************************************
* Below are all the image styles
*/
/*

div.thebanner
{
	width: 100%;
	overflow: clip;
}



img.thebanner  /*This defines the image style for images of class="thebanner"*/
	{
	display: block; /*ensures it is displayed without white-space between it and the next thing*/
	position: relative; /*This element’s position remains relative to the flow of the document*/
	padding: 0em ;
	border: 0px solid black;
	margin: 0;
	/*border-bottom: 4em solid var(--main-background); */      /*Defines the border bottom only*/
	left: calc( 50% - 1440px);
	}

img.logo  /*This defines the image style for images of class="thebanner"*/
	{
	display: inline-block; /*ensures it is displayed without white-space between it and the next thing*/
	position: relative; /*This element’s position remains relative to the flow of the document*/
	margin: 0em 0.7em 0em 0em;     /*Defines the space to be left before the edge*/
	vertical-align: -0.35em;
	width:1.414em;
	background: none;
	}

img.leftphoto
	{
	float: left;                   /*The image will be in the text and float to the left*/
	padding: 0;                    /*Defines the space to be left before the border*/
	border: 0px solid black;       /*Defines the border*/
	margin: 2em 4em 2em 0em;     /*Defines the space to be left before the edge*/
	width: 32em;                  /*The image will be scaled to a width of 200px*/
	background: none;
	}

img.rightphoto
	{
	float: right;                   /*The image will be in the text and float to the left*/
	padding: 0;                    /*Defines the space to be left before the border*/
	border: 0px solid black;       /*Defines the border*/
	margin: 2em 0 2em 4em;     /*Defines the space to be left before the edge*/
	width: 32em;                  /*The image will be scaled to a width of 200px*/
	background: none;
	}

img.centerphoto
	{
	float: center;                   /*The image will be in the text and float to the left*/
	padding: 0;                    /*Defines the space to be left before the border*/
	border: 0px so@media 	(max-resolution: 1dppx) and  (max-width: 512px),
			(max-resolution: 1.5dppx) and  (max-width: 1024px),
			(max-resolution: 2dppx) and  (max-width: 1024px),
			(max-resolution: 3dppx) and  (max-width: 1536px),
			(max-resolution: 4dppx) and  (max-width: 2048px)
lid black;       /*Defines the border*/
	margin: 4em 0 4em 0;     /*Defines the space to be left before the edge*/
	width: 100%;                  /*The image will be scaled to a width of 200px*/
	background: none;
	}

img.half
	{
	width: 50%;                  /*The image will be scaled to a width of 200px*/
	}

img.third
	{
	width: 33%;                  /*The image will be scaled to a width of 200px*/
	}




@media 	(min-resolution: 0.9dppx) and  (max-width: 682px),
		(min-resolution: 1.4dppx) and  (max-width: 1024px),
		(min-resolution: 1.9dppx) and  (max-width: 1365px),
		(min-resolution: 2.9dppx) and  (max-width: 2048px),
		(min-resolution: 3.9dppx) and  (max-width: 2730px)
	{


img.logo { margin: 0em 0.7em 0em 0em; vertical-align: -0.35em; width:1.414em; }

img.leftphoto { margin: 2em 1em 2em 0em; width: 32em; }

img.rightphoto { margin: 2em 0 2em 1em; }

img.centerphoto { margin: 4em 0 4em 0; }

	}