@charset "utf-8";
/*--  Last updated:  03-Oct-2018    Version: 1.0                   */
/*--  Copyright 2016  MusicBiz Enterprises, All rights reserved.   */
/*--  03-Oct-2018:  added html height 100%                         */
/*--  03-Oct-2018:  added flex classes                             */


html {
   height: 100%;
   }



/*--------------------------------------------------------------------------------*/
/* add reset styling                                                              */
/* http://meyerweb.com/eric/tools/css/reset/                                      */
/* v2.0 | 20110126                                                                */
/* License: none (public domain)                                                  */
/*--------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}

/*--------------------------------------*/
/*  colors                              */
/*  white      = "rgb(255,255,255)";    */
/*  black      = "rgb(0,0,0)";          */ 
/*--------------------------------------*/


/*---------------------------------------------*/
/* all screen styles -- includes small screens */
/*---------------------------------------------*/
* {
   /* the following box-sizing includes borders within element widths */
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


body { 
   font-family: Arial, Helvetica, sans-serif, 'Raleway'; 
   font-size: 62.5%;  /*change default font-size from 18px to 10 px to make 1em = 10px  */
   font-weight: normal;
   font-style: normal;
   background-color: white;
   color: black; 
} 
/*-----------------------*/
/* header and p elements */
/*-----------------------*/
h1 {
   margin-top: 1em;
   margin-bottom: 1em;
   font-family: Arial, Helvetica, sans-serif, 'Raleway'; 
   font-size: 3em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 3rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: normal;
   color: black;
   text-align: left;
}
h2 {
   margin-top: 0.7em;
   margin-bottom: 0.7em;
   font-family: Arial, Helvetica, sans-serif, 'Raleway'; 
   font-size: 2.5em;       /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 2.5rem;      /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: bold;
   color: #30C;
   text-align: left;
}
h3 {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   font-family: Arial, Helvetica, sans-serif, 'Raleway'; 
   font-size: 2em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 2rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: bold;
   color: black;
   text-align: left;
}
h4 {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   font-family: Arial, Helvetica, sans-serif, 'Raleway'; 
   font-size: 1.5em;       /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1.5rem;      /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: bold;
   color: black;
   text-align: left;
}
h5 {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   font-family: Arial, Helvetica, sans-serif, 'Raleway'; 
   font-size: 1.5em;       /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1.5rem;      /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: bold;
   color: #30C;
   text-align: left;
}
h6 {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   font-family: Arial, Helvetica, sans-serif, 'Raleway'; 
   font-size: 1em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: bold;
   color: black;
   text-align: left;
}
p {
   font-family: Arial, Helvetica, sans-serif, 'Raleway'; 
   font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   color: black;
   text-align: left;
}

h1.left {
   text-align: left;
}
h2.left {
   text-align: left;
}
h3.left {
   text-align: left;
}
h4.left {
   text-align: left;
}
h5.left {
   text-align: left;
}
h6.left {
   text-align: left;
}
p.left {
   text-align: left;
}
h1.center {
   text-align: center;
}
h2.center {
   text-align: center;
}
h3.center {
   text-align: center;
}
h4.center {
   text-align: center;
}
h5.center {
   text-align: center;
}
h6.center {
   text-align: center;
}
p.center {
   text-align: center;
}
h1.right {
   text-align: right;
}
h2.right {
   text-align: right;
}
h3.right {
   text-align: right;
}
h4.right {
   text-align: right;
}
h5.right {
   text-align: right;
}
h6.right {
   text-align: right;
}
p.right {
   text-align: right;
}

/*----------*/
/* images   */
/*----------*/
/* use with caution!! -- image will fill width 
img {   
   width: 100%;
   max-width: 100%;
   height: auto;
}
*/

/*---------------*/
/* list elements */
/*---------------*/
ul, ol, dl {
   list-style: disc;
   margin: 15px 0 5px 4%;
   padding: 0;
   text-align: left;
   font-size: 1em;
   font-size: 1rem;
}
li {
   list-style: disc;
   margin: 5px 0 5px 10%;
   padding: 0;
   text-align: left;
   font-size: 1em;
   font-size: 1rem;
}

/*---------*/
/* anchors */
/*---------*/
a {
   color: #30C;  /* blue */
   text-decoration: underline; 
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
   border: none;
}
a:link {
   color: #30C;
   background-color: transparent;
   text-decoration: underline; 
}
a:visited {
   color: #30C;
   background-color: transparent;
   text-decoration: underline;
}


/*-----------------*/
/* mobile gen menu */
/*-----------------*/
.genNavbar {
/*
   display: block;
   clear: both;
   float: left;
   position: fixed;
   z-index: 10;
   margin-top: 3em;
   /* top: 120px; */
   /* left: 0px; */
}
.genNavButton {
}

.genMenu {
/*    z-index: 10;

    position: fixed;
    top: 115px;
    left: 200px;
*/
    margin:  0 0 0 2.5%;
    padding: 0px;
    border: 0px;
    text-align: left;
    color: black;
    background-color: white;
    cursor: pointer;
}
.genMenu_Bar {
}
.genMenu_Button {
}
.genMenu_mainBox {
    width: 200px;
    visibility: hidden;
}

.genMenuItem {
   margin-left: 0px;
   font-size: 1.5em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1.5rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: bold;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   padding-left: 0px;
   border: 1px solid white;
}
.genMenuItem_link {
}
.genMenuItem_Lv0 {
    /*position: relative; */
    color: white;
    background: rgb(100,100,100);  /* grey */
    margin-left: 3px;
    padding-left: 10px;
    padding-right: 3px;
}
.genMenuItem_Lv0_indent1 {
    padding-left: 30px;
}
.genMenuItem_Lv0Active {
    color: black;
    background-color: white;
    cursor: pointer;
}
.genMenuItem_Lv0InActive {
    color: white;
    background-color: grey;
    cursor: default;
}

.genMenuListBox {
    width: 160px;
    visibility:hidden;
}

.genMenuList {
    margin-left: 0px;
    padding-left: 0px;
    color: white;
    background: rgb(100,100,100);  /* grey */
}
ul.genMenuList {
    list-style: none; /* this removes the list marker */
    color: white;
    background-color: rgb(100,100,100);  /* grey */
}
.genMenuList li {
    list-style: none; /* this removes the list marker */
    margin: 0;
    color: white;
    background-color: rgb(100,100,100);  /* grey */
}
.genMenuList li a {
    margin: 0;
    color: white;
    background-color: rgb(100,100,100);  /* grey */
    text-decoration: none;  /* this removes the underline */
}
.genMenuItem_Exit {
    margin-left: 0px;
    font-size: 1.5em;         /* relative to current element font-size -- nesting inheritance applies         */
    font-size: 1.5rem;        /* relative to root default font-size -- place after em, since rem is css3      */
    font-weight: bold;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 5px;
    border: 1px solid white;
}
/*
.genMenuItem_Exit a:visited {
    color: black;
    background-color: rgb(100,100,100); 
}
.genMenuItem_Exit a:hover {
    color: black;
    background-color: white;
}
.genMenuItem_Exit:visited {
    color: black;
    background-color: rgb(100,100,100); 
}
.genMenuItem_Exit:hover {
    color: black;
    background-color: white;
}
*/

.genMenuItem_List {
   padding-left:5px;
}
.genMenuItem_List:visited {
    color: black;
    background-color: rgb(100,100,100);  /* grey */
}
.genMenuItem_List a:visited {
    color: black;
    background-color: rgb(100,100,100);  /* grey */
}




/*------------*/
/* ~~Header~~ */
/*------------*/
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
header {
   width: 100%;
   /* height: 10em; */
   background-color: white; 
   /* background-color: rgb(129,197,224); */
   /* background-image: url('/m/images/mHeader.png'); */
   /* background-repeat: no-repeat; */
   /* background-size: cover; */
   /* background-position: 0% 100%; */
   /* border: 2px solid rgb(129,197,224); */
}
.mHeader_img {
   display: block;
   margin: auto;
   }


.mContainer_Header {
   display: block;
   clear: both;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 10;
   width: 100%;
   height: 160px;
   background-color: transparent;
}

/*--------------*/
/* Header Logo  */
/*--------------*/
.mHeader_Box_Logo {
   clear: both;
   float: left;
   width: 25%
}
.mHeader_Logo_PhotoBox {
   float: left;
   width: 100%;
   padding: 10px 0 10px 0;
   color: black;
   background-color: transparent;
}
.mHeader_Logo_Pic {
}
img.mHeader_Logo_Pic {
   width: 300px;
   margin: 0 0 0 5%;
}


/*---------------*/
/* Header Icons  */
/*---------------*/
.mHeader_Box_Icons {
   float: right;
   width: 75%;
   height: 80px;
}
.mHeader_Nav_navButton {
   float: right;
   width: 30%;
   padding-right: 2%
}
.mHeader_Icons_links {
   float: right;
   width: 70%;
   padding: 0;
   margin: 50px 10% 0 0;
}
.Nav_linkIcon {
   float: right;
   margin-right: 20px;
}

.mHeader_Nav_navButton {
}
#mNav_top_button {
   float: right;
   margin: 40px 10% 0 0;
   padding: 0;
}
img#mNav_top_button {
   width: 100px;
   height: auto;
}
.mHeader_Nav_navButtonMenu {
   float: right;
   margin: 0 5% 0 0;
   padding: 0;
}
#mNav_ButtonMenu {
}
#mNav_ButtonMenu .genMenuItem {
   margin: 0;
   padding: 5px 0 0 5%;
   font-size: 1.5em;         
   font-size: 1.5rem;        
   font-weight: bold;
}

/*---------------*/
/* Header Menu   */
/*---------------*/
.mHeader_Box_Menu {
   float: left;
   width: 75%;
   font-size: 2em;
   padding: 0 0 0 0;
   text-align: center;
}
.mHeader_Menu_navBarMenu {
   float: left;
   width: 100%;
   margin: 40px 0 0 0;
}
.mHeader_navBarMenu {
   float: left;
   margin: 0;
   padding: 0;
}
#mNav_BarMenu {
}
#mNav_BarMenu .genMenuItem {
   float: left;
   margin: 0;
   padding: 0 0 0 4%;
   font-size: 1.5em;         
   font-size: 1.5rem;        
   font-weight: bold;
}



/*------------------*/
/* mobile container */
/*------------------*/
.mContainer {
   color: black;
   background: white;
}
.mContentCentered {
   display: block;
   clear: both;
   width: 100%;
   margin: 0 auto;
}

/*--------------------*/
/* mobile flexWrapper */
/*--------------------*/

/* Sticky Footer                              */
/* sgospHTML_gtHeader moved inside mContainer */
/* Footer moved outside mContainer            */
body {
   display: flex;
   flex-direction: column;
   min-height: 100%;
   }

.mContainer {
   flex: 1;
   }

.flexRow {
   display: flex;
   flex-direction: row;
   width: 100%;
   align-items: center;      /* vertical   alignment */
   justify-content: center;  /* horizontal alignment */
   }
.flexRow_25 {
   display: flex;
   flex-direction: row;
   width: 25%;
   align-items: center;
   justify-content: center;
   }
.flexRow_33 {
   display: flex;
   flex-direction: row;
   width: 33%;
   align-items: center;
   justify-content: center;
   }
.flexRow_50 {
   display: flex;
   flex-direction: row;
   width: 50%;
   align-items: center;
   justify-content: center;
   }
.flexRow_noJustify {
   display: flex;
   flex-direction: row;
   align-items: center;      /* vertical   alignment */
   width: 100%;
   }
.flexItem {
   display: flex;
   height: 100px;       /* change this as needed  */
   width: 25%;          /* change width as needed */
   /* flex: 0 0 100%;   /* overrides height and with properties      */
                        /* flex-grow, flex-shrink, flex basis        */
                        /* flex: 1 1 auto; grow/shrink automatically */
                        /* flex-shrink set 0 like minimum width      */
                        /* flex: 0 0 50px; no grow/shrink 50px       */
                        /* flex: 0 0 50%; no grow/shrink from 50%    */
   }
.flexItem_rowStart {
   align-items: flex-start;
   }
.flexItem_rowCenter {
   align-items: center;
   }
.flexItem_rowEnd {
   align-items: flex-end;
   }

.flexColumn {
   display: flex;
   flex-direction: column;
   width: 100%;
   align-items: center;      /* vertical   alignment */
   }
.flexColumn_25 {
   display: flex;
   flex-direction: column;
   width: 25%;
   align-items: center;      /* vertical   alignment */
   }
.flexColumn_33 {
   display: flex;
   flex-direction: column;
   width: 33%;
   align-items: center;      /* vertical   alignment */
   }
.flexColumn_50 {
   display: flex;
   flex-direction: column;
   width: 50%;
   align-items: center;      /* vertical   alignment */
   }



/*--------------*/
/* Legacy Menu  */
/*--------------*/

#mNavMenu {
   display: block;
   clear: both;
   float: left;
   position: absolute;
   z-index: 10;
   margin-top: 3em;
   /* top: 120px; */
   /* left: 0px; */
   width: 300px;
   color: black;
   background-color: white;
   border: 0px solid black;
   visibility: hidden;
}
.mNavMenu ul {
   list-style: none; /* this removes the list marker */
}
.mNavMenu ul li {
   list-style: none; /* this removes the list marker */
}
.menuItem {
   margin-left: 0px;
   font-size: 1.5em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1.5rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: bold;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   border: 1px solid white;
}
.menuItem li a:link {
   list-style: none; /* this removes the list marker */
   text-decoration: none;
   color: black;
   background-color: white;
}
.menuItem li a:visited {
   list-style: none; /* this removes the list marker */
   text-decoration: none;
   color: black;
   background-color: white;
}
.menuItem_Level0 {
    padding-left: 10px;
}
.menuItem_Level1 {
    padding-left: 30px;
}

/*-------------------*/
/* mobile banner box */
/*-------------------*/
.mBannerBox {
   float: left;
   width: 100%;
   margin: 0em;
   padding: 0em;
   margin-top: 1em;
}
.mBanner {
   display: block;
   clear: both;
   width: 100%;
   margin:   auto;
   font-size: 2em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 2rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: bold;
   text-align: center;
   color: black;
   background-color: white;
}
.mBannerText {
   display: block;
   clear: both;
   width: 100%;
   margin:   1em auto;
   text-align: center;
   font-size: 2em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 2rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   color:  black;
}
.mBannerPic_Box {
   display: block;
   clear: both;
   width: 100%;
   margin:   2em auto 0em auto;
   /* background-color: red; */
}
.mBannerPic {
   display: block;
   clear: both;
   margin:  1em auto;
}

/*------------------------*/
/* mobile Picture nav box */
/*------------------------*/
.mNavBox {
   display: block;
   clear: both;
   width: 100%;
   margin-top: 1em;
   padding: 0em;
   /* background-color: red; */
}
.mNavBox_Text {
   display: block;
   clear: both;
   margin:   2em auto 0em auto;
   color:  black;
   text-align: center;
   font-size: 2em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 2rem;        /* relative to root default font-size -- place after em, since rem is css3      */
}
.mNavBox_Text p {
   color: #30C;
   text-align: center;
}
.mNavPic_Box {
   display: block;
   clear: both;
   width: 100%;
   margin:   2em auto 0em auto;
   /* background-color: red; */
}
.mNavPic {
   display: block;
   clear: both;
   margin:  1em auto;
}


/*-------------------*/
/* mobile expand box */
/*-------------------*/
.mExpandContainer {
   float: left;
   width: 100%;
   color:  black;
   background-color: white;
}
.mExpandBox {
   float: left;
   width: 89%;
   margin: 20px 5% 0 5%;
   border: 1px solid rgb(129,197,224);
}
.mExpandTitle {
   display: block;
   clear: both;
   width: 100%;
   margin:   1em auto;
   text-align: center;
   font-weight: bold;
   /* font-size: 2em;            set below in @media queries  */
   /* font-size: 2rem;           set below in @media queries  */
   color:  black;
}
.mExpandText {
   display: block;
   clear: both;
   width: 100%;
   margin:   0.5em 0 0.5em 0;
   text-align: center;
   /* font-size: 2em;            set below in @media queries  */
   /* font-size: 2rem;           set below in @media queries  */
   color:  black;
}
.mExpandPic_Box {
   display: block;
   clear: both;
   width: 100%;
   margin:   2em auto 0em auto;
   /* background-color: red; */
}
.mExpandPic {
   display: block;
   clear: both;
   margin:  1em auto;
}



/*-------------------*/
/* mobile Text box   */
/*-------------------*/
.mTextContainer {
   width:  320px;
   color:  black;
   background-color: white;
}
.mTextBox {
   width: 97%;
   height: 320px;
   margin: 1%;
   border: 1px solid rgb(129,197,224);
}
.mTextTitle {
   width: 100%;
   padding-top: 1em;
   /* font-size: 2em;            set below in @media queries  */
   /* font-size: 2rem;           set below in @media queries  */
   text-align: center;
}
.mTextTitle2 {
   width: 100%;
   padding-top: 1em;
   /* font-size: 2em;            set below in @media queries  */
   /* font-size: 2rem;           set below in @media queries  */
   text-align: center;
}
.mTextContent {
   width: 100%;
   /* padding: 1em 1em 1em 1em;  set below in @media queries  */
   /* font-size: 1.5em;          set below in @media queries  */
   /* font-size: 1.5rem;         set below in @media queries  */
   text-align: center;
   font-weight: normal;
}

/*---------------*/
/* mobile Photo  */
/*---------------*/
.mPhotoContainer {
   width:  100%; 
   background-color: white;
}
.mPhotoBox {
   display: block;
   clear: both;
   width: 360px;
   margin:   2em auto 0em auto;
}
.mPhotoPic {
   display: block;
   clear: both;
   margin:  1em auto;
}
.mPhotoText {
   display: block;
   clear: both;
   width: 100%;
   margin:   0.5em 0 0.5em 0;
   text-align: center;
   font-size: 1em;            /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1rem;           /* relative to root default font-size -- place after em, since rem is css3      */
   color:  black;
}
img.mPhotoPic {
   width: 320px;
   height: auto;
}


/*---------------*/
/* mobile Video  */
/*---------------*/
.mVideoContainer {
   width:  100%; 
   background-color: white;
}
.mVideoBox {
   display: block;
   clear: both;
   width: 360px;
   margin:   2em auto 0em auto;
}
.mVideoLink {
   display: block;
   clear: both;
   width: 320px;
   margin:  1em auto;
}
.mVideo_iFrame {
   width:  320px;
   height: 180px;
   margin:  0em auto;
}
.mVideoText {
   display: block;
   clear: both;
   width: 100%;
   margin:   0.5em 0 0.5em 0;
   text-align: center;
   font-size: 1em;            /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1rem;           /* relative to root default font-size -- place after em, since rem is css3      */
   color:  black;
}



/*-------------------*/
/* mobile News  box  */
/*-------------------*/
.mNewsContainer {
   width:  320px;
   color:  black;
   background-color: white;
}
.mNewsTitle {
   width: 100%;
   margin-top: 1em;
   margin-top: 2rem;
   padding-top: 1em;
   padding-top: 2rem;
   text-align: center;
   /* font-size: 2em;            set below in @media queries  */
   /* font-size: 2rem;           set below in @media queries  */
   color:  black;
   background-color: white;
}
.mNewsBox {
   width: 98%;
   /* height: 300px; */
   margin: 1%;
   padding: 0 0 1em 0;
   border: 1px solid black;
   overflow-x: hidden;
   overflow-y: hidden;
   background-color: rgb(50,50,50);
}

.mNewsItem {
   float: left;
   width: 94%;
   margin: 1.5em 0 0 0;
   padding: 0 3% 0 3%;
   /* font-size: 1em;            set below in @media queries  */
   /* font-size: 1rem;           set below in @media queries  */
}
.mNewsRow {
   float: left;
   width: 100%;
   margin: 0;
   padding: 0;
}
.mNewsHeadline {
   float: left;
   width: 98%;
   margin: 0;
   padding: 0 2% 0 0;
   font-size: 1em;
   font-size: 1rem;
   font-weight: bold;
   overflow: hidden;
}
.mNewsDate {
   float: left;
   width: 100%;
   margin: 0;
   padding: 0;
   overflow: hidden;
}
.mNewsText {
   float: left;
   width: 95%;
   margin: 0 0 0 3%;
   padding: 0 2% 0 0;
}
.mNewsLink {
   float: left;
   width: 95%;
   margin: 0 0 0 3%;
   padding: 0 2% 0 0;
}
.mMoreLink {
   float: left;
   width: 100%;
   padding-top: 0.5em;
   font-size: 1.5em;
   font-size: 1.5rem;
   text-align: center;
}

/*-------------------*/
/* mobile Event box  */
/*-------------------*/
.mEventContainer {
   width:  320px;
   color:  black;
   background-color: white;
}
.mEventBox {
   width: 98%;
   /* height: 300px; */
   margin: 1%;
   padding: 0 0 1em 0;
   border: 1px solid black;
   overflow-x: hidden;
   overflow-y: hidden;
   background-color: rgb(50,50,50);
}

.mEventItem {
   float: left;
   width: 94%;
   margin: 1.5em 0 0 0;
   padding: 0 3% 0 3%;
   /* font-size: 1em;            set below in @media queries  */
   /* font-size: 1rem;           set below in @media queries  */
}
.mEventRow {
   float: left;
   width: 100%;
   margin: 0;
   padding: 0;
}
.mEventTitle {
   float: left;
   width: 98%;
   margin: 0;
   padding: 0 2% 0 0;
   font-size: 1em;
   font-size: 1rem;
   font-weight: bold;
   overflow: hidden;
}
.mEventDateTime {
   float: left;
   width: 50%;
   margin: 0;
   padding: 0;
   overflow: hidden;
}
.mEventText {
   float: left;
   width: 95%;
   margin: 0 0 0 3%;
   padding: 0 2% 0 0;
}
.mEventLink {
   float: left;
   width: 95%;
   margin: 0 0 0 3%;
   padding: 0 2% 0 0;
}
.mMoreEventsLink {
   float: left;
   width: 100%;
   padding-top: 1em;
   font-size: 1.5em;
   font-size: 1.5rem;
   text-align: center;
}


/*----------------------*/
/* mobile Schedule box  */
/*----------------------*/
.mScheduleContainer {
   width:  320px;
   color:  black;
   background-color: white;
}
.mScheduleHeaderBox {
   width: 100%;
   margin-top: 1em;
   margin-top: 2rem;
   font-size: 150%;
   color:  black;
   background-color: white;
}
.mScheduleHeader {
   float: left;
   width: 100%;
   margin-top: 1em;
   margin-top: 2rem;
   padding-top: 1em;
   padding-top: 2rem;
   text-align: center;
   /* font-size: 2em;            set below in @media queries  */
   /* font-size: 2rem;           set below in @media queries  */
   color:  black;
   background-color: white;
}
.mScheduleBox {
   width: 98%;
   /* height: 300px; */
   margin: 1%;
   padding: 0 0 1em 0;
   border: 1px solid black;
   overflow-x: hidden;
   overflow-y: hidden;
   background-color: rgb(50,50,50);
}
.mScheduleItem {
   float: left;
   width: 94%;
   margin: 1.5em 0 0 0;
   padding: 0 3% 0 3%;
   /* font-size: 1em;            set below in @media queries  */
   /* font-size: 1rem;           set below in @media queries  */
}
.mScheduleRow {
   float: left;
   width: 100%;
   margin: 0;
   padding: 0;
}
.mScheduleTitle {
   float: left;
   width: 98%;
   margin: 0;
   padding: 0 2% 0 0;
   font-size: 1em;
   font-size: 1rem;
   font-weight: bold;
   overflow: hidden;
}
.mScheduleDateTime {
   float: left;
   width: 50%;
   margin: 0;
   padding: 0;
   overflow: hidden;
}
.mScheduleText {
   float: left;
   width: 95%;
   margin: 0 0 0 3%;
   padding: 0 2% 0 0;
}
.mScheduleLink {
   float: left;
   width: 95%;
   margin: 0 0 0 3%;
   padding: 0 2% 0 0;
}
.mMoreSchedulesLink {
   float: left;
   width: 100%;
   padding-top: 1em;
   font-size: 1.5em;
   font-size: 1.5rem;
   text-align: center;
}



/*------------*/
/*   Footer   */
/*------------*/
footer {
   width: 100%;
}
#mNav_footer_link {
   display: block;
   clear: both;
   float: left;
   text-align: left;
   margin-top: 1em;
   font-size: 1.5em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1.5rem;        /* relative to root default font-size -- place after em, since rem is css3      */
}
.mFooterBox {
   clear: both; 
   width: 100%;
   /* height: 300px; */
   margin: 0 0 2em 0;
   padding: 0;
   font-family: 'Raleway', Arial, Helvetica, sans-serif;
   font-size: 1em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   color: black;
   text-align: center;
   background-color: white;
}
.mFooterBox p {
   margin-top: 1em;
   text-align: center;
   font-size: 1em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   color: white;
}
#mFooter_linkMenu {
   clear: both;
   float: left;
   width: 100%;
   /* margin: 0 auto; */
   text-align: left;
   color: black;
   background-color: white;
   /*background-color: red;    /* green */
}
.mFooter_linkMenu ul {
   list-style: none; /* this removes the list marker */
}
.mFooter_linkMenu ul li {
   list-style: none; /* this removes the list marker */
}
.mFooter_menuItem {
   margin-left: 0px;
   font-size: 1em;         /* relative to current element font-size -- nesting inheritance applies         */
   font-size: 1rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   font-weight: bold;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   border: 0px solid white;
}
.mFooter_menuItem li a:link {
   list-style: none; /* this removes the list marker */
   text-decoration: underline;
   color: black;
   background-color: white;
}
.mFooter_menuItem li a:visited {
   list-style: none; /* this removes the list marker */
   text-decoration: underline;
   color: black;
   background-color: white;
}
.mFooter {
   clear: both;
   text-align: center;
   }

/*-------------*/
/* Splash Page */
/*-------------*/
.m_genSplash_page {
   height: 600px;
   margin: 0;
   padding: 0;
   padding-top: 20px;
   background-color: transparent;
}
#m_genSplash_textHeader {
   font-family: cursive;
   font-size:   150%;
}
#m_genSplash_text1 {
   font-size:   90%;
   padding-top: 20px;
}
#m_genSplash_text2 {
   font-size:   90%;
   padding-top: 20px;
}
#m_genSplash_text3 {
   font-size:   90%;
   padding-top: 20px;
}
#m_genSplash_text4 {
   font-size:   90%;
   padding-top: 20px;
}

#m_genSplash_linkBox {
   clear: both;
   width: 100%;
   height: 100px;
   margin: 40px 0% 20px 0%;
   padding: 0;
   padding-top: 25px;
   background-color: transparent;
   text-align: center;  
}
.m_genSplash_siteLinkBox {
   clear: both;
   width: 100%;
   height: 50px;
   margin: 0;
   padding: 0;
   background-color: blue;
   text-align: center;  
}
.m_genSplash_siteLink {
   height: 50px;
 }
.m_genSplash_siteLink p {
   padding: 10px 5% 0 5%;
   font-size: 60%;
 }
.m_genSplash_siteLink a {
   text-decoration: none;  /* this removes the underline */
}

/*----------------------------------------------------------------------------------------*/
/* small screen styles -- overwritten by mid-screen and large screen media queries below  */
/*----------------------------------------------------------------------------------------*/
@media only screen and (max-width: 360px) {
   .mContainer {
      max-width: 360px;
      margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */   
   }
   .mContentResponsive {
      display: block;
      clear: both;
      width: 100%;
      margin: 0 auto;      
      }
   .mExpandTitle {
      font-size: 2em;            /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;           /* relative to root default font-size -- place after em, since rem is css3      */
      }
   .mExpandText {
      font-size: 2em;            /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;           /* relative to root default font-size -- place after em, since rem is css3      */
      }
   .mTextContainer {
      display: block;
      clear: both;
      margin:  1em auto;
   }
   .mTextTitle {
      font-size: 2.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mTextTitle2 {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mTextContent {
      font-size: 1.5em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.5rem;        /* relative to root default font-size -- place after em, since rem is css3      */
      padding: 1em 1.5em 1em 1.5em;
   }
   article {
      -moz-column-count: 1;
      -webkit-column-count: 1;
      column-count: 1;
   }
   .mNewsContainer {
      display: block;
      clear: both;
      margin:  1em auto;
   }
   .mNewsTitle {
      font-size: 2.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mNewsItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mEventContainer {
      display: block;
      clear: both;
      margin:  1em auto;
   }
   .mEventItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mScheduleContainer {
      display: block;
      clear: both;
      margin:  1em auto;
   }
   .mScheduleHeader {
      font-size: 2.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mScheduleItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
}

/*---------------------*/
/* mid screen styles   */
/*---------------------*/
@media only screen and (min-width: 361px) and (max-width: 800px) {

   .mContainer {
      max-width: 800px;
      margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */   
   }
   .mBanner {
      width: 70%;
   }
   .mBannerText {
      width: 50%;
   }
   .mExpandTitle {
      font-size: 2em;            /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;           /* relative to root default font-size -- place after em, since rem is css3      */
      }
   .mTextTitle2 {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mExpandText {
      font-size: 2em;            /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;           /* relative to root default font-size -- place after em, since rem is css3      */
      }
   .mTextContainer {
      float: left;
      margin-top: 1em;
   }
   .mTextTitle {
      font-size: 2em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mTextContent {
      font-size: 1.5em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.5rem;        /* relative to root default font-size -- place after em, since rem is css3      */
      padding: 1em 1em 1em 1em;
   }
   .mNewsContainer {
      float: left;
      margin-top: 1em;
   }
   .mNewsTitle {
      font-size: 2.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mNewsItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mEventContainer {
      float: left;
      margin-top: 1em;
   }
   .mEventItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mScheduleContainer {
      float: left;
      margin-top: 1em;
   }
   .mScheduleHeader {
      font-size: 2.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mScheduleItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   article {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
   }
}

/*---------------------*/
/* ipad screen styles  */
/*---------------------*/
@media only screen and (min-width: 801px) and (max-width: 982px) {

   .mContainer {
      max-width: 960px;  
      margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */   
   }
   .mBanner {
      width: 50%;
   }
   .mBannerText {
      width: 50%;
   }
   .mExpandTitle {
      font-size: 2em;            /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;           /* relative to root default font-size -- place after em, since rem is css3      */
      }
   .mExpandText {
      font-size: 2em;            /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;           /* relative to root default font-size -- place after em, since rem is css3      */
      }
   .mTextContainer {
      float: left;
      margin-top: 1em;
   }
   .mTextTitle {
      font-size: 2em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mTextTitle2 {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mTextContent {
      font-size: 1.5em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.5rem;        /* relative to root default font-size -- place after em, since rem is css3      */
      padding: 1em 1em 1em 1em;
   }
   .mNewsContainer {
      float: left;
      margin-top: 1em;
   }
   .mNewsTitle {
      font-size: 2.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mNewsItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mEventContainer {
      float: left;
      margin-top: 1em;
   }
   .mEventItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mScheduleContainer {
      float: left;
      margin-top: 1em;
   }
   .mScheduleHeader {
      font-size: 2.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mScheduleItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   article {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
   }
}

/*---------------------------*/
/* extra large screen styles */
/*---------------------------*/
@media only screen and (min-width: 983px) { 

   .mContainer {
      max-width: 960px;  
      margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */   
   }
   .mBanner {
      width: 50%;
   }
   .mBannerText {
      width: 50%;
   }
   .mExpandTitle {
      font-size: 2em;            /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;           /* relative to root default font-size -- place after em, since rem is css3      */
      }
   .mExpandText {
      font-size: 2em;            /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;           /* relative to root default font-size -- place after em, since rem is css3      */
      }
   .mTextContainer {
      float: left;
      margin-top: 1em;
   }
   .mTextTitle {
      font-size: 2em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mTextTitle2 {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mTextContent {
      font-size: 1.5em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.5rem;        /* relative to root default font-size -- place after em, since rem is css3      */
      padding: 1em 1em 1em 1em;
   }
   .mNewsContainer {
      float: left;
      margin-top: 1em;
   }
   .mNewsItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mNewsTitle {
      font-size: 2.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mEventContainer {
      float: left;
      margin-top: 1em;
   }
   .mEventItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mScheduleContainer {
      float: left;
      margin-top: 1em;
   }
   .mScheduleHeader {
      font-size: 2.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 2.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   .mScheduleItem {
      font-size: 1.0em;         /* relative to current element font-size -- nesting inheritance applies         */
      font-size: 1.0rem;        /* relative to root default font-size -- place after em, since rem is css3      */
   }
   article {
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-count: 3;
   }
}

/*---------------------*/
/* photo, video styles */
/*---------------------*/

/*-------------*/
/* mid screen  */
/*-------------*/
@media only screen and (min-width: 500px) and (max-width: 827px) {
   .mPhotoBox, .mVideoBox {
      clear: both;
      width: 500px;
      margin:  2em auto;
      margin:  2rem auto;
   }
   img.mPhotoPic {
      width: 460px;
      height: auto;
   }
   .mVideoLink {
      display: block;
      clear: both;
      width: 460px;
      margin:  1em auto;
   }
   .mVideo_iFrame {
      width:  460px;
      height: 258px;
     margin:  0em auto;
   }

}

/*---------------*/
/* large screen  */
/*---------------*/
@media only screen and (min-width: 828px) {
   .mPhotoContainer, .mVideoContainer {
      width:  720px; 
      margin: 1em auto;
   }
   .mPhotoBox, .mVideoBox {
      clear: none;
      float: left;
      width: 360px;
   }
}


/*------------------------------*/
/* retina (apple) screen styles */
/*------------------------------*/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {


}