body
{
	/*background-color: blue;*/
	background-color: transparent;
    
	margin:0px;
	padding:0px;
	    
    font-size: 20px;
    line-height: 1.2;
	
	/* no space before paren */
	--main-background-image: url("images/goettingen.1.jpg");
	--light-background-image: url("images/goettingen.6.jpg");
	--text-background-image: url("images/faded.1.jpg");
	--text-background-image_: url("images/yangtze.jpg");
	
	--min-text-width: 300px;
	--max-text-width: 600px;
	
	/* semi-colon required after px */
	--min-width-A: 1800;
	--min-width-B: 250;
	--min-width-C: 750px;
	--min-width-D: 630;
	--min-width-E: 100;
	--min-width-F: 630;
	--min-width-G: 250;
	--min-width-H: 630;
	--min-width-I: 250;
	--min-width-J: 50;
	
}

 .title-frame
 {
	 /*background-color: yellow;*/
	 /*top: 300px;*/
	 margin-top: 150px;
	 width: 400px;
	 height: 70px;
 }

 .title-frame-1
 {
	 margin-top: 150px;
	 width: 400px;
	 height: 70px;
 }


.fixed-bg {

	background-image: var(--main-background-image);

  min-height: 1500px;
  /*min-width: 1800px;*/
	min-width: var(--min-width-A);

  background-attachment: fixed;

  /* Center the background image */
  /*background-position: center;*/
  background-position: 100 200;
  background-repeat: no-repeat;

  /* Scale the background image to be as large as possible */
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}



.fixed-bg-text1 {
	background-image: var(--main-background-image);

  /*min-height: 20000px;*/
  /**/
  /*min-height: 1400px;*/
  min-height: 1500px;
  /*min-width: 1800px;*/
	
	/*margin-right: 250;*/

  background-attachment: fixed;
  /*background-position: center;*/
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  
  /*position: relative;*/
  position: fixed;
  /*width: 80%;*/
  width: 100%;
  
  z-index:0;
  
/*    animation: animatedBackground 4s linear infinite;
    -webkit-animation: animatedBackground 4s linear infinite;  */
	
    /*-webkit-animation-name: fadeOutAnim;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 4s;*/
	/*-webkit-animation-fill-mode: forwards;*/
}


.fixed-bg-text {
  /* no space before paren */
	background-image: var(--text-background-image);

  /*min-height: 20000px;*/
  /**/
  /*min-height: 1000px;*/
  min-height: 1500px;
  /*min-width: 1800px;*/


	/*margin-right: 250;*/

  background-attachment: fixed;
  /*background-position: center;*/
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  
  z-index:999;
  
/*    animation: animatedBackground 4s linear infinite;
    -webkit-animation: animatedBackground 4s linear infinite;  */
	
    -webkit-animation-name: fadeInAnim;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
    
	/*-webkit-animation-delay: 5s;*/

}

@-webkit-keyframes fadeInAnim {
    0% {opacity: 0;}
    /*20% {opacity: 0.2;}
    40% {opacity: 0.4;}
    60% {opacity: 0.6;}
    80% {opacity: 0.8;}*/
    100% {opacity: 1;}
}

@-webkit-keyframes fadeOutAnim {
    0% {opacity: 1;}
    100% {opacity: 0; z-index:0}
}

#fader {
    -webkit-animation-delay: 0s
}

#mainFader {
    -webkit-animation-delay: 0s
}


/* .img-container img
{    
  margin-left:-210;
  margin-right:0;
  margin-top:-60;
  width: 250%;
}
 */
 

.img-container
{    
	width: 850px;
	height: 200px;
	
	background-color: #EEDD44;
    /*position: absolute;
    height: 100%;
	width: 100%;*/
    z-index: 0;
}


.title-container
{
	margin-left: 50;
	padding: 5;
	position: fixed;
}
 
.title-container-1
{
	margin-left: 50;
	padding: 5;
	position: fixed;
}
 
.img-container img
{    
	/*width: 850px;*/
	/*height: 200px;*/
	
	background-color: #EEDD44;
    /*position: absolute;*/
    width: 100%;
    z-index: 0;
}


.img-container-abs img
{    
	background-color: #EEDD44;
    position: absolute;
    width: 100%;
    z-index: 0;
}


.content
{
	/*background-color: yellow;*/
    margin: 0 auto;
    margin-left:60;

    position: relative;
    /*width: 500px;*/
    z-index: 999;
	
	/*min-width: 750;*/
	/*min-width: 250;*/
	/*min-width: var(--min-width-B);*/
	min-height: 1000;
}


.text-content
{
	/*background-color: #EEDD44;*/
    margin: 0 auto;
	
    margin-top:55;
    /*margin-bottom:10;*/
    margin-left:80;
	
    /*margin-right:850;*/
    /*margin-right:1200;*/
    margin-right:2500;
	
	padding: 0;
	/*overflow-y:150;*/
	
    /*width: 50%;*/
	width: 80%;
	max-width: var(--max-text-width);
	height: 92%;
	
	/*min-width: 750px;*/
	/*min-width: 650px;*/
	/*min-width: var(--min-width-C);*/
	
	position: fixed;
	overflow-x: hidden;
	overflow-y: scroll;	

	/* Firefox */
	/*scrollbar-width: none;*/ 
	/* IE 10+ */
	/*-ms-overflow-style: none;*/  
	
	outline: none;
	
    /*position: relative;*/
    /*position: fixed;*/
    /*width: 500px;*/
    z-index: 999;
}



.text-content::-webkit-scrollbar {
  width: .3em;
}
 
.text-content::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05);
}
 
.text-content::-webkit-scrollbar-thumb {
	/*background-color: #fefaf4;*/
	background-color: #b5aaa1;
  
  /*outline: 1px solid slategrey;*/
  outline: 0px solid slategrey;

	border-radius: 10px;
}




.sectionLink
{
    font: 20px papyrus;
	font-style: italic;
	margin-left: 30;
}

.sectionLink2
{
    font: 20px papyrus;
	font-style: italic;
	margin-left: 50;
}

.leftFrame
{
	/*background-color: purple;*/
	width: 40%;
	height: 200px;
	/*min-width: 350px;*/
	float: left;
}

.rightFrame
{
	/*background-color: yellow;*/
	width: 55%;
	height: 200px;
	float: right;
	/*padding: 30;*/
	/*margin-right:50;*/
}

.summary
{
	/*background-color: yellow;*/
	font: 20px papyrus;
	font-style: italic;
	margin-left: 10;
	
	position: fixed;
	top: 60;
	width: 38%;
	/*min-width: 630px;*/
	min-width: var(--min-width-D);	
	height: 70px;
}

.contact
{
	/*background-color: orange;*/
	font: 20px papyrus;
	font-style: italic;
	
	position: fixed;
	bottom: 5%;
	right: 1%;
	width: 5%;
	/*min-width: 100px;*/
	min-width: var(--min-width-E);
	height: 20px;
}


.back
{
	/*background-color: orange;*/
	font: 20px papyrus;
	font-style: italic;
	color: red;
	
	position: fixed;
	top: 20;
	right: 1%;
	width: 50px;
	height: 15px;
	
	z-index: 0;
}


.references
{
	padding: 50;
}

a
{
	text-decoration: none;
	color: black;
}

h3
{
    font: 20px papyrus;
	font-style: italic;
	margin-left: 30;
	margin-top: 40;
}

p
{
    text-indent: 25px;
}

li
{
    text-indent: 30px;
}

section
{
    text-indent: 30px;
}

img
{
    max-width: 100%;
}


/*********************************************************************************************************/



@media only screen and (max-width: 1150px)		/* includes iPad landscape since 768 x 1024 */  
{
    body
	{
		/*background-color: yellow;*/
		background-color: transparent;
    }

	.summary
	{
		font: 18px papyrus;
		font-style: italic;
		margin-left: 10;
		
		position: fixed;
		top: 40;
		width: 38%;
		/*min-width: 630px;*/
		min-width: var(--min-width-F);
		/*height: 60px;*/
	}

	.title-frame
	{
		 margin-top: 100px;
		 width: 400px;
		 height: 70px;
	}

	.title-frame-1
	{
		 margin-top: 100px;
		 width: 400px;
		 height: 70px;
	}

	.leftFrame
	{
		/*background-color: purple;*/
		width: 30%;
		height: 200px;
		float: left;
	}

	.rightFrame
	{
		/*background-color: yellow;*/
		width: 62%;
		height: 200px;
		float: right;
	}

	.sectionLink
	{
		font: 18px papyrus;
		font-style: italic;
		margin-left: 30;
	}

	.sectionLink2
	{
		font: 17px papyrus;
		font-style: italic;
		margin-left: 50;
	}
	
	.fixed-bg-text1 {
		/*width: 90%;*/
		
		background-image: var(--main-background-image);
		/*min-height: 1000px;*/
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;  
		margin-bottom:150px;
		z-index:999;
  
		-webkit-animation-name: fadeInAnim;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-duration: 2s;
		-webkit-animation-fill-mode: forwards;		
	}
	
	
	.text-content
	{
		margin: 0 auto;	
		margin-top:55;
		
		/*margin-left:80;	
		margin-right:850;*/
		
		/*margin-left:60;*/
		margin-left:80;	
		margin-right:2500px;
		padding: 0;
		/*height: 92%;*/
		height: 88%;
		width: 80%;
		max-width: var(--max-text-width);
		min-width: var(--min-text-width);
		/*min-width: var(--min-width-G);*/
		/*margin-bottom:100px;*/
		
		position: fixed;
		overflow-x: hidden;
		overflow-y: scroll;

		/* Firefox */
		/* scrollbar-width: none; */
		/* IE 10+ */	
		/* -ms-overflow-style: none; */
		outline: none;	
		z-index: 999;
	}

	.back
	{
		font: 20px papyrus;
		font-style: italic;
		color: red;
		
		position: fixed;
		top: 10;
		right: 1%;
		width: 50px;
		height: 15px;
		
		z-index: 0;
	}

		
}



/*********************************************************************************************************/



@media only screen and (max-width: 850px)		/* includes iPad portrait, 850 not 800 even though 768 x 1024 */
{
    body
	{
		/*background-color: orange;*/
		background-color: transparent;
    }

	.summary
	{
		/*background-color: yellow;*/
		font: 20px papyrus;
		font-style: italic;
		margin-left: 10px;
		
		position: fixed;
		top: 60;
		width: 38%;

		/*min-width: 630px;*/
		min-width: var(--min-width-H);

		height: 70px;
	}
	
	.title-frame
	{
		 margin-top: 150px;
		 width: 400px;
		 height: 70px;
	}	
	
	.title-frame-1
	{
		 margin-top: 150px;
		 width: 400px;
		 height: 70px;
	}	
	
	.leftFrame
	{
		/*background-color: pink;*/
		background-color: transparent;
		width: 40%;
		height: 200px;
		float: left;
	}

	.rightFrame
	{
		/*background-color: purple;*/
		background-color: transparent;
		width: 55%;
		height: 200px;
		float: right;
	}	
	
	.sectionLink
	{
		/*font: 20px papyrus;*/
		font: 18px papyrus;
		font-style: italic;
		margin-left: 30px;
	}

	.sectionLink2
	{
		/*font: 20px papyrus;*/
		font: 17px papyrus;
		font-style: italic;
		margin-left: 50px;
	}
	
	.fixed-bg-text1 {
		margin-right: 100px;
		width: 100%;
		
		background-image: var(--main-background-image);
		min-height: 1000px;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;  
		z-index:999;
  
		-webkit-animation-name: fadeInAnim;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-duration: 2s;
		-webkit-animation-fill-mode: forwards;		
	}
	
	.fixed-bg-text {
		background-image: var(--text-background-image);

	  min-height: 1000px;

	  background-attachment: fixed;
	  /*background-position: center;*/
	  background-repeat: no-repeat;
	  background-size: cover;
	  
	  z-index:999;
	  
	/*    animation: animatedBackground 4s linear infinite;
		-webkit-animation: animatedBackground 4s linear infinite;  */
		
		-webkit-animation-name: fadeInAnim;
		-webkit-animation-iteration-count: 1;
		-webkit-animation-duration: 2s;
		-webkit-animation-fill-mode: forwards;
	}
	
	
	.text-content
	{
		margin: 0 auto;	
		margin-top:55px;
		
		/*margin-left:80;	
		margin-right:850;*/
		
		/**/
		margin-left:80;	
		margin-right:50;
		/*margin-left:100px;	
		margin-right:100px;*/
		padding: 0;
		/*height: 92%;*/
		height: 90%;
		/*min-width: 750px;*/

		/*min-width: 250px;*/
		min-width: var(--min-text-width);
	
		position: fixed;
		overflow-y: scroll;

		/* Firefox */
		/* scrollbar-width: none; */
		/* IE 10+ */
		/* -ms-overflow-style: none; */
		outline: none;	
		z-index: 999;
	}
		
	.back
	{
		/*background-color: orange;*/
		font: 20px papyrus;
		font-style: italic;
		color: red;
		
		position: fixed;
		top: 20;
		right: 1%;
		width: 50px;
		height: 15px;
		
		z-index: 0;
	}
		
}




/*********************************************************************************************************/

/* includes iPhone landscape */
/*@media only screen and (max-width: 700px)*/
@media only screen and (max-width: 601px)
/*@media only screen and (max-width: 1px)*/
{
    body
	{
		/*background-color: pink;*/
		background-color: transparent;

		/**/
		/*
		margin-top:10px;
		margin-bottom:10px;
		margin-left:5px;
		margin-right:5px;
		padding:5px;
		*/
		
		/*width: 350px;*/
		
		/*width: 100%;
		line-height: 1;*/
    }
	

	.summary
	{
		/*background-color: red;*/
		font: 20px papyrus;
		font-style: italic;
		margin-left: 10;
		
		position: relative;
		top: 10;
		min-width: 50px;
		height: 50px;
		width: 95%;
	}

	.title-frame
	{
		 margin-top: 50px;
		 /*margin-bottom: 60px;*/
		 width: 350px;
		 height: 80px;
	}
	
	.title-frame-1
	{
		 margin-top: 50px;
		 /*margin-bottom: 60px;*/
		 /*width: 380px;*/
		 width: 100%;
		 height: 100px;
	}
		
	.title-container
	{
		/*background-color: navy;*/
		margin-left: 5px;
		margin-top: 0px;
		padding: 5px;
		position: fixed;
		top: 3;
		width: 300;
		height: 60;
		z-index: 99;
	}
	
	.title-container-1
	{
		/*background-color: yellow;*/
		margin-left: 5px;
		margin-top: 0px;
		padding: 5px;
		position: fixed;
		top: 5;
		width: 550;
		height: 60;
		z-index: 99;
	}
	
	.title-container-1 img
	{
		max-width: 100%;
		max-height: 100%;
	}

/*	.fixed-bg {
		background-image: var(--main-background-image);
		min-height: 0;

		background-attachment: none;*/

		/*background-position: 500 500;
		background-repeat: 2;*/

		/*background-position: 0 0;*/


/*		background-size: cover;
	}*/

	
	.fixed-bg-text1 {
		background-image: var(--main-background-image);
		background-attachment: none;
		background-repeat: 2;
		background-size: cover;

		position: relative;
		/*margin-top: 50px;*/
		margin-left:0;
		width: 670px;
		height: 1600;
	}

	.fixed-bg-text {
		background-image: var(--text-background-image);
		position: relative;
		/*margin-left:10px;*/
		width: 645px;
	}	


	.text-content
	{
		/*background-color: navy;*/
		font: 20px arial;

		margin: 0 auto;
		
		margin-top:60px;

		/**/
		/*margin-left:5px;
		margin-right:100px;*/

		margin-left:60;	
		margin-right:50;
		
		padding: 5;
		width: 590px;
		z-index: 0;
	}	


	.content
	{
		margin: 0 auto;
		margin-left:5;

		position: relative;
		z-index: 999;
		
		/*min-width: 750;*/
		/*min-height: 3000px;*/
		/*height: 1650px;*/
		/*height: 1600px;*/
		width: 100%;
	}
	
	.leftFrame
	{
		/*background-color: lightgreen;*/
		width: 100%;
		height: 700px;
		float: none;
	}

	.rightFrame
	{
		/*background-color: yellow;*/
		width: 100%;
		height: 200px;
		float: none;
		/*padding: 30;*/
		/*margin-right:50;*/
	}

	.contact
	{
		/*background-color: orange;*/
		font: 20px papyrus;
		font-style: italic;
		
		position: relative;
		/*position: fixed;*/
		/*bottom: none;
		right: none;
		width: none;*/
		min-width: 100px;
		height: 20px;
		
		top: 420px;
		left: 250px;
	}
}



/*********************************************************************************************************/

/* includes iPhone portrait */
@media only screen and (max-width: 600px)			
{

    body
	{
		/*background-color: green;*/
		background-color: transparent;

		/*width: 350px;*/
		width: 100%;
		line-height: 1;

		/**/
		margin-left: 0;
		margin-right: 0;
		margin: 0 auto;
		min-width: 0;
    }

/*	.content
	{
		margin-top: 0;
	}
*/	
	.summary
	{
		/*background-color: orange;*/
		font: 14px papyrus;
		font-style: italic;
		/*margin-left: 5%;*/
		width: 75%;
		height: 75px;
		
		left: 25;
		top: 30;
		min-width: 100px;
		
		position: relative;
	}	

	.title-frame
	{
		margin-left: 25px;
		margin-top: 50px;
		width: 400px;
		height: 70px;
	}
	
	.title-frame-1
	{
		 margin-top: 90px;
		 /*width: 380px;*/
		 width: 100%;
		 height: 50px;
	}
	
	.title-frame-1 img
	{
		max-width: 100%;
		max-height: 100%;
	}

	.title-container
	{
		margin-left: 5;
		/*width: 300;
		height: 50;*/
	}
		
	.title-container-1
	{
		width: 300px;
		margin-left: 5;
		top: 15;
	}
		
	.title-container img
	{
		max-width: 100%;
		max-height: 100%;
	}

	.text-content
	{
		/*font: 20px arial;*/
		font: 17px arial;
		width: 340px;

		/**/
		margin: 0 auto;
		margin-left: 0;
		margin-right: 0;
		min-width: 0;
	}
	
	.fixed-bg-text1 {
		/*width: 375px;*/
		/*width: 480px;*/
		width: 100%;
		
		/**/
		margin: 0 auto;
		margin-left: 0;
		margin-right: 0;
		min-width: 0;
	}

	.fixed-bg-text {
		/*background-image: var(--text-background-image_);*/
		/*background-image: var(--main-background-image);*/
		background-image: var(--light-background-image);
		/*width: 355px;*/
		/*width: 480px;*/
		width: 100%;
		/**/
		height: 100%;

		/**/
		margin: 0 auto;
		margin-left: 0;
		margin-right: 0;
		min-width: 0;
	}		
	
	/**/
	.text-content
	{
		width: 95%;
		/*width: 240px;*/
		/*margin: 0 auto;*/
		margin-left:20;
		margin-right:20;
		margin-top:50;
		min-width: 0;
		/*overflow: hidden;*/

		padding: 0;
		position: fixed;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.text-content::-webkit-scrollbar {
	  width: .5em;
	}
	
	.text-content::-webkit-scrollbar-thumb {
	  /*background-color: #fefaf4;*/
	  background-color: #e0b982;
	  /*outline: 1px solid slategrey;*/
	  outline: 0px solid slategrey;
	}
}