/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;  /* originally set to relative */
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;   /* originally 0 20px;  Syntax is top, right, bottom, left */
  box-sizing: border-box; }

  .center {
      display: block;
      margin-left: 10%;
      margin-right: auto;
      width: 80%;
  }

.center div {

  display: block;
  margin-left: 80%;

  width: 90%;

}

.column,
.columns {
  width: 100%; /* was 100% */
  float: left;  /* is this failing to center text? */
  /* Dorie code: I changed the above code to float: center rather than float: left...put it back, no change
  I think this refers to when the page shrinks; which direction the text moves. */
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 95%;
    padding: 0; }
}

/* For devices larger than 550px <!-- originally 85% --> */
@media (min-width: 550px) {
  .container {
    width: 90%; }
  .column,
  .columns {
    margin-left: 4%; }  /* Originally 4% */
    /* Could this be the issue with left justification? */
  .column:first-child,
  .columns:first-child {
    margin-left: 17.3%; }  /* Changed from 25% to 17.3% */

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 50%; margin-left: 0;}   /* originally 39>3333% Originally no margin left noted. */
  .six.columns                    { width: 50%; margin-left: 25%;}  /* originally 48% */
  .seven.columns                  { width: 56.6666666667%; margin-left: 0%;}
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }
  /* Could be shrinking width of page; altering from 48% to test.  88% widens, but page isn't centered? */

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }  /* originally 43.3333333333% */
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 50%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }
  /*this code could be the issue with page width being too narrow?
  Original margen-left = 52% Will change to test. */

}






/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Open Sans", "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;  /* primary font supplied by skeleton is "Raleway" */
  color: #222; }  /* originally 222 */





/*
  @media screen and (min-width: 2560px) {
      .headertextsize {
        font-size: 400%
      }

  @media screen and (min-width: 2048) {
      .headertextsize {
        font-size: 320%
      }

  @media screen and (min-width: 1920px) {
      .headertextsize {
        font-size: 300%
      }

  @media screen and (min-width: 1280px) {
      .headertextsize {
          font-size: 200%
      }

  @media screen and (min-width: 960px) {
      .headertextsize {
        font-size: 150%
      }

  @media screen and (min-width: 800px) {
      .headertextsize {
        font-size: 125%
      }

  @media screen and (min-width: 750px) {
      .headertextsize {
        font-size: 117%
      }
  @media screen and (min-width: 720px) {
      .headertextsize {
        font-size: 113%
      }

  @media screen and (min-width: 640px) {
      .headertextsize {
        font-size: 100%
      }

  @media screen and (min-width: 480px) {
      .headertextsize {
        font-size: 75%
      }

  @media screen and (min-width: 400px) {
      .headertextsize {
        font-size: 63%
      }
*/



.pagetop {

 /* background-image: url("bamboopathwaywide3.jpg"); */
 background-color: #00a392;  /* darker grean #00897B    current 00a392 */
background-image: linear-gradient(#f7bc5e, #FEF9E7, #f7bc5e); /* middle: #A9DFBF  darker yellow edge: f7bc5e lighter yellow edge: F8C471  */
}


.pagetop2 {

 /* background-image: url("bamboopathwaywide3.jpg"); */
 background-color: #00a392;  /* darker grean #00897B    current 00a392 */
background-image: linear-gradient(#F8C471, #FEF9E7, #F8C471);  /*, linear-gradient(to right, rgba(199,229,229,1),rgba(199,229,229,0),rgba(199,229,229,0),rgba(199,229,229,0),rgba(199,229,229,1); /* middle: #A9DFBF  */
  vertical-align: -25pix;  /* -25pix */
}

/* background color is: R:199, G:229, B:229  */

  /*background-image: linear-gradient(to right, #00897B, #00a392 ,#00897B); */
  /* min-height: 7em; */

/*  background-color: #00a392; /* For browsers that do not support gradients */
  /*  background-image: linear-gradient(#00897B, #A9DFBF, #00897B); /* Standard syntax (must be last) */

/* rest of page color background: A9DFBF */


.bg-blend {
  background-image: url("IMG_2672.png");
  background-color: #00897B;
  background-blend-mode: multiply;
}

  /* Code Dorie added for paragraph indentation */
div.indented-paragraph {
  text-indent: 6%;
  font-family: 'Open Sans', sans-serif;
}

div.indent-this {
  text-indent: 6%;
}
  /* End of Dorie code */
/* More Dorie code for imbedded youtube videos. */

/*  div.youtube-embeds {
   text-align: center;
  margin-left 50%;
   display: flex;
  justify-content: center; */

/* Code below taken from web page (open source): http://thenewcode.com/717/Force-Embedded-YouTube-Videos-To-Play-In-HD  */
/* I've changed the class to "youtube-embeds" to match my own code. */
  .youtube-embeds {
  	position: relative;
  	padding-bottom: 53.25%;
  	padding-top: 30px; /* originally 30px */
  	height: 0;
  	overflow: hidden;
  }
  .youtube-embeds,
  	.responsive-container iframe {
  	max-width: 1280px;
  	max-height: 720px;
  }
  .youtube-embeds iframe {
  	position: absolute;
  	top: 0; left: 0;
  	width: 100%;
  	height: 100%;
  }


div.transbox {
      margin: 4px;
      background-color: #c7e5e5;
      /* border: 1px solid black;  */
      opacity: 0.8;
      filter: alpha(opacity=80); /* For IE8 and earlier */
    }

div.transbox p {
      margin: 7%;

    }
/* End of Dorie code */
/* Code from johnmorrisonline */

/* More Dorie code; for image aspect ratio. */
.photos {
  position: relative;
  padding-bottom: 53.25%;
  padding-top: 30px;
  height: 100%;  /* originally 0% */
  overflow: hidden;
}
.photos,
  .responsive-container img {
  max-width: 538px;
  max-height: 600px;
}
.photos img {
  position: relative;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}


.centeredtext {
  text-align: center;
}

.evenlycenteredlinks {
  display: -webkit-flex; /* Safari */
      -webkit-justify-content: space-around; /* Safari 6.1+ */
      display: flex;
      justify-content: space-around;
      margin-top: 20px;


}

.satisfyfont {
    font-family: 'Satisfy', cursive;
    font-size: 175%;
}

.satisfyfont2 {
    color: #2C3E50;  /* old color: 641E16, 2nd try grey too deep:212F3D */
    text-shadow: 2px 2px 2px #8292a1;
    font-family: 'Satisfy', cursive;
    font-size: 400%;
}

.satisfyfont3 {
    color: #2C3E50;  /* old color: 641E16, 2nd try grey too deep:212F3D */
    text-shadow: 1px 2px 2px #8292a1;
    font-family: 'Satisfy', cursive;
    font-size: 200%;
}

.satisfyfont4 {
  color: white;  /* old color: 641E16, 2nd try grey too deep:212F3D */
  text-shadow: 1px 2px 2px #8292a1;
  font-family: 'Satisfy', cursive;
  font-size: 200%;
}

.opensansfont {
  color: #2C3E50;  /* old color: 641E16, 2nd try grey too deep:212F3D */
  text-shadow: 2px 2px 2px #8292a1;
  font-family: 'Open Sans', cursive;
  font-size: 400%;
}

.opensansfont2 {
  color: #00897B;  /* old color: 641E16, 2nd try grey too deep:212F3D */
  text-shadow: 1px 1px 1px #2C3E50;
  font-family: 'Open Sans', cursive;
  font-size: 400%;
}

.opensansfont3 {
  color: #2C3E50;  /* old color: 641E16, 2nd try grey too deep:212F3D */
  text-shadow: 1px 1px 1px #8292a1;
  font-family: 'Open Sans', cursive;
  font-size: 100%;
}


.cinzelfont_body {
  font-family: 'Cinzel';
}

.orange {
  color: #FF5722;
}



/* Attempt at creating a banner with text inside - "hero image"taken from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image */

/*
.hero-image {
  background-image: url("bamboopathwaywide2.png");
  height: 25%;  /* All pages currently set to 30%
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #641E16;
  text-shadow: 0 7px 15px #EC7063, 0 -7px 40px #F1948A, 0 0 20px #F9E79F;
  font-family: fantasy;
}
*/


/* Attempt at shadow for the hero image */
/*
.boxshadow {
    position: relative;
    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 0px;
    background: transparent;
}

/* Make the image fit the box
.boxshadow img {
    width: inherit;
    border: 1px solid #8a4419;
    border-style: inset;
}

.boxshadow::after {
    content: '';
    position: absolute;
    z-index: -1; /* hide shadow behind image
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 1);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 1);
    width: 100%;
    left: 0%; /* one half of the remaining 30%
    height: 100%;
    bottom: 0;
}
*/




/* End of code for attempt at shadow. */


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 4rem;
  margin-bottom: 0rem;  /* originally 2rem */
  font-weight: 300; }
h1 { font-size: 7.0rem; line-height: .5;  letter-spacing: -.1rem; text-align: center;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem;   text-align: center;}
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem;   text-align: center;}
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem;   text-align: center;}
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem;   text-align: center; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0;   text-align: center;}

/* Larger than tablet */
@media (min-width: 550px) {
  h1 { font-size: 8.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; }
}

/* Dorie code added, to shrink titles slightly more when on a very small screen.  */
@media (max-width: 360px) {
  h1 { font-size: 6.0rem; }
  h2 { font-size: 3.0rem; }
  h5 { font-size: 1.5rem; }
  h6 { font-size: 1.0rem; }
}
/* end Dorie code */



p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #FF5722; }  /* from button: FF5722 original: FF8A65 */
a:hover {
  color: #c12e00; }   /* from button hover: 34495E original: ff6347 */
a:visited {
  color: #FF5722; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 25px;  /* original is 38px */
  padding: 0 6px;  /* original 0 30px */
  color: #34495E;  /* original 555  lighter option: FF5722stronger option: E74C3C */
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 25px; /*original 38px */
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: #FDEBD0;  /* last set to FDEBD0 originally set to transparent E8F8F5*/
  border-radius: 4px;
  border: 1px solid #FF7043;  /* original bbb FF7043 */
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #E74C3C;  /* original 333  E74C3C */
  border-color: #C0392B;   /*original color 888 */
  outline: 0; }

/*  Dorie code copy for different button coloring scheme. */

.button2,
button2,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 25px;  /* original is 38px, then 25px */
  padding: 0 6px;  /* original 0 30px, then 6px */
  color: #34495E;  /* original 555  */
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 25px; /*original 38px */
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: #FEF9E7;  /* changed to ffffe6  FEF9E7  originally set to transparent #FEF9E7 E8F8F5*/
  border-radius: 4px; /* 4px */
  border: 1px solid #FF7043;  /* original bbb FF7043 */
  cursor: pointer;
  box-sizing: border-box; }
.button2:hover,
button2:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button2:focus,
button2:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #E74C3C;  /* original 333  FF5722  stronger option: #E74C3C*/
  border-color: #C0392B;   /*original color 888 */
  outline: 0; }















/* End of Dorie code copy for different button coloring scheme. */

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;  /* originally FFF */

  background-color: #33C3F0;  /* originally 33C3F0 */
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* 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: #fff;
  border: 1px solid #D1D1D1;
  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"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  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 #33C3F0;
  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: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;  /* new color #FFF176 original color: F1F1F1 */
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;  /* padding: 1rem 1.5rem;  */
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
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,
form {
  margin-bottom: 2.5rem; }   /*possible margin issue, originally 2.5rem; */


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 1.5rem;  /* originaly 3rem */
  margin-bottom: 1.5rem;  /* originally 3.5rem */
  border-width: 0;
  border-top: 1px solid #E1E1E1; }  /* color E1E1E1 */


/* Dorie's attempt to normalize the look of a vertical line  */



/* 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 */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

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

/* Larger than desktop */
@media (min-width: 1000px) {}

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