/* Styles by element */
* {
 box-sizing: border-box;
}
body {
    margin: 0;
    text-align: center;
    background: white;
    //color: black;
    //font: 400 30px/1 'Cookie', Helvetica, sans-serif;
    font: 400 20px/1.2 'Merienda One', Helvetica, sans-serif;
    text-shadow: 4px 4px 2px rgba(0,0,0,1.0);
}

h1, h2, h3, h4, h5, h6 {
  /* font-family: serif; */
  font: 400 50px/1'Great Vibes', Helvetica, sans-serif;
  text-shadow: 4px 4px 5px rgba(0,0,0,1); 
}

h1 {
    color: white;
    font-size: 60px;
    border-bottom: 50px solid;
    border-image: url("/images/chrome_flourish.png") 30 round;
}

h2 {
    padding-top: 40px;
  padding-bottom: 5px;
  color: white;
    border-bottom: 50px solid;
    border-image: url("/images/chrome_flourish.png") 30 round;

}

p {
  line-height: 22px;
}
/*
h2:first-letter {
  color: #df0;
  font-size: 1.5em;
}
*/

img {
  max-width: 100%;
  background: white;
  padding: 10px;
  margin: 10px;
}

.video{
  max-width: 100%;
  background: white;
  padding: 10px;
  margin: 10px;
}

a.target, a.target:hover {
  background: transparent;
  color: white;
}

a, a:link {
  /* background: #222; */
  color: #88f;
  text-decoration: none;
  font-weight: bold;
}

a:visited {
  color: #66c;
  text-decoration: none;
}

a:hover {
  //background-color: white;
  //color: #360247;
  text-decoration: underline;
  font-weight: bold;
}

  a.image, a.image:hover {
    background: transparent;
  }


em {
}

li {
  margin: 10px 0;
}

ul.unbulleted {
  list-style-type: none;
}

pre {
  margin: 20px;
  padding: 5px;
  background: white;
  color: black;
  font-family: monospace;
}

/* Form related styles */
input, textarea {
  /* background: #ffa repeat; */
  /* color: #520; */
}


.button {
  background: #ccc;
  color: black
}

/* end From related styles */


/* Generic classes throughout the page */


/* Elements that are to be hidden */
.screen_hide {
  visibility: hidden;
  text-decoration: none;
}

.img_wrap {
  margin: auto;
  text-align: center;
}

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.aligncenter {
  margin: auto;
  text-align: center;
}

.code {
/*
  background: #eee;
  color: black;
*/
  padding: 0 0.5em;
  background: black;
  color: white;
  font-family: monospace;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
}
/* For mobile phones: */
@media only screen and (max-width: 768px) {
    [class*="col-"] {
        width: 100%;
    }
}

#Parallax {
    background: black url('/images/sky_fade.jpg') bottom center repeat-x;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 200px;
}


#Parallax img {
    max-width: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}

.p1 {
  width: 110%;
  height: 110%;
}
.p2 {
  width: 125%;
  height: 125%;
}
.p3 {
  width: 175%;
}
.p4 {
  width: 250%;
  height: 100%;
}

.p5 {
  width: 100%;
  height: 100%;
}


/* Devided by sections */

  /* Header */
    #menu {
      width: 100%;
      //float: left;
        display: inline-block;
      clear: both;
      margin-bottom: 2em;
      padding-bottom: 20px;
        //background: black;
        //background: #360247;
        text-align: center;
        border: 0;
        //border-top: 32px solid;
        //border-image: url('/images/top_frost2.jpg') 100 round;
        border-bottom: thin white solid;
    }
      #menu ul {
          width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;

      }

      #menu li {
        display: inline-block;
        margin: 2px;
        list-style-type: none;
        width: 17%;
        //border: thin solid red;
        //background: blue;
        text-align: center;
        font-size: 25px;
      }
/* For mobile phones: */
@media only screen and (max-width: 768px) {
    #menu li {
        width: 30%;
        height: 2em;
        margin: 1em;
        padding-bottom 10px;
        font-size: 20px;
    }
}

      #menu a, #menu a:link, #menu a:visited {
        padding: 0 5px;
        background: transparent;
        color: #ddd;
        text-decoration: none;
      }

      #menu .selected a {
        color: white;
        border: 0;
        //border-bottom: 20px solid white;
        //border-image: url('/images/small_flourish.png') 20 round;
        //background: #360247;
    border-bottom: 10px solid;
    border-image: url("/images/small_flourish2.png") 30 5 stretch;
      }

      #menu a:hover {
        //background: white;
        //color: black;
        color: #bbb;
        text-decoration: underline;
        font-weight: bold;
        border: 0;
      }


  #wrapper {
    width: 100%;
    clear: both;
    float: left;
    margin: auto;
    background: #360247 top right url('/images/snow_back.jpg') fixed;
    color: white;
    text-align: center;
  }

  #header {
    width: 80%;
    margin: auto;
        text-align: center;
  }
  #content {
    width: 80%;
    margin: 40px auto;
  }

#mainimg {
  background: white;
  color: black;
    text-shadow: none;
  padding: 10px;
  //margin: 5px;
}

#mainimg h2 {
    color: black;
    text-shadow: none;
    border: 0;
}

#mainimg img {
  max-width: 100%;
}

    #page_content {
      //width: 100%;
      min-height: 300px;
      float: left;
      margin: 25px 0px;
      padding: 5px 10px;
      background: transparent top center url('images/content.png');
      color: white;
      text-align: center;
    }


.halfwide {
    margin 25px;
}

    .halfwide::after {
        height:20px;
        width:100%;
        background: url("/images/chrome_flourish.png");
    }


  /* end conent */


  #footer_wrapper {
    //width: 100%;
    margin: 0;
    float: left;
    background: white;
    color: #360247;
  }


  #footer {
    //width: 1000px;
    /* min-height: 60px; */
    clear: both;
    margin: auto;
    padding: 0px;
    //padding: 1em 0;
    text-align: center;
    border: 0;
    //border-top: 80px solid;
    //border-image: url('/images/skyline.jpg') 100 round;
  }

    #footer p {
        padding: 2px;
        margin: 0;
        font-size: 0.8em;
        text-shadow: none;
    }

/*
    .developer a {
      padding: 5px;
      font-family: sans-serif;
      font-weight: bold;
      text-decoration: none;
    }

    .developer a, .developer a:link, .developer a:visited {
      background: transparent;
    }

    .developer a:hover {
      background: red;
      color: white;
    }
*/

  /* end footer */

/* end page_wrapper */

.beacon {
    max-height: 0px;
    max-width: 0px;
    border: 0;
    padding: 0;
}

@media only screen and (max-width: 768px) {
    .amazon {
        max-height: 200px;
    }
    .amazon img {
        max-height: 200px;
    }
}

    #fooditems {
      width: 100%;
      //float: left;
        display: inline-block;
      clear: both;
      margin-bottom: 2em;
      padding: 1em;
        //background: black;
        //background: #360247;
        text-align: center;
        border: 0;
        //border-top: 32px solid;
        //border-image: url('/images/top_frost2.jpg') 100 round;
        background: white;
        border-bottom: thin white solid;
    }
      #fooditems ul {
          width: 100%;
        margin: 0;
        padding: 0;
        text-align: left;

      }

      #fooditems li {
        border-radius: 25px;
        display: inline-block;
        margin: 2px;
        padding: 0.2em 0.8em;
        list-style-type: none;
        //border: thin solid red;
        //background: blue;
        text-align: center;
        font-size: 25px;
        background: #360247;
        border: thin solid grey;
      }

      textarea {
          width: 100%;
      }

      #info {
          width: 60%;
        display: inline-block;
      }
@media only screen and (max-width: 768px) {
    #info {
        width: 100%;
    }
}

      #info div div{
          max-width: 100%;
          text-align: left;
          margin: 0.5em 0.2em;
      }

      #errors {
          background: #faa;
          color: red;
          border: thin solid red;
          margin-bottom: 25px;
      }

      #errors h4 {
          font-size: 2em;
          margin: 1em;
      }