/*------------------------------------------------------------
   GLOBAL
------------------------------------------------------------*/
body
{
   /* background-image: url(../graphics/background-symbols.jpg); */
   background-repeat: no-repeat;
   background-position: top center;
   background-size: 1700px 1600px;
   /* background-color: #fff;
   background-color: #e9eaea; */
   background-color: #626262;
   font-family: helvetica, arial, verdana, san-serif;
   font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 150%;
   color: #252525;
   text-align: left;
   margin: 0;
   padding: 0;
}

/*
a:link, a:visited { color: inherit; text-decoration: none; border-bottom: dashed 1px #993333; }
a:hover, a:active { color: #993333; text-decoration: none; border-bottom: solid 1px #993333; }
*/
a:link, a:visited { color: #993333; text-decoration: none; }
a:hover, a:active { color: #993333; text-decoration: underline; }

/* Text - Fonts + Decoration */
h1
{
   font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 28px;
   font-weight: normal;
   line-height: 1.1;
   text-transform: uppercase;
   letter-spacing: 10px;
   margin: 0 0 12px 0;
   padding: 0;
   color: #333;
}

h2
{
   font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
   font-size: 24px;
   font-weight: bold;
   line-height: 1.1;
   margin: 20px 0 6px 0;
   padding: 0;
   color: #9C1618;
 }

h3
{
   font-size: 18px;
   line-height: 110%;
   margin: 20px 0 5px 0;
   padding: 0;
   color: #000;
}

h4
{
   font-size: 16px;
   line-height: 110%;
   margin: 15px 0 5px 0;
   padding: 0;
}

p
{
   margin: 0 0 13px 0;
}

ul, ol
{
   list-style-type: disc;
   font-size: 1.7em;
   line-height: 1.5;
   margin: 10px 0 15px 0;
   padding: 0 0 0 2em;
}

ol { list-style-type: decimal; }

li
{
   margin: 0 0 7px 0;
   padding: 0;
}

img
{
   border: 0;
   max-width: 100%;
   height: auto;
}

.clear
{
   clear: left;
   height: 0;
}

.group:after
{
   content: "";
   display: table;
   clear: both;
}

.imageLeft
{
   margin: 0 30px 10px 0;
   min-width: 325px;
   height: auto;
   float: left;
}

.note
{
   font-size: 15px;
   color: #666;
}

@media screen and (max-width: 725px)
{
   .imageLeft
   {
      margin: 0 20px 10px 0;
   }
}

@media screen and (max-width: 400px)
{
   br.clear
   {
      display: none;
   }

   .imageLeft
   {
      min-width: 100%;
   }
}

/*------------------------------------------------------------
   Banner / Header
------------------------------------------------------------*/
.pageFrame
{
   background-color: #fff;
   border: solid 0px #999;
   margin: 0 auto 20px auto;
   width: auto;
   max-width: 1370px;
   max-width: 1200px;
}

header
{
   box-sizing: border-box;
   padding: 20px 0 20px 20px;
}

header img
{
   margin: 0px 20px 20px 0;
   width: calc(20% - 20px);
   float: left;
}

@media screen and (max-width: 1200px)
{
   .pageFrame
   {
      margin: 0 auto 0 auto;
   }
}

@media screen and (max-width: 925px)
{
   .pageFrame
   {
      margin: 0 auto 0 auto;
   }

   header img
   {
      width: calc(25% - 20px);
   }

   header #image2 { display: none; }
   header #image7 { display: none; }
}

@media screen and (max-width: 725px)
{
   header img
   {
      width: calc(33.33% - 20px);
   }

   header #image2 { display: none; }
   header #image4 { display: none; }
   header #image7 { display: none; }
   header #image9 { display: none; }
}

@media screen and (max-width: 525px)
{
   header img
   {
      width: calc(50% - 20px);
   }

   header #image2 { display: none; }
   header #image3 { display: none; }
   header #image4 { display: none; }
   header #image6 { display: none; }
   header #image7 { display: none; }
   header #image9 { display: none; }
}

/*------------------------------------------------------------
 Top Navigation
-------------------------------------------------------------*/
nav
{
   position: relative;
   clear: left;
   margin: 0;
   padding: 0 20px 0 20px;
   height: 26px;
}

nav ul
{
   background-image: url('../graphics/nav-back.jpg');
   background-repeat: no-repeat;
   background-position: bottom left;
   list-style-type: none;
   font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   font-weight: normal;
   letter-spacing: 3px;
   line-height: 1.0;
   color: #000;
   text-transform: uppercase;
   margin: 0;
   padding: 0;
   width: auto;
   height: 26px;
}

nav li
{
   margin: 0;
   padding: 0;
   width: 10%;
   height: 26px;
   float: left;
}

/*
nav li#nav1 { margin-left: 0%; width: 10%; }
nav li#nav2 { width: 10%; }
nav li#nav3 { width: 10%; }
nav li#nav4 { width: 10%; }
nav li#nav5 { width: 10%; }
*/

nav li a, nav li a:link, nav li a:visited
{
   text-decoration: none;
   border-bottom: none;
   text-align: left;
   color: #000;
   padding: 0px 10px 7px 10px;
}

nav li a:hover, nav li a:active, nav li.selected a
{
   text-decoration: none;
   border-bottom: solid 1px #993333;
   color: #993333;
}

#icon-facebook { position: absolute; width: 18px; height: auto; top: -2px; right: 45px; }
#icon-instagram { position: absolute; width: 18px; height: auto; top: -2px; right: 20px; }

@media screen and (max-width: 925px)
{
   nav li
   {
      width: 12.5%;
   }
}

@media screen and (max-width: 725px)
{
   nav li
   {
      width: 16.5%;
   }
}

@media screen and (max-width: 525px)
{
   nav
   {
      height: auto;
      height: 108px;
   }

   nav ul
   {
      background-repeat: repeat-x;
      height: 108px;
   }

   nav li
   {
      display: block;
      width: 50%;
      height: 36px;
      text-align: center;
   }

#icon-facebook { top: auto; right: auto; bottom: 20px; left: calc(75% - 35px); }
#icon-instagram { top: auto; right: auto; bottom: 20px; left: calc(75% - 5px); }
}

/*------------------------------------------------------------
   Home
-------------------------------------------------------------*/
#pageFrameHome { }

#pageFrameHome main
{
   clear: left;
   margin: 0;
   padding: 25px 20px 0 20px;
}

#pageFrameHome #messageBoard
{
   box-sizing: border-box;
   background-color: #383838;
   /* background-image: url('../graphics/chalk-board.jpg'); */
   background-image: url('../graphics/chalk-board-empty.jpg');
   background-position: top right;
   background-size: 100% 100%;
   font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 20px;
   line-height: 1.25;
   color: #ccc;
   padding: 25px 30px 30px 25px;
}

#pageFrameHome #messageBoard h1
{
   font-weight: normal;
   letter-spacing: 4px;
   color: #ccc;
   margin: 0;
   padding: 0;
   font-size: 36px;
}

#pageFrameHome #messageBoard p
{
   margin: 20px 0 0 0;
   padding: 0;
}

#pageFrameHome #messageBoard p:first-of-type
{
   margin: 15px 0 0 0;
}

#pageFrameHome #messageBoard a:link, #pageFrameHome #messageBoard a:visited { color: #ccc; text-decoration: underline; }
#pageFrameHome #messageBoard a:hover, #pageFrameHome #messageBoard a:active { color: #fff; text-decoration: underline; }

#pageFrameHome #instagram
{
   /* background-color: #eee; */
   box-sizing: border-box;
   padding: 20px 0 0 20px;
}

/*
#pageFrameHome #instagram img
{
   margin: 0px 20px 20px 0;
   width: calc(25% - 20px);
   float: left;
}
*/

#pageFrameHome #instagram a.ratio-box {
   position: relative;
   display: block;
   margin: 0px 20px 20px 0;
   width: calc(25% - 20px);
   height: 0;
   height: calc(25% - 20px);
   float: left;
}

#pageFrameHome #instagram a.ratio-box::after {
   display: block;
   content: '';
   padding-bottom: 100%;
}

#pageFrameHome #instagram a.ratio-box img {
    position: absolute;
    object-fit: cover;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


@media screen and (max-width: 925px)
{
   #pageFrameHome #messageBoard
   {
      background-image: url('../graphics/chalk-board-empty.jpg');
      background-position: top left;
      padding: 25px 25px 30px 25px;
   }

   #pageFrameHome #messageBoard p:first-of-type
   {
      margin: 20px 0 0 0;
   }
}

@media screen and (max-width: 725px)
{
   #pageFrameHome #messageBoard
   {
      padding: 20px 20px 25px 20px;
   }

   #pageFrameHome #messageBoard h1
   {
      font-size: 32px;
   }

/*
   #pageFrameHome #instagram img
   {
      width: calc(33% - 20px);
   }
*/

   #pageFrameHome #instagram a.ratio-box {
      width: calc(33% - 20px);
      height: calc(33% - 20px);
   }
 
}

@media screen and (max-width: 500px)
{
   #pageFrameHome #instagram img
   {
      width: calc(50% - 20px);
   }
}


/*--------------------------------------------------
   2 Column - 2 Equal Columns
--------------------------------------------------*/
#pageFrame2C { }

#pageFrame2C main
{
   clear: left;
   margin: 0;
   padding: 35px 30px 0 30px;
}

#pageFrame2C .col1
{
   padding: 0 3% 0 0;
   width: 47%;
   float: left;
}

#pageFrame2C .col2
{
   padding: 0 0 0 3%;
   width: 47%;
   float: left;
}

#pageFrame2C .col1 h2:first-of-type { margin-top: 10px; }
#pageFrame2C .col2 h2:first-of-type { margin-top: 10px; }

@media screen and (max-width: 725px)
{
   #pageFrame2C .col1, #pageFrame2C .col2
   {
      padding: 0;
      width: 100%;
      float: none;
   }
}

/*--------------------------------------------------
   2 Column Left - Narrow Left Column, Wider Right Column
--------------------------------------------------*/
#pageFrame2L { }

#pageFrame2L main
{
   clear: left;
   margin: 0;
   padding: 35px 30px 0 30px;
}

#pageFrame2L .col1
{
   padding: 0 3% 0 0;
   width: 34%;
   float: left;
}

#pageFrame2L .col2
{
   padding: 0 0 0 3%;
   width: 60%;
   float: left;
}

#pageFrame2L .col1 h2:first-of-type { margin-top: 10px; }
#pageFrame2L .col2 h2:first-of-type { margin-top: 10px; }

@media screen and (max-width: 725px)
{
   #pageFrame2L .col1, #pageFrame2L .col2
   {
      padding: 0;
      width: 100%;
      float: none;
   }
}

/*--------------------------------------------------
   2 Column - 2 Equal Columns
--------------------------------------------------*/
#pageFrameFull { }

#pageFrameFull main
{
   clear: left;
   margin: 0;
   padding: 35px 30px 0 30px;
}


#pageFrameFull .col1-3
{
   box-sizing: border-box;
   width: 33%;
   text-align: center;
   margin: 20px 0;
   padding: 0 20px;
   float: left;
}

#pageFrameFull .col1-2
{
   box-sizing: border-box;
   width: 50%;
   text-align: center;
   margin: 40px 0;
   padding: 0 20px;
   float: left;
}

#pageFrameFull .col1-1
{
   box-sizing: border-box;
   width: 100%;
   text-align: center;
   margin: 30px 0;
   padding: 0 20px;
}

#pageFrameFull .padding10 { padding-top: 10px; }
#pageFrameFull .padding20 { padding-top: 20px; }
#pageFrameFull .padding30 { padding-top: 30px; }
#pageFrameFull .padding40 { padding-top: 40px; }
#pageFrameFull .padding50 { padding-top: 50px; }
#pageFrameFull .padding60 { padding-top: 60px; }

@media screen and (max-width: 725px)
{
   #pageFrameFull .col1-3,
   #pageFrameFull .col1-2,
   #pageFrameFull .col1-1
   {
      margin: 0;
      padding: 0;
      width: 100%;
      float: none;
      padding-top: 35px;
   }

   #pageFrameFull .col1-3:first-of-type
   {
      padding-top: 0;
   }
}

/*------------------------------------------------------------
   Content Type - Tables
------------------------------------------------------------*/
/* Tables */
.table1-4, .table1, .table2, .table3, .table4, .table5
{
   /* font-family: arial, helvetica, verdana, sans-serif; */
   font-family: inherit;
   border-collapse: collapse;
   border: 0;
   box-sizing: border-box;
   margin: 10px 0 20px 0;
   width: auto;
   max-width: 100%;
   min-width: 200px;
}

/*
.table5
{
   display: table;
   width: 100%;
}
*/

/* TH - Headings */
.table1-4 th
{
   box-sizing: border-box;
   font-family: inherit;
   font-size: 1rem;
   line-height: 1;
   padding: 6px 8px 6px 8px;
   text-align: left;
   vertical-align: bottom;
}

.table1 th
{
   background-color: $primary_color;
   font-weight: normal;
   color: #fff;
   padding: 6px 8px 4px 8px;
}

.table2 th
{
   background-color: $primary_color;
   font-weight: normal;
   color: #fff;
   padding: 6px 8px 4px 8px;
}

.table3 th
{
   border-bottom: solid 1px #c2c2c2;
   font-weight: bold;
   color: #252525;
   padding: 4px 4px 4px 0;
}

.table4 th
{
   font-weight: bold;
   color: #252525;
   padding: 4px 4px 4px 0;
}

.table5 th
{
   font-size: .9rem;
   line-height: 1.2;
   font-weight: normal;
   color: #252525;
   padding: 4px 6px 4px 0;
}


/* TD - Cells */
.table1-4 td
{
   box-sizing: border-box;
   border: none;
   font-size: inherit;
   line-height: inherit;
   font-weight: normal;
   vertical-align: top;
}

.table1 td
{
   border: solid 1px #c2c2c2;
   border-top: none;
   padding: 6px 8px 6px 8px;
}

.table2 td
{
   border-bottom: solid 1px #c2c2c2;
   padding: 6px 8px 6px 8px;
}

.table3 td
{
   border-bottom: solid 1px #c2c2c2;
   padding: 6px 4px 6px 0;
}

.table3 tr:last-child td { /* border: none; */ }

.table4 td
{
   padding: 6px 4px 6px 0;
}

.table5 td
{
   padding: 6px 6px 6px 0;
}


/* Table - Alternating row colors */
.table1 tr.highlight td,
.table2 tr.highlight td,
.table5 tr.highlight td,
.table5 tr:nth-child(odd) td
{
   background-color: #f4f4f4;
}

.table1-4 td .label { display: none; }

.table5 td .label
{
   font-weight: normal;
   font-style: italic;
}

.table1-4 td.link:hover { cursor: pointer; background-color: #eee; }

/* Table Images in td's */
.table1-4 .imageLeft { margin: 0px 15px 0px 0px; }
.table1-4 .imageRight { margin: 0px 0px 0px 10px; }

/* Table Paragraphs */
.table1-4 p { font-size: inherit; line-height: 1.2; }
.table1-4 p:last-child { margin: 0; }

.table1-4 .alignLeft { text-align: left; }
.table1-4 .alignCenter { text-align: center; }
.table1-4 .alignRight { text-align: right; }

.table1-4 caption
{
   caption-side: bottom;
   font-size: inherit;
   font-weight: normal;
   font-style: normal;
   text-align: left;
   padding: 6px 0 0 0;
   color: #666;
}

.table1-4 td select
{
   margin-top: 10px;
}

.table1-4 td input[type=image]
{
   max-width: 100px;
   margin-top: 10px;
}

.p + .table1-4 { }

table.width5, table .width5 { width: 5%; }
table.width10, table .width10 { width: 10%; }
table.width15, table .width15 { width: 15%; }
table.width20, table .width20 { width: 20%; }
table.width25, table .width25 { width: 25%; }
table.width30, table .width30 { width: 30%; }
table.width35, table .width35 { width: 35%; }
table.width40, table .width40 { width: 40%; }
table.width45, table .width45 { width: 45%; }
table.width50, table .width50 { width: 50%; }
table.width55, table .width55 { width: 55%; }
table.width60, table .width60 { width: 60%; }
table.width65, table .width65 { width: 65%; }
table.width70, table .width70 { width: 70%; }
table.width75, table .width75 { width: 75%; }
table.width80, table .width80 { width: 80%; }
table.width85, table .width85 { width: 85%; }
table.width90, table .width90 { width: 90%; }
table.width95, table .width95 { width: 95%; }
table.width100, table .width100 { width: 100%; }

/* No need for hamburger tables on this site!!! */
@media screen and (max-width: 0px)
{
   /* Hamburger Tables on Phone - Columns are stacked!!! */
   .table1-4, .table1, .table2, .table3, .table4, .table5
   {
      margin: 10px 0px;
      width: 100%;
      max-width: 100%;
   }

   /* Hamburger TH - Display first th only, turn rest of th's off. */
   .table1 th, .table2 th, .table3 th, .table4 th
   {
      display: none;
   }

   /* Hamburger TH - Display first th only, turn rest of th's off. */
   .table1 th:first-child, .table2 th:first-child,
   .table3 th:first-child, .table4 th:first-child
   {
      display: block;
      padding: 6px 0 6px 0;
      width: 100%;
   }

   .table1 td, .table2 td, .table3 td, .table4 td
   {
      display: inline-block;
      border: none;
      padding: 8px 8px 8px 8px;
      vertical-align: middle;
      width: 100%;
   }

   .table1 td
   {
      border-left: solid 1px #c2c2c2;
      border-right: solid 1px #c2c2c2;
   }

   .table2 td
   {
      border-left: solid 1px #c2c2c2;
      border-right: solid 1px #c2c2c2;
   }

   .table3 td
   {
      padding: 8px 0 8px 0;
   }

   .table4 td
   {
      padding: 8px 0 8px 0;
   }

   /* Hamburger TD Empty - don't show empty td's when they are stacked */
   .table1-4 td.empty { display: none; }

   /* Hamburger Table TD Heading/Label - First th is already displayed, don't display label too */
   .table1-4 tr td:first-child .label { display: none; }

   /* Hamburger TD Heading/Label - Display TH text as a label inside the TD.
      Allows headings to be displayed above text in cell */
   .table1-4 td .label
   {
      display: block;
      font-weight: bold;
      padding: 0px 0 4px 0;
   }

   .table1 tr td:last-child,
   .table2 tr td:last-child,
   .table3 tr td:last-child
   {
      border-bottom: solid 1px #c2c2c2;
   }

   .table1 .alignRight { text-align: left; }
   .table2 .alignRight { text-align: left; }
   .table3 .alignRight { text-align: left; }
   .table4 .alignRight { text-align: left; }

   /* .width5 - .width100 */
   .table1 [class^="width"] { width: 100%; }
   .table2 [class^="width"] { width: 100%; }
   .table3 [class^="width"] { width: 100%; }
   .table4 [class^="width"] { width: 100%; }
}

/*------------------------------------------------------------
   Footer
-------------------------------------------------------------*/
footer
{
   clear: left;
   position: relative;
   background-color: #e7e9eb;
   font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 17px;
   line-height: 20.5px;
   margin: 70px 0 0 0;
   height: 130px;
}

footer strong
{
   font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
   font-size: 19px;
}

footer .bullet
{
   color: #666;
}

footer #footerDecoration
{
   background-image: url('../graphics/footer-decoration75p.png');
   background-position: left 0;
   background-repeat: no-repeat;

   position: absolute;
   top: -28px;
   left: 0;
   height: 35px;
   width: 100%;
}

footer #footerAddress
{
   position: absolute;
   top: 20px;
   left: 25px;
}

footer #website
{
   display: block;
   font-size: 14px;
   margin-top: 2px;
}

footer #footerMission
{
   position: absolute;
   top: 20px;
   right: 25px;
   text-align: right;
}

footer #footerIcons
{
   position: absolute;
   top: 50px;
   right: 25px;
   text-align: right;
 }

footer #footerIcons img
{
   margin-left: 4px;
   width: 18px;
   height: auto;
}

@media screen and (max-width: 700px)
{
   footer
   {
      /* margin: 40px 0 0 0; */
      height: 210px;
   }

   footer #footerMission
   {
      top: 25px;
      left: 25px;
      text-align: left;
   }

   footer #footerAddress
   {
      top: 65px;
      left: 25px;
   }

   footer #footerIcons
   {
      top: 140px;
      left: 20px;
      text-align: left;
   }
}

@media screen and (max-width: 400px)
{
   footer
   {
      font-size: 15px;
   }

   footer strong
   {
      font-size: 17px;
   }

   footer #footerMission,
   footer #footerAddress
   {
      left: 20px;
   }

   footer #footerIcons
   {
      left: 15px;
   }