/* Start show-hide the Containers */

div,
section,
article,
aside,
footer,
header,
main,
nav,
form {
/*  border: 1px solid magenta;*/
  /* disable the border above to hide the container edges */
}

/* End show-hide the Containers */

/* Start standard Grid */

.GridWrapper {
  display: grid;
  grid-template-columns: minmax(auto, 1200px);
  /* Could change ALL to 1200px for wider displays */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
/*  background-color: #E2E2BA;*/
  padding: 20px;
}

.Grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 40px;
  grid-column-gap: 40px;
  padding: 20px;
/*  background-color: #FFFFCC;*/
}

.SmallGap {
  grid-row-gap: 15px;
  grid-column-gap: 40px;
}

.Cols-1 {
  grid-template-columns: 1fr;
}

.Cols-2 {
  grid-template-columns: 1fr 1fr;
}

.Cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.Cols-3_2fr-1fr {
  grid-template-columns: 2fr 1fr;
}

.Cols-3_1fr-2fr {
  grid-template-columns: 1fr 2fr;
}

.Cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.Cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.Cols-1-NarrowCentered {
  /* you may need to create additional unique class names for other margins */
  margin: 0 15%;
}

.SpanAllColumns {
  grid-column: 1/-1;
}

/* End standard Grid */

/* Paste non-standard grids here Start*/

/* Paste non-standard grids here End */

body {
  font-size: 90%;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 90%;
  color: #333;
  background-image: url(../images/BackgroundFibersLight.jpg);
  line-height: 1.4;
}

.PageWrapper {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
  background-image: url(../images/BackgroundFibersLight.jpg);
}

a:link,
a:visited,
a:hover,
a:active {
  color: white;
  text-decoration: none;
}

/* Start standard header navigation */

.GreenBarTop {
  background-color: #527618;
  height: 40px;
}

.GoldRuleTop {
  margin-top: 5px;
  border-bottom: 3px solid #d8ba3f;
}


.HeaderWrapper {
  width: 100%;
  min-width: 320px;
  padding: 15px;
}

header {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  min-height: 115px;
}

.logo {
  float: left;
  width: 23%;
  padding-left: 15px;
  z-index: 10;
}

.LogoImage {
  padding-right: 8px;
  float: left;
  width: auto;
  height: 101px;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding-top: 30px;
  padding-right: 20px;
  justify-content: flex-end;
}

header nav ul,
header nav li {
  /*      flex: 1;*/
  /*      remove flex 1 to make links as wide as words */
}

header nav li:last-child {
  border-bottom: none;
}

header nav a {
  text-decoration: none;
  font-family: "Yanone Kaffeesatz", "Arial Narrow", Impact, sans-serif;
  color: #666 !important;
  display: block;
  font-size: 1.8em;
  line-height: 1.1;
  padding: 12px;
  margin: 3px;
  transition: all 1.2s;
}

header nav a:hover {
  background-color: #debb25;
  color: white !important;
}

header nav li {
  text-align: center;
}

header nav input,
header nav label {
  display: none;
  width: 36px;
  height: 36px;
  background-color: gray;
  color: white;
  text-align: center;
  line-height: 36px;
  border-radius: 6px;
}

header nav label {
  position: absolute;
  top: 10px;
  right: 10px;
  /*      the code above positions the hamburger*/
}

header nav label:hover {
  cursor: pointer;
}

header nav label:before {
  font-size: 24px;
  text-align: center;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  content: "\f0c9";
}

header nav input[type="checkbox"]:checked ~ label:before {
  content: "\f00d";
  /* this changes the hamburger icon to an X */
}

/* End standard header navigation */

main {
}

.HideOnTabletPhone {
  display: block;
}

.HideOnPhone {
  display: block;
}

.button {
  text-align: center;
  color: white !important;
  background-color: cadetblue;
  font-size: 18px;
  padding: 5px 16px 7px 16px;
  border: 2px solid gray;
  border-radius: 20px;
  -webkit-transition: all 1s;
  transition: all 1s;
}

a.button:hover {
  color: yellow !important;
  background: #3d7a80;
}

.YellowBkgrd {
  background-color: #debb25;
}

.CreamBkgrd {
  background-color: #ead142;
  padding: 20px
}

.GreenBodySubheads {
	font-weight: bold;
	color: #527618;
}
.ReturnSmall {
	line-height: .5em;
}
em {
	font-style: italic;
}

.SliderHeadline {
  font-family: "Yanone Kaffeesatz", "Arial Narrow", Impact, sans-serif;
  font-size: 2.7em;
  line-height: 1.1em;
  color: #debb25;
  text-align: center;
  background-color: rgba(82, 118, 24, 0.8);
  padding: 10px;
  margin-top: -120px;
  z-index: 100;
}

h1 {
	font-family: "Yanone Kaffeesatz", "Arial Narrow", Impact, sans-serif;
	font-size: 2.7em;
	line-height: 1.1em;
	color: #527618;
}

h2 {
	font-family: "Yanone Kaffeesatz", "Arial Narrow", Impact, sans-serif;
	font-size: 1.9em;
	line-height: 1.1em;
	color: #666;
}

h4 {
	font-weight: bold;
	color: #666;
}

.email a {
  color: black;
  text-decoration: underline;
}

.email a:hover {
  color: white;
  text-decoration: none;
}

.PhotoBorder {
	border: 1px solid #FFF;
}

.PhotoSpaceTopBot {
  margin: 15px 0;
}

.MoveHeadlineDown {
  transform: translate(0, 20px)
  
}

.DottedLine {
  border-top: 3px dotted darkgray;
  margin: 0 20px
}

form input {
  padding: 10px;
  line-height: 1;
  font-size: 15px;
  border: 1px solid lightgray;
}

form input::placeholder {
  color: darkgray;
}

.Submit {
  font-weight: bold;
  color: #77a52e;
  height: 100%;
  background-color: rgb(255, 255, 254);
}

.MemberAsImg {
  height: 130px;
  width: auto;
  margin-bottom: 10px;
}

.MemberAsText {
  font-family: "Yanone Kaffeesatz", "Arial Narrow", Impact, sans-serif;
	font-size: 1.7em;
	line-height: 1.1em;
	color: #666;
}

.FooterSubheads {
  font-size: 110%;
  font-weight: bold;
  color: #77a52e;
}

.FooterUpperWrapper {
  background-color: #484848;
  color: white;
}

.ExtraColGap {
  grid-column-gap: 60px
}

.FooterWrapper {
  display: grid;
  grid-template-columns: minmax(auto, 1200px);
  /* Could change ALL to 1200px for wider displays */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: black;
  padding: 5px;
}

footer {
  font-size: 90%;
  line-height: 1.55;
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
  color: #ccc;
  justify-content: space-between;
}

.FooterNamePolicyTerms span {
  padding-right: 15px;
}





/* Start alignment snippets */

/*Via the Parent grid*/

/*Note justify and align CONTENT also work on parent reasearch it*/

.JustifyItemsLeft {
  justify-items: start;
}

.JustifyItemsRight {
  justify-items: end;
}

.JustifyItemsCenter {
  justify-items: center;
}

.AlignItemsTop {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

.AlignItemsBottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
}

.AlignItemsCenter {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}


/*Via the Child within grid*/

.JustifySelfLeft {
  justify-self: start;
}

.JustifySelfRight {
  justify-self: end;
}

.JustifySelfCenter {
  justify-self: center;
}

.AlignSelfTop {
  -ms-flex-item-align: start;
  align-self: start;
}

.AlignSelfBottom {
  -ms-flex-item-align: end;
  align-self: end;
}

.AlignSelfCenter {
  -ms-flex-item-align: center;
  align-self: center;
}

/*Other alignment snippets*/

.CenterBlockElement {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.CenterInlineElement {
  text-align: center;
}

.FloatImageLeft {
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
}

.FloatImageRight {
  float: right;
  margin-left: 10px;
  margin-bottom: 5px;
}

.RespondImageMaxWidth {
  max-width: 100%;
  height: auto;
}

.RespondImage100 {
  width: 100%;
  height: auto;
}

.FloatLeft {
  float: left;
}

.FloatRight {
  float: right;
}

.FloatCenter {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/* End alignment snippets */

/* Start pad and gap removers */

.NoPadAll {
  padding: 0;
}

.NoPadTop {
  padding-top: 0;
}

.NoPadBottom {
  padding-bottom: 0;
}

.NoPadTopBottom {
  padding-top: 0;
  padding-bottom: 0;
}

.NoPadLeft {
  padding-left: 0;
}

.NoPadRight {
  padding-right: 0;
}

.NoPadLeftRight {
  padding-left: 0;
  padding-right: 0;
}

.NoGapAll {
  grid-row-gap: 0;
  grid-column-gap: 0;
}

.NoGapTopBottom {
  grid-row-gap: 0;
}

.NoGapLeftRight {
  grid-column-gap: 0;
}

/* End pad and gap removers */

/* Start media query TABLET rules */

@media screen and (max-width:900px) {

      .logo {
        width: 100%;
      }

      header nav {
  }

      header nav a {
        color: #ead142 !important;
        font-size: 23px;
        line-height: 1.1;
        padding: 13px;
        background-color: #484848;
        border-radius: 7px;
        margin: 3px;
      }

      header nav a:hover {
        background-color: rgb(126, 126, 126);
        color: white !important;
      }

      header nav ul {
        transform: translate(0%, -135%);
        /*        translate numbers to move in from different directions*/
        padding: 5px;
        transition: all .3s;
        position: absolute;
        width: 100%;
        z-index: 100;
      }

      header nav li {
        flex: none;
        width: 100%;
        /*        change width to 50% for two buttons across on phone*/
      }

      header nav input[type="checkbox"]:checked+ul {
        width: 100%;
        transform: translate(0%, -2%);
        background-color: rgb(31, 31, 31);
        /*        remove the bkgrd above to show space between buttons*/
        transition: all 1.2s;
        border-radius: 10px;
      }

      header nav label {
        display: block;
        z-index: 300;
      }

      header nav input[type="checkbox"]:checked+ul li:nth-child(1) {
        /*                make first button a different color here*/
      }

  .TabletCols-1 {
    grid-template-columns: 1fr;
  }

  .TabletCols-2 {
    grid-template-columns: 1fr 1fr;
  }

  .TabletCols-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .TabletCols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .TabletCols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .TabletSpanAllColumns {
    grid-column: 1/-1;
  }

  .HideOnTabletPhone {
    display: none;
  }
}

/* End media query TABLET rules */

/* Start media query PHONE rules */

@media screen and (max-width:700px) {

  header {
    grid-template-columns: 1fr;
  }

  header nav ul {
    grid-template-columns: 1fr;
  }

  .Cols-1,
  .Cols-2,
  .Cols-3,
  .Cols-3_2fr-1fr,
  .Cols-3_1fr-2fr,
  .Cols-4,
  .Cols-5,
  .TabletCols-1,
  .TabletCols-2,
  .TabletCols-3,
  .TabletCols-4,
  .TabletCols-5 {
    grid-template-columns: 1fr;
  }

  .PhoneCols-1 {
    grid-template-columns: 1fr;
  }
  
  .PhoneCols-2 {
    grid-template-columns: 1fr 1fr;
  }

  .PhoneCols-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .PhoneCols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .HideOnPhone {
    display: none;
  }
  
  .SliderHeadline {
  background-color: rgb(82, 118, 24);
  margin-top: 0px;
}


  footer {
    grid-template-columns: 1fr;
  }

}

/* End media query PHONE rules */