/* CSS Variables
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html {

	/* default theme: light background, dark text, blue accent */
	--theme-hue: 0;					/* white */
	--accent-hue: 120;			/* green */

	--text-color-richer: hsl(var(--theme-hue), 0%, 5%);			/* #0d0d0d		*/
	--text-color-normal: hsl(var(--theme-hue), 0%, 13%);		/* #222222 		text color; button:hover:focus color */
	--text-color-softer: hsl(var(--theme-hue), 0%, 33%);		/* #555555 		button color; button:hover border */

  --accent-color: hsl(var(--accent-hue), 86%, 35%);				/* #33C3F0 		link; button-primary bg+border; textarea,select:focus border */
  --accent-color-hover: hsl(var(--accent-hue), 76%, 25%);	/* #1EAEDB 		link hover; button-primary:hover:focus bg+border */

  --border-color: hsl(var(--theme-hue), 0%, 73%);					/* #bbbbbb		button border */
	--border-color-softer: hsl(var(--theme-hue), 0%, 82%);	/* #d1d1d1		textarea,select,code,td,hr border	 */
	
	--background-color: #dfebe3;														/* transparent body background; textarea,select background */
	--background-color-softer: hsl(var(--theme-hue), 0%, 95%);
  --code-background: hsl(var(--theme-hue), 0%, 95%);			/* #f1f1f1 		code background*/

	--button-primary-color: white;
  
	
	/* Font defaults */
	/* 62.5% of typical 16px browser default = 10px */
	--base-font-size: 62.5%;
	
	/* Grid Defaults */
	--grid-max-width: 1065px;
	
}

/* Navigation Bar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Style the top navigation bar */
.navbar {
 overflow: hidden; /* Hide overflow */
 background-color: #427442; /* Dark green background color */
}

/* Style the navigation bar links */
.navbar a {
 float: left; /* Make sure that the links stay side-by-side */
 display: block; /* Change the display to block, for responsive reasons (see below) */
 color: white; /* White text color */
 text-align: center; /* Center the text */
 padding: 8px 16px; /* Add some padding */
 text-decoration: none; /* Remove underline */
 text-transform: uppercase;
 font-size: 1.8rem;
 }

/* Change color on hover/mouse-over */
.navbar a:hover {
 background-color: #333333; /* Dark gray background color */
 color: white; /* White text color */
}

/* Responsive layout - when the screen is less than 600px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .navbar a {
    box-sizing: border-box;
	float: none;
	width: 100%;
	border-top:thin solid #CCCCCC;
  }
}


/* Tabs
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}

.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button {
				white-space:normal;
				background-color: #CCCCCC;
				border-bottom: 2px solid #ffffff!important;
				border-right: 2px solid #ffffff!important;
		} 
.w3-button:hover {
				color: #000000!important;
				background-color: #ffffff!important;
		}
.w3-container {text-align:left
		}
		
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover {
				color:#fff!important;
				background-color:#616161!important
		}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover {
				color:#3a3a3a!important
		}
				
/* .nav-green,.w3-hover-black:hover{color:#000!important;background-color:#427442!important} */
.nav-green {color:#000!important;
			background-color:#427442!important;
		}
		


@media (max-width:600px){

w3-mobile {display: block;
		   width:100%!important;
		}

.w3-bar-item.w3-mobile {text-align:center;
		}
		
.w3-btn, .w3-button {width:100%;
		}
}


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* CSS Grid depends much more on CSS than HTML, so there is less boilerplate
	 than with skeleton. Only basic 1-4 column grids are included.
	 Any additional needs should be made using custom CSS directives */


.grid-container {
	position: relative;
	max-width: var(--grid-max-width);
	margin: 0 auto;
	padding: 10px;
	text-align: left;
	display: grid;
	grid-gap: 20px;
	gap: 20px;
	background-color: white;
	
	/* by default use min 200px wide columns auto-fit into width */
	grid-template-columns: minmax(200px, 1fr);
}

.grid-container.footerPadded {
		grid-template-columns: 1fr;
}

/* grids to 3 columns above mobile sizes */
@media (min-width: 600px) {
	.grid-container {
		grid-template-columns: repeat(3, 1fr);
		padding: 10px 0;
	}
	
	/* basic grids */
	.grid-container.fifths {
		grid-template-columns: repeat(5, 1fr);
	}
	.grid-container.quarters {
		grid-template-columns: repeat(4, 1fr);
	}
	.grid-container.thirds {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-container.halves {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid-container.full {
		grid-template-columns: 1fr;
	}
	.grid-container.fullPadded {
		grid-template-columns: 1fr;
		height: 100%;
		padding: 20px 40px;
	}
	.grid-container.contactForm {
		grid-template-columns: 1fr;
		max-width: 600px;
		text-align:left;
		margin-left: 0px;
	}
	.grid-container.footerPadded {
		grid-template-columns: repeat(3, 1fr);
		height: 100%;
		padding: 20px 40px;
	}

	
}

@media (max-width: 950px) {
	.grid-container.fullPadded .grid-container.footerPadded {
		grid-template-columns: 1fr;
		padding: 20px;
	}
}

	.book-image {
 		justify-self: center;
	}
	
@media (min-width: 600px) {
	.book-image {
		justify-self: start;
	}
}




/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: var(--base-font-size);
  scroll-behavior: smooth;
}
body {
  font-size: 1.6rem;		/* changed from 15px in orig skeleton */
  line-height: 1.6;
  font-weight: 400;
  font-family:Georgia, "Times New Roman", Times, serif;
  color: var(--text-color-normal); 
  background-color: var(--background-color);;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }

h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 300; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 600px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; 
  }

.error {
	color: #FF0000;
	}

/* Plain Text Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */

a.plainLink:link {
	color: var(--accent-color); 
  	text-decoration: none;
	padding: 0px 3px;
	}
	
a.plainLink:visited {
	color: var(--accent-color); 
  	text-decoration: none;
	padding: 0px 3px;
	}

a.plainLink:hover {
	color: white;
	background-color: var(--accent-color-hover);
  	text-decoration:none; 
}

  
  /* Images
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.responsive-image {
  width: 100%;
  max-width: 460px;
  min-width: 280px;
  height: auto;
  display: block;
  /* box-shadow: 5px 5px 10px rgba(0,0,0,0.4); */
}

.responsive-logo {
  width: 45%;
  max-width: 320px;
  min-width: 230px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* box-shadow: 5px 5px 10px rgba(0,0,0,0.4); */
}

.responsive-footer {
  grid-column-start: 3;
  width: 100%;
  max-width: 275px;
  min-width: 230px;
  height: auto;
  justify-self: end;
}

@media (min-width: 600px) {
	.responsive-footer {
  width: 100%;
  max-width: 300px;
  min-width: 275px;
  height: auto;
  justify-self: end;
}
}

  /* Nav Bar
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a.nav-green:link {
	color: white;
	}

a.nav-green:hover {
	color: yellow;
	background-color: #F9E63D;
}


  /* Link Bars
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.requestBar {
	color: #312107;
	border: thin solid #999999; 
	text-align: center;
	text-decoration: none;
	background-color: #DFEBE3;
	box-sizing: border-box;
	margin: 10px 0px;
	padding: 8px 5px;
	max-width: 460px;
} 

a.requestBar:link {
	display:block;
	text-align: center;
}

a.requestBar:hover {
	display:block;
	border: thin solid #CC6600;
	text-align: center;
	background-color: #F9E63D;
}

/* .requestBar .reqButton:not(:last-child) {
 	border-bottom: none; /* Prevent double borders */ 
}


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: var(--background-color);
  border: 1px solid var(--border-color-softer);
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="button"],
input[type="submit"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 100px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid var(--accent-color);
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  /* font-weight: normal; */
  }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul, ul ol, ol ol, ol ul {
	font-size: 100%;
	margin: 1rem 0 1rem 2rem;
	color: var(--text-color-softer);
}
li {
  margin-bottom: 0.5rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: var(--code-background);
  border: 1px solid var(--border-color-softer);
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; 
  overflow: auto; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid var(--border-color-softer); }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*button,
.button {
  margin-bottom: 1rem; } */
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
	{ 
	margin-bottom: 2.5rem;
  }

form {
	margin-bottom: 0rem;
	}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.p-full-width {
  width: 100%;
  box-sizing: border-box;
  display:none !important; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }
.u-align-left {
	text-align: left; }
.u-align-right {
	text-align: right; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  border-width: 0;
  border-top: 1px solid var(--border-color-softer); }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile (default point when grid becomes active) */
@media (min-width: 600px) {}

/* Larger than phablet */
@media (min-width: 900px) {}

/* Larger than tablet */
@media (min-width: 1200px) {}