@charset "UTF-8";/* CSS for LRHMaterials.com*/

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

* {
	box-sizing:border-box;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	/* Fix for pre "viewport <meta>" mobile browsers */
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

html, body {
	height:100%;
}

body, button, input, table, textarea, select {
	font:normal 1em/1.5 arial,helvetica,sans-serif;
}

body {
	font-size:1.2em;
	background:#000;
}

.styleConstraint {
	display:flex;
	flex-direction:column;
	min-height:100%;
	max-width:100em; /* Changed from 64em 15 Feb 2023 */
	margin:0 auto;
	background:#000000;

}

.styleConstraint > header,
.styleConstraint > footer {
	flex:0 0 auto;
}

.styleConstraint > footer {
	padding:1em;
	text-align:center;
	background:#000000;
	color:#FFF;
}

#arrow {
  position:fixed;
  z-index:1000;
  right:0;
  top:90%;
  max-width:70%;
}

.arrow {
  width:40%;
}

header {
  height:6em;
}

h1 {
	position:relative;
	display:flex;
  justify-content:center;
	top:2.5em;
	font-size:1.6em;
	font-family: arial, sans serif, helvetica;
}


h1 a {
	position:absolute;
	text-decoration:none;
	color:#FFF;
}

#mainMenu ul {
	list-style:none;
	text-align:right;
	background:#000000;
}

#mainMenu li {
	display:inline;
}

#mainMenu ul a {
	display:inline-block;
	padding:0.6em 0.5em 0.5em;
	text-decoration:none;
	color:#FFF;
}

#mainMenu ul a:focus,
#mainMenu ul a:hover {
	background:#000000;
	color:#FFF;
	/*transition:background 0.3s, color 0.3s;*/  /* Changed 15 Feb 2023 */
}

main {
	flex:1 0 auto;
	padding:0;/* 2em 2em 1em Changed 15 Feb 2023 */
}

p {
  display:block;
  text-align:center;
	padding:0 1.5em 0.5em;
}

h2 {
	padding:1em 0 0;
  text-align:center;
}

.line-separator-white {
    margin:-1em auto 0;
    border-bottom:4px solid #FFFFFF;
    width:40px;
}

.line-separator-black {
    margin:-1em auto 0;
    border-bottom:4px solid #000000;
    width:40px;
}

#main {
  padding-top:1.25em;
  color:white;
  background:url(img/lrh-11.jpg) 0 0 no-repeat;
  background-size:100%;
}


.button-topbottom {
  font-size:0.65em;
  font-weight:600;
  color:black;
  text-decoration:none;
  background-color:white;
  padding:0.75em 1.25em;
  border-radius:1.5em;
  font-family:arial, sans serif;
}
#about { 
  background-color:white;
  color:black;
  padding-bottom:1em;  
}

.button-about {
  font-size:0.65em;
  font-weight:600;
  color:white;
  text-decoration:none;
  background-color:black;
  padding:0.75em 1.25em;
  border-radius:1.5em;
  font-family:arial, sans serif;
}

#contact  h2 {
  color:white;
  font-size:2.5em;
  padding-bottom:1em;
  text-align:center;
  font-weight:300;
}

#contact a {
  text-decoration:none;
  color:white;
}

#contact a:hover {
  text-decoration:dotted-line;
  color:yellow;
}

#donate {
  background-color:white;
}

form {
text-align:center;
  margin:0 auto;
}

footer {
  text-align:center;
  background-color:black;
  color:white;
  font-family:times new roman, sans serif, helvetica;
}

.modal,
.modal > .modalClose,
.modalFix {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:auto;
	-webkit-overflow-scrolling:touch; /* For Apple mobile devices for scrolling smoothly */
}

.modal {
	padding:1em;
	left:-100vw;
	background:rgba(255,240,224,0.9);
	box-shadow:inset 0 0 128px 128px #FED;
	opacity:0;
	transition:opacity 0.5s, left 0s 0.5s;
}

.modal:target {
	left:0;
	opacity:1;
	transition:opacity 0.5s, left 0s;
}

.modal .modalClose {
	display:block;
	text-decoration:none;
}

.modal > .modalClose {
	position:absolute;
}

.modal > div {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100%;
}

.modal > div > section {
	position:relative; /* depth sort over .modalClose */
	overflow:hidden;
	width:100%;
	top:-50vh;
	max-width:32em;
	background:#FFFEF0;
	border-radius:0.5em;
	border:1px solid rgba(128,64,0,0.4);
	box-shadow:
		0 0 3em rgba(0,0,0,0.2),
		0 0 1em rgba(0,0,0,0.2);
	transition:top 0.5s;
}

.modal:target > div > section {
	top:0;
}

.modal section .modalClose {
	position:absolute;
	top:0.125em;
	right:0.125em;
	font-size:2em;
	line-height:1em;
	color:#86101b; /* Color for the x below */
	
}
.modal section .modalClose:after {
	content:"x"; /* the X in the contact popup "\1F5D9"*/
}

.modal h2 {
	font-size:1.25em;
	padding:0.4em 0.8em;
	background:rgba(128,64,0,0.2);
	border-bottom:1px solid rgba(128,64,0,0.4);
}

.modal h2 ~ * {
	padding:1.5em 1.5em 0;
}

.modal .submitsAndHiddens {
	padding:1em 1.5em 1.5em;
}

.modal input[type=email],
.modal input[type=text],
.modal textarea {
	display:block;
	width:100%;
	margin:0.25em 0 -0.75em;
}

/* noselects */
.modal,
#mainMenu {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
/*
@media (max-width: 64em) {
    h1 {
    display:block;
    margin: auto;
    } 
}
*/
@media (max-width:58em) {
	  h1 {
	  margin-left:-5em;
    font-size:1.2em;
    top: 3.6em;
    }
    p {
    padding: 0.5em 1em;
	}
} 

@media (max-width:42em) {
   body {
   font-size:0.875em;
  }
	.styleConstraint > header {
		background:#000;
	}
    .styleConstraint > footer {
		background:#000;
	}
	.styleConstraint > header .modalOpen {
		display:block; /* override "hidden" attribute */
		position:absolute;
		top:0.7em;
		right:0.7em;
		padding:0.35em;
	  border:0.25em solid #FFF;
	  border-radius: 0.3em;
	}
	.styleConstraint > header .modalOpen:after,
	.styleConstraint > header .modalOpen:before {
		content:"";
		display:block;
		width:1.5em;
		height:0.3em;
		border:solid #FFF;
		border-width:0.25em 0;
	}
	.styleConstraint > header .modalOpen:after {
		border-top:none;
	}
	.modalClose {
		display:block;
		text-decoration:none;
	}
	header {
    height:4em;
	}
	h1 {
    font-size:1em;
	  top:1em;
	}
	#mainMenu,
	#mainMenu > .modalClose {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		overflow:auto;
	}
	#mainMenu {
		padding:1em;
		left:-100vw;
		background:rgba(255,240,224,0.9);
		box-shadow:inset 0 0 128px 128px #FED;
		opacity:0;
		transition:opacity 0.5s, left 0s 0.5s;
	}
	#mainMenu:target {
		left:0;
		opacity:1;
		transition:opacity 0.5s, left 0s;
	}
	#mainMenu .modalClose {
		display:block; /* override "hidden" attribute */
	}
	#mainMenu > div {
		display:flex;
		align-items:center;
		justify-content:center;
		min-height:100%;
	}
	#mainMenu nav {
		position:relative; /* depth sort over .modalClose */
		overflow:hidden;
		width:100%;
		top:-50vh;
		max-width:32em;
		background:#FFFEF0;
		border-radius:0.5em;
		border:1px solid rgba(128,64,0,0.4);
		box-shadow:
			0 0 3em rgba(0,0,0,0.2),
			0 0 1em rgba(0,0,0,0.2);
		transition:top 0.5s;
	}
	#mainMenu:target nav{
		top:0;
	}
	#mainMenu nav .modalClose {
		position:absolute;
		top:0.125em;
		right:0.125em;
		font-size:2em;
		line-height:1em;
		color:#CC0C00;
	}
	#mainMenu nav .modalClose:after {
		content:"x";
	}
	#mainMenu nav:before {
		content:"Menu";
		display:block;
		padding:0.4em 0.8em;
		font-size:1.25em;
		background:rgba(128,64,0,0.2);
		border-bottom:1px solid rgba(128,64,0,0.4);
	}
	#mainMenu ul {
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		background:transparent;
		padding:0.5em 0.5em 0 0;
	}
	#mainMenu li {
		display:block;
		width:50%;
		padding:0 0 0.5em 0.5em;
		flex:1 0 auto;
	}
	#mainMenu li a {
		display:block;
		color:#642;
		background:rgba(128,64,0,0.2);
	}
	#mainMenu li a:focus,
	#mainMenu li a:hover {
		background:rgba(128,64,0,0.1);
	}	
  main {
    padding:0;
  }
  p {
    padding:0.5em 1em;
  }
	#main {
    margin-top:0em;
	}
	#arrow {
    top:90%;
    margin-right:-1.5em;
    width:15%;
  }
}

@media (max-width:24.1em) {
  	h1 {
    font-size:0.8em;
	  top:1.5em;
	}
}