html
{
  font-family:      'Alegreya Sans',Sans Serif;
  font-size:        1em;
  line-height:      0.9em;
  font-weight:      normal; 
  background-color: #E5E6E7;
}

body
{  
   margin: 0;
}

/* color palette 
   #00aeef   Parish (Cyan blue)
   #146526   Church Green
   #0060a9   Archdiocese Blue
*/

#innerBody
{
   background-color: white;
   max-width:        1120px;
   margin:           0 auto;
}

a
{
   text-decoration: none;
   color:           inherit;
}

article a
{
    font-weight: 800;
}

#logo
{
    -webkit-flex-grow:     10;
    -ms-flex-grow:         10;
    -moz-flex-grow:        10;
    flex-grow:             10;
    
    
    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;
    
  -moz-flex-basis:            340px;
  -webkit-flex-basis:         340px;
  flex-basis:                 340px;
    
    padding:               0.2em;
}

#logo > a > img
{
    max-width:  300px;
    width:      100%;
    padding:    5px;
}

h1,.h1,h2,.h2,h3,.h3
{
  -webkit-column-break-after: avoid;
  -moz-column-break-after:    avoid;
  column-break-after:         avoid;
}

#icons
{
    padding-top:           5px;

    -webkit-flex-grow:     1;
    -ms-flex-grow:         1;
    -moz-flex-grow:        1;
    flex-grow:             1;


    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */


   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;
  
  -webkit-justify-content:    flex-end;
  -moz-justify-content:       flex-end;
  justify-content:            flex-end;
  
  -moz-align-items:           flex-start;
  -webkit-align-items:        flex-start;
  align-items:                flex-start;
  
  -moz-align-content:         flex-end;
  -webkit-align-content:      flex-end;
  align-content:              flex-end;


  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */   
   order:               2;
}

#googlesearch
{
   padding-top: 5px;
   padding-right: 5px;
   text-align:           right;

  -webkit-box-ordinal-group:  2; 
  -moz-box-ordinal-group:     2;   
  -ms-flex-order:             2;           
  -webkit-order:              2;               
   order:                     2;


    -webkit-flex-grow:     1;
    -ms-flex-grow:         1;
    -moz-flex-grow:        1;
    flex-grow:             1;


    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;

  -moz-flex-basis:       130px;
  -webkit-flex-basis:    130px;
  flex-basis:            130px;
}

article
{
    padding: 0em;
    clear: both;
}


@media screen and (min-width: 800px)
{
    article > div.p.columns
    {
        -webkit-column-count: 2;
        -webkit-column-gap  : 1em;
        -webkit-column-rule-style:  dotted;
        -webkit-column-rule-width:  1px;
        -webkit-column-rule-color:  #00aeef;

       -moz-column-count: 2;
       -moz-column-gap  : 1em;
       -moz-column-rule-style:  dotted;
       -moz-column-rule-width:  1px;
       -moz-column-rule-color:  #00aeef;

       column-count: 2;
       column-gap  : 1em;
       column-rule-style:  dotted;
       column-rule-width:  1px;
       column-rule-color:  #00aeef;
    }
    
    article > div.p.columns > p:first-of-type::first-line
    {
        text-transform: uppercase;
        font-weight:  bold;
        color: #00aeef;
    }
}


#infobarcontainer, #midsection, #header-top-row, #header-second-row, #navigation, footer, section
{
  width:                      auto;
  max-width:                  auto;
  min-width:                  auto;
  
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;
  
   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;

  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;
  

  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;


  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;

  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;
  

  -moz-flex-basis:            0;
  -webkit-flex-basis:         0;
  flex-basis:                 0;
  
    -webkit-flex-grow:     3;
    -ms-flex-grow:         3;
    -moz-flex-grow:        3;
    flex-grow:             3;

    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;


}

#topsection
{
  width:                      100%;
  display:                    block;
}


#navigation
{
  -webkit-justify-content:    flex-end;
  -moz-justify-content:       flex-end;
  justify-content:            flex-end;
  
  -moz-align-items:           flex-end;
  -webkit-align-items:        flex-end;
  align-items:                flex-end;
  
  -moz-align-content:         flex-end;
  -webkit-align-content:      flex-end;
  align-content:              flex-end;
}

#navigation ul
{
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
    list-style-type: none;
 
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         
 
   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;

  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;

  -webkit-justify-content:    flex-end;
  -moz-justify-content:       flex-end;
  justify-content:            flex-end;

  -moz-align-items:           flex-end;
  -webkit-align-items:        flex-end;
  align-items:                flex-end;
  
  -moz-align-content:         flex-end;
  -webkit-align-content:      flex-end;
  align-content:              flex-end;

  -moz-flex-basis:            0;
  -webkit-flex-basis:         0;
  flex-basis:                 0;
  
    -webkit-flex-grow:     3;
    -ms-flex-grow:         3;
    -moz-flex-grow:        3;
    flex-grow:             3;

    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;
    
    background-color:     #00aeef;
}

#navigation li
{
   border:       1px solid #00aeef;
   padding:      0.5em;
  font-family:  'Alegreya Sans',Sans Serif;
  font-weight:   700; 
  font-size:    1em;
  line-height:  1.1em;
  color:        white;
}

#googlesearch input
{
   border:       1px solid #00aeef;
   padding:      0.3em;
   width:        90%;
   height:       30px;
  font-family:  'Alegreya Sans',Sans Serif;
  font-weight:   400; 
  font-size:    1em;
  line-height:  1.1em;
  color:        #00aeef;
  margin-bottom:  5px;
}


#infobarcontainer > div
{
  max-width:     auto;
  border-bottom: 3px dotted #00aeef;
  margin-bottom: 1em;
  padding:       0.5em 1em;

  -webkit-flex-grow:     2;
  -ms-flex-grow:         2;
  -moz-flex-grow:        2;
  flex-grow:             2;
  
  -moz-flex-basis:            30%;
  -webkit-flex-basis:         30%;
  flex-basis:                 30%;
}

#midsection > div
{
  max-width:     auto;
  border-bottom: 3px dotted #00aeef;
  margin-bottom: 1em;
  padding:       0.5em 1em;

  -webkit-flex-grow:     2;
  -ms-flex-grow:         2;
  -moz-flex-grow:        2;
  flex-grow:             2;
  
  -moz-flex-basis:            30%;
  -webkit-flex-basis:         30%;
  flex-basis:                 30%;

  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  -moz-flex-shrink: 1;
  flex-shrink: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-box-orient: horizontal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
  -moz-align-items: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
  -moz-align-content: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}

#midsection > div > div
{
  -moz-flex-basis:            100%;
  -webkit-flex-basis:         100%;
  flex-basis:                 100%;
}

.infobar,
section
{
  background-color: #8ed8f8;
  clear: both;
}

.infobar div.section
{
   padding:          0.1em 0.5em;
   background-color: white;
   border-color:     white;
   color:            #00aeef;
   margin-left:      0.5em;
   margin-bottom:    0;
}

footer
{
  background-color: #00aeef;
}

.infobar > h3,
.infobar > div > h3,
section > div > h3
{
   color:                 white;
   display:               block;
   font-size:             1.2em;
   -webkit-margin-before: 1em;
   -webkit-margin-after:  1em;
   -webkit-margin-start:  0px;
   -webkit-margin-end:    0px;
  font-weight:            bold;
}

.social_justice
{
  -webkit-box-ordinal-group: 4;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 4;      /* OLD - Firefox 19- */
  -ms-flex-order: 4;              /* TWEENER - IE 10 */
  -webkit-order: 4;               /* NEW - Chrome */
  order: 4;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

.evangelization
{
  -webkit-box-ordinal-group: 2;   
  -moz-box-ordinal-group: 2;      
  -ms-flex-order: 2;              
  -webkit-order: 2;               
  order: 2;                       
}

.music
{
  -webkit-box-ordinal-group: 5;   
  -moz-box-ordinal-group:    5;      
  -ms-flex-order:            5;              
  -webkit-order:             5;               
  order:                     5;  
}

.parish
{
  -webkit-box-ordinal-group: 1;   
  -moz-box-ordinal-group:    1;      
  -ms-flex-order:            1;              
  -webkit-order:             1;               
  order:                     1;  
}

.parish_policies
{
  -webkit-box-ordinal-group: 3;   
  -moz-box-ordinal-group:    3;      
  -ms-flex-order:            3;              
  -webkit-order:             3;               
  order:                     3;  
}

.church
{
  -webkit-box-ordinal-group: 6;   
  -moz-box-ordinal-group:    6;      
  -ms-flex-order:            6;              
  -webkit-order:             6;               
  order:                     6;  
}

.archdiocese
{
  -webkit-box-ordinal-group: 7;   
  -moz-box-ordinal-group:    7;      
  -ms-flex-order:            7;              
  -webkit-order:             7;               
  order:                     7;  
}

.stewardship
{
  -webkit-box-ordinal-group: 8;   
  -moz-box-ordinal-group:    8;      
  -ms-flex-order:            8;              
  -webkit-order:             8;               
  order:                     8;  
}

.parish h4.section
{
  border-color:     #00aeef;
  background-color: #00aeef;
}

.archdiocese h4.section
{
  border-color:     #0060a9;
  background-color: #0060a9;
}

.church h4.section
{
  border-color:      #146526;
  background-color:  #146526;
}


.infobar  h3
{
    display:               block;
    background-color:      #00aeef;
    padding:               0.1em 0.5em;
    font-size:             0.9em !IMPORTANT;
    font-weight:           900;
    color:                 white;
    border:                4px solid #00aeef;

    -moz-border-radius:    0px 10px 0px 10px;
    -webkit-border-radius: 0px 10px 0px 10px;
    border-radius:         0px 10px 0px 10px;

    margin-right:          0.2em;
    margin-bottom:         0.5em;
    text-transform:        uppercase;
    letter-spacing:        0.2px;
    color:                 white;
    margin-top:            0;
}

.infobar > div,
section > div
{
   padding: 0em 1em 1em 1em;
}

.infobar > div > div,
section > div > div
{
    -webkit-flex-grow:     1;
    -ms-flex-grow:         1;
    -moz-flex-grow:        1;
    flex-grow:             1;

    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;

  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;

  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;
  
  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;

  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;
}

.infobar > div > div > a > span:nth-of-type(2),
.infobar > div > div >  span:nth-of-type(2),
section > div > div > span:nth-of-type(2),
section > div > div > a > span:nth-of-type(2) 
{
   text-align:   right;
   font-size:    1em;
   line-height:  1em;
   font-weight:  800;
   color:        black;
   padding-left: 10px;
   min-width:    30%;
   display: block;
}


.infobar > div > div > span:nth-of-type(2) > span,
section > div > div > span:nth-of-type(2) > span,
section > div > div > a > span:nth-of-type(2) > span
{
   display: block;
}


section > div 
{
   min-width:          auto;
   max-width:          auto;
   -moz-flex-basis:    20%;
   -webkit-flex-basis: 20%;
   flex-basis:         20%;
}

.infobar > div > div > span:only-of-type,
section > div > div > span:only-of-type
{
   margin-top:    0.3em;
   text-align:    left;
   font-size:     1em;
   line-height:   1em;
   font-weight:   400;
   color:         rgb(87, 96, 100);      
}



footer > div > h3
{
   color:               white;
   -moz-column-span:    all;
   -webkit-column-span: all;   
   column-span:         all;
}

footer > div
{
   padding: 1em;
}

footer > div.multicolumn
{
   -webkit-column-count: 2;
   -webkit-column-gap  : 1em;
   -webkit-column-rule-style:  dotted;
   -webkit-column-rule-width:  1px;
   -webkit-column-rule-color:  #abe1fa;

  /* Mozilla does not support span-all so it looks
     better with just one column */
  -moz-column-count: 1;
  -moz-column-gap  : 1em;
  -moz-column-rule-style:  dotted;
  -moz-column-rule-width:  0px;
  -moz-column-rule-color:  #abe1fa;

  column-count:         2;
  column-gap  :         1em;
  column-rule-style:  dotted;
  column-rule-width:  1px;
  column-rule-color:  #abe1fa;
}

#urgent
{
  line-height: 0.8em;
  z-index:  400;  
  background-color: #c7eafb;
  padding:          10px;
  opacity:          0.9;
}
#urgenttext p
{
  width:    100%;
  height:   auto;
  background-color: transparent;
  margin:     0;
  padding:    0;
  text-align: center;
  font-size:  0.8em;
  font-weight: bold;
  opacity:     1;
  -webkit-margin-before: 0em;
  -webkit-margin-after:  0em;
  -webkit-margin-start:  0px;
  -webkit-margin-end:    0px;
  -webkit-padding-start:   0px;
}

#urgenttext strong
{
   color: #00aeef;    
}


footer > div > div
{
    -webkit-flex-grow:     1;
    -ms-flex-grow:         1;
    -moz-flex-grow:        1;
    flex-grow:             1;

    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;

    display: -webkit-box;  
    display: -moz-box;     
    display: -ms-flexbox;  
    display: -webkit-flex; 
    display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;
  
  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;

 -moz-align-items:            stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;


  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;
}

footer > div > div > span:nth-of-type(2)
{
   text-align:    right;
   font-size:     1em;
   line-height:   1em;
   font-weight:   800;
   color:         #abe1fa;
   padding-left:  10px;
}

#copyright
{
    margin-top:    0.5em;
    margin-bottom: 0.5em;
    font-size:     0.7em;
    color:         #c9caca;
    text-align:    center;
}

footer > div 
{
  min-width:          auto;
  max-width:          auto;
  flex-basis:         20%;
  -webkit-flex-basis: 20%;
  -moz-flex-basis:    20%;
}

footer > div > div > span:only-of-type
{
   margin-top:     0.3em;
   text-align:     left;
   font-size:      1em;
   line-height:    1em;
   font-weight:    800;
   color:          #abe1fa;    
}

#infobarcontainer, #midsection
{
  margin-top:   6px;
}

div.imageInMinorTitle img
{
   max-width: 100%;
   width:     100%;
}

footer > div > ul
{
  display:               block;
  list-style-type:       none;
  -webkit-margin-before: 0em;
  -webkit-margin-after:  0em;
  -webkit-margin-start:  0px;
  -webkit-margin-end:    0px;
  -webkit-padding-start: 0px;
}

footer > div > ul >li
{
  list-style-type:         none;
  text-align:              left;
  font-size:               1em;
  line-height:             1em;
  font-weight:             800;
  color:                   #abe1fa;
  padding:                 0.2em 0; 
    -webkit-margin-before: 0em;
    -webkit-margin-after:  0em;
    -webkit-margin-start:  0px;
    -webkit-margin-end:    0px;
  -webkit-padding-start:   0px;
}

footer > div > ul > li:hover
{
  color: white;
}

#flexMainHeadline
{
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;

 -webkit-justify-content:     stretch;
  -moz-justify-content:       stretch;
  justify-content:            stretch;
  
  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;
      
  padding-bottom:             0.5em;
  margin-bottom:              0.5em;
  border-bottom:              2px dotted #00aeef;
  min-width:                  100%;
}

#mainHeadline
{ 
  -moz-flex-basis:            40%;
  -webkit-flex-basis:         40%;
  flex-basis:                 40%;
  

    -webkit-flex-grow:     3;
    -ms-flex-grow:         3;
    -moz-flex-grow:        3;
    flex-grow:             3;

    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;

    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
}

#journeyoffaith > div > div > div > a,
.otherHeadline a,
#mainHeadline a
{ 
  display: block;
}

#journeyoffaith > div > div > div > a,
#journeyoffaith > div > div > div > a > img
{
  width: 100%;
}



#mainSummary
{
  font-family:  'Alegreya Sans',Sans Serif;
  font-weight:   400; 
  font-size:    1.2em;
  line-height:  1.2em;
  color:        #00aeef;
}

#mainPicture
{
  -moz-flex-basis:            50%;
  -webkit-flex-basis:         50%;
  flex-basis:                 50%;
    -webkit-flex-grow:     5;
    -ms-flex-grow:         5;
    -moz-flex-grow:        5;
    flex-grow:             5;

    -webkit-flex-shrink:   2;
    -ms-flex-shrink:       2;
    -moz-flex-shrink:      2;
    flex-shrink:           2;

    text-align: center;
}

#mainPicture img
{
   min-width:    100%;
}

div.articlePhoto
{
    max-width:      30%;
    float:          right;
    margin-left:    2em;
    margin-bottom:  2em;
}

div.articlePhoto img
{
   width: 100%;
}

p.imageCaption
{
  font-family:  'Alegreya Sans',Sans Serif;
  font-weight:   400; 
  font-size:    1.5vw;
  line-height:  1.5vw;
  color:        #00aeef;  
  padding:1em;
}


#otherTitles
{
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;

  -webkit-justify-content:    stretch;
  -moz-justify-content:       stretch;
  justify-content:            stretch;

  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;

  -moz-align-content:         space-between;
  -webkit-align-content:      space-between;
  align-content:              space-between;

  max-width: 100%;
  width:     100%;
  min-width: 100%;
}


div.otherphoto
{
    -webkit-flex-grow:     2;
    -ms-flex-grow:         2;
    -moz-flex-grow:        2;
    flex-grow:             2;

    -webkit-flex-shrink:   5;
    -ms-flex-shrink:       5;
    -moz-flex-shrink:      5;
    flex-shrink:           5;

}

.otherPhoto
{
   max-width: 100%;
   width:     100%;
   display:   block;
}


div.otherHeadline
{
  font-family:         'Alegreya Sans',Sans Serif;
  font-weight:         700; 
  font-size:           1.2em;
  line-height:         1.0em;
  color:               black;

    -webkit-flex-grow:     1;
    -ms-flex-grow:         1;
    -moz-flex-grow:        1;
    flex-grow:             1;

    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;


  -moz-flex-basis:            15%;
  -webkit-flex-basis:         15%;
  flex-basis:                 15%;

    padding-bottom:   0.5em;
    margin:           0.0em;
    background-color: #e1f4fd;
    max-height:       25%;
    text-transform:   capitalize;
}

  .otherHeadline h2
  {
    overflow:      hidden;
    text-overflow: ellipsis;
  }
  
  .otherHeadline h2, .otherHeadline div.smallsummary
  {
    padding: 0 10px;
  }
  
imageInMinorTitle > img
{
   width:        auto;
   height:       auto;
   max-width:    100%;
   max-height:   100%;
   display:      block;
}

tbody.contents > tr > td:nth-of-type(2)
{
  text-align:    center;
}

.margin-top-1em
{
   margin-top: 1em;
}

#infobarcontainer h3, 
#midsection h3
{
  display:               block;
  font-size:             2em;
  -webkit-margin-before: 0;
  -webkit-margin-after:  0;
  -webkit-margin-start:  0px;
  -webkit-margin-end:    0px;
  font-weight:           bold;
  line-height:           0.9em;
  margin-bottom:         0.3em;
  margin-top:            0.5em;
}

#infobarcontainer > div > div > a > p,
#infobarcontainer > div > div > p,
#midsection >div > div > a > p,
#midsection >div > div > p
{
    color: #5e5e5e;
}

.smallsummary
{
  font-family:  'Alegreya Sans',Sans Serif;
  font-weight:   400; 
  color:         #00aeef;
  font-size:     0.9em;
  line-height:   1em;
  font-weight:  normal;
}

h1, .h1
{
  font-family:  'Alegreya Sans',Sans Serif;
  font-weight:   800; 
  font-size:    4em;
  line-height:  0.9em;
  color:        black;
  display:      block;
  
  text-transform:        capitalize;
  -webkit-margin-before: 0;
  -webkit-margin-start:  0;
  -webkit-margin-end:    0;
  -webkit-margin-after:  0;
  margin-top:            10px;
  margin-bottom:         15px;
}


h2, .h2
{
  display:       block;
  font-size:     2vw;
  line-height:   1.8vw;
  -webkit-margin-before: 0.5em;
  -webkit-margin-after:  0.5em;
  -webkit-margin-start:  0px;
  -webkit-margin-end:    0px;
  font-family:  'Alegreya Sans',Sans Serif;
  font-weight:   800;
  -webkit-margin-before:  0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
  -webkit-margin-end:     0px;
  margin-bottom:          0.2em;
    margin-top:           0.3em;
}

#parishCarousel 
{
  background-repeat:     no-repeat;
  background-attachment: fixed;
  background-position:   center;
  height:                auto;
  max-width:             300px;
  max-height:            405px;
  width:                 100%;
  overflow:              hidden;
  display:               inline;
  opacity:               1;
  visibility:            visible;
}

#CarouselDummyImg 
{
   opacity:    1;
   visibility: visible;
}

.carouselImg {
   opacity:    0;
   visibility: hidden;
   display:    none;
}

div#parishCarousel > img
{
    width:  100%; 
    height: auto;
}

.fb-like
{
  margin-top:1em;
}

.section
{  
  display: inline-block;
  background-color: #00aeef;
  padding: 0.1em 0.5em;
  font-size: 0.9em;
  font-weight: 900;
  color: white;
  border: 4px solid #00aeef;
  -moz-border-radius: 0px 10px 0px 10px;
  -webkit-border-radius: 0px 10px 0px 10px;
  border-radius: 0px 10px 0px 10px;
  margin-right: 0.2em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  color: white;
}

.sectionImgLabel
{
  -webkit-margin-before:  0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
  -webkit-margin-end:     0px;
  position:         absolute;
  top:              0px;
  left:             0px;
  z-index:          100;
  display:          block;
  background-color: #00aeef;
  padding:          0.1em 0.8em;
  font-size:        0.6em;
  font-weight:      900;
  color:            white;
  border:           4px solid #00aeef;
  -moz-border-radius:    0px 0px 12px 0px;
  -webkit-border-radius: 0px 0px 12px 0px;
  border-radius:         0px 0px 12px 0px;
  margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.2px;
  color:            white;
  
}

.overtitle
{
  font-family:     'Alegreya Sans',Sans Serif;
  font-weight:     700; 
   text-transform: uppercase;
   font-size:      1em;
   line-height:    1em;
   margin:         0;   
   color:          black;
   display:        block;
}

.subtitle
{
  font-family:     'Alegreya Sans',Sans Serif;
  font-weight:     800; 
   font-size:      1.1em;
   line-height:    1.1em;
   margin:         0;   
   color:          #00aeef;
   display:        block;
   margin-top:     0.4em;
   margin-bottom:  0.8em;
}

.byline
{
  font-family:      'Alegreya Sans SC',Sans Serif;
  font-weight:      700; 
   font-size:       1.0em;
   line-height:     1.3em;
   margin-bottom:   1em; 
   color:           black;
   display:         inline-block;
   float:           left;
   padding-bottom:  1em;
   margin-right:    1.5em;
   border-bottom-width: 2px;
   border-bottom-style: dotted;
   border-bottom-color: #939598;
}

.authortitle
{
  font-weight:   400;
  font-family:  'Alegreya Sans',Sans Serif; 
  font-size:   0.8em;
  line-height: 1.2em;
   
}

.author 
{
  display: inline-block;
}

.authortitle
{
  display:block;
  font-family:  'Alegreya Sans',Sans Serif; 
}

.authoremail
{
  font-style:   italic;
  font-size:    0.8em;
  line-height:  1.5em;
  font-weight:  400;
  display:      block;
  font-variant: normal;
  color:        #00aeef;
  font-family:  'Alegreya Sans',Sans Serif; 
}

.infobar
{
  border-bottom-width: 0px !IMPORTANT;
}

.infobar > h3
{
  margin: 0 1em;
}

h4
{  
  display:               block;
  -webkit-margin-before: 0em;
  -webkit-margin-after:  0em;
  -webkit-margin-start:  0px;
  -webkit-margin-end:    0px;
  font-weight:           bold;
  margin-top:            0em;
  margin-bottom:         0em;
}

#infobarcontainer > div > h4 ~ div:not(:last-of-type):not(.imageInMinorTitle),
#midsection > div > h4 ~ div:not(:last-of-type):not(.imageInMinorTitle)
{
   margin-bottom:  1em;
   padding-bottom: 0em;
   border-bottom:  1px dotted #00aeef;
}

.imageInMinorTitle
{
    position: relative;
}



main
{
   padding: 1em;
}

h5.more
{
  display: block;
  font-size: 1em;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
  clear: both;
  padding-bottom: 0.2em;
  margin-bottom: 1em;
  border-bottom: 1px dotted #00aeef;
  width: 100%;
}

.morearticles
{
  font-style:   italic;
  font-weight:  bold;
  text-align:   right;
  display:      block;
  font-size:    0.8em;
  padding:      0.3em;
  color:         #00aeef;
  text-align:    right;
  
}

.highlight
{
  padding:       1em;
  border-width:  2px;
  border-color:  #00aeef;
  border-style:  solid;
  margin:        1em 0;
  font-family:   'Alegreya Sans',Sans Serif;
  font-weight:   700; 
  font-size:     1.0em;
  line-height:   1.0em;
  
}

p, .p
{
  font-family:  'Alegreya Sans',Sans Serif;
  font-size:     1em;
  line-height:   1.3em;
  font-weight:   normal;
  
  -webkit-margin-before: 0em;
  -webkit-margin-after:  0em;
  -webkit-margin-start:  0px;
  -webkit-margin-end:    0px;
  margin-bottom:         1em;
}

.moreReadings
{
   display:               inline-block;
   background-color:      #00aeef;
   padding:               0.1em 0.5em;
   font-size:             0.9em;
   font-weight:           900;
   color:                 black;
   border:                4px solid #00aeef;;

   -moz-border-radius:    0px 10px 0px 10px;
   -webkit-border-radius: 0px 10px 0px 10px;
   border-radius:         0px 10px 0px 10px;

   margin-right:          0.2em;
   margin-bottom:         1em;
}

.calendarDate
{
  font-family:       'Alegreya Sans',Sans Serif;
  font-weight:       800; 
   font-size:        1.3em;
   line-height:      1.0em;
   display:          block;
   margin-top:       0.4em;
   margin-bottom:    0.4em;
   color:            black;
   border-bottom:    1px dotted #cad3d7;
   background-color: transparent;
}

.massreadings 
{
  font-size: 0.8em;
  margin-top: -0.4em;
  margin-bottom: 0.4em;
  margin-right: 5px;
  color: grey;
  font-weight: bold; 
  background-color: rgb(240, 240, 240);
  -moz-border-radius: 0px 10px 10px 10px;
  -webkit-border-radius: 0px 10px 10px 10px;
  border-radius: 0px 10px 10px 10px;
  display: inline-block;
  padding: 5px 10px;
 }
 
 .fullcalendar, .linkbutton
 {
   font-size: 0.8em;
   margin-bottom: 0.4em;
   margin-left: 15px;
   color: white;
   font-weight: bold; 
   background-color: #00aeef;
   -moz-border-radius: 0px 10px 10px 10px;
   -webkit-border-radius: 0px 10px 10px 10px;
   border-radius: 0px 10px 10px 10px;
   display: inline-block;
  padding: 5px 10px;
  vertical-align: middle;
 }

.allDayCalendarItem
{
  font-family:      'Alegreya Sans',Sans Serif;
  font-weight:      700; 
  font-size:        0.7vw;
  line-height:      0.6vw;
  margin:           0;  
  display:          block;
  margin-top:       0.2em;
  margin-bottom:    0.3em;
  vertical-align:   top;
  color:  rgb(87, 96, 100);             
}

.allDayCalendarItem > i
{
    color: white;
}

.calendarItem
{
-webkit-margin-before: 0em;
-webkit-margin-after:  0em;
-webkit-margin-start:  0px;
-webkit-margin-end:    0px;
-webkit-padding-start: 0px;

  list-style-type: none;
  
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex; 
  
  -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;

  -webkit-justify-content:    stretch;
  -moz-justify-content:       stretch;
  justify-content:            stretch;

  -moz-align-items:           flex-start;
  -webkit-align-items:        flex-start;
  align-items:                flex-start;
  
  -moz-align-content:         flex-start;
  -webkit-align-content:      flex-start;
  align-content:              flex-start;

}

.calendarEvent
{
    font-family:        'Alegreya Sans',Sans Serif;
    font-weight:        400; 
    font-size:          0.9em;
    line-height:        0.9em;
    margin:             0;  
    margin-top:         0.3em;
    margin-bottom:      0em;

  -moz-flex-basis:            60%;
  -webkit-flex-basis:         60%;
  flex-basis:                 60%;

  -webkit-box-ordinal-group: 2;   
  -moz-box-ordinal-group: 2;      
  -ms-flex-order: 2;              
  -webkit-order: 2;               
  order: 2;  
}

.calendarTime
{
    font-family:      'Alegreya Sans',Sans Serif;
    font-weight:      700; 
    font-size:        1em;
    line-height:      1em;
    margin:           0;  
    margin-top:       0.2em;
    margin-bottom:    0em;
    color:            #00aeef;
 
   -moz-flex-basis:            30%;
   -webkit-flex-basis:         30%;
   flex-basis:                 30%;

   padding-right:     3px;
   
  -webkit-box-ordinal-group: 1;   
  -moz-box-ordinal-group:    1;      
  -ms-flex-order:            1;    
  -webkit-order:             1;               
  order:                     1;  
}


/* Admin console */

 #admin_edit select 
 {
   width:             auto;
   display:           block;
   margin-bottom:     1em;
   background-color:  white;
   border:            1px solid #99cbf1;
 }
 
 #admin_edit textarea
 {
  font-family:   'Alegreya Sans',Sans Serif;
  font-weight:    400; 
   font-size:     0.8em;
   width:         100%;
   display:       block;
   margin-bottom: 1em;
   
   background-color: white;
   border:           1px solid #99cbf1;
   resize:           vertical;
   height:           40em;
 }

#section
{
    text-transform:  capitalize;
}

#calendarSelectForm input[type="date"]
{
  align-items: center;
  overflow:    hidden;
  padding:     0px;
  
  -webkit-padding-start: 1px;
  font-size:             1em;
  font-weight:           bold;
  color:                 #00aeef;
  font-family:          'Alegreya Sans',Sans Serif;
  padding:              0.3em;
  background-color:     #abe1fa;
  border: 1px solid     #00aeef;
}

input[type="button"]
{
  margin:       1em 0;
  font-size:    1em;
  font-weight:  bold;
  color:        #00aeef;
  font-family:  'Alegreya Sans',Sans Serif;
  padding:      0.3em;
  background-color: #abe1fa;
  border: 1px solid #00aeef;
}

#admin_edit input
{
   width:         100%;
   display:       block;
   margin-bottom: 1em;
   
   background-color:  white;
   border:            1px solid #99cbf1;
}

#admin_edit input[type="checkbox"]
{
  display: inline-block;
  width:   auto;
  text-align: left;
}

#admin_edit input[type="submit"]
{
   width: auto;
   display: block;
   margin-bottom: 1em;
   background-color: #99cbf1;
   text-align:      right;
}

#admin_edit label
{
   font-size:  0.7em;
   font-weight: bold;
}

#admin_edit label.mandatory
{
   font-size:  0.7em;
   font-weight: bold;
   color:       red;
}


.log
{
   font-family: 'Courier New', Courier, 'Lucida Console', Monaco, monospace;
   font-size: 0.9em;
   padding:1em;
   border: 1px solid #00aeef;
   background-color: #e1f4fd;
   margin: 1em 0;
}

.admin
{
  display: block;
  list-style-type: none;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}

.admin li
{
  padding: 0.5em;
  border: 1px solid #00aeef;
  background-color: #e1f4fd;
  font-weight: bold;
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
  margin:0.5em;
}

h3.admin
{
   margin-top: 1em;
   margin-bottom: 0.8em;
   padding-top: 1em;
   border-top: 3px solid #00aeef;
}

h3.admin:first-of-type
{
   margin-top: 1em;
   padding-top: 1em;
   border-top: 0px solid #00aeef;
}


.admin li:hover
{
  background-color: #00aeef;
  color: white;
}

#facebook_details
{
   display: none;
}

#precana_registration input[type='checkbox'],
#subscribenewsletter input[type='checkbox'],
#registration input[type='checkbox'],
#ff_registration  input[type='checkbox']
{
   margin-left: 0;
   padding-left: 0;
}

#precana_registration input[type='checkbox'] ~ label,
#subscribenewsletter input[type='checkbox'] ~ label,
#registration  input[type='checkbox'] ~ label,
#ff_registration  input[type='checkbox'] ~ label
{
   display: inline-block;
}

#precana_registration > label,
#subscribenewsletter > label,
#collectionentry > label,
#registration > label,
#ff_registration > label,
#ff_payment > label
{
   display: block;
   padding-top: 0.4em;
}

#precana_registration select,
#precana_registration  input,
#subscribenewsletter select,
#subscribenewsletter input,
#collectionentry select,
#collectionentry input,
#registration  input,
#registration select,
#ff_registration  input,
#ff_payment input,
#ff_payment select
{
   color:    #00aeef;
   background-color: #c7eafb;
   border: 1px solid #00aeef;
  width: 100%;
  height: 1.1em;
  font-size: 1.1em;
  color: #00aeef;
  background-color: #c7eafb;
  border: 1px solid #00aeef;
  font-family: 'Alegreya Sans',Sans Serif;
  padding: 0.3em;
  margin-bottom: 0.5em;
}

#registration select
{
    padding: 1px;
    height: 1.3em;
    font-size: 1.5em;
}

#precana_registration input[type="number"], 
#collectionentry input[type="number"],
#registration input[type="number"],
#ff_registration input[type="number"]
{
    width: 100px;
    display: inline-block;
    text-align:right;
    padding: 1px;
    height: 1.3em;
    font-size: 1.5em;
}

#NUMBER_OF_CHILDREN
{
   font-weight: 800;
   text-align: right;
}

#precana_registration fieldset,
#collectionentry fieldset,
#registration fieldset,
#ff_registration fieldset,
#ff_payment fieldset
{
   display: block;
   margin-bottom:2em;
   border: 2px solid #00aeef;
   background-color: #e1f4fd;
   
     -webkit-margin-start:   0px;
     -webkit-margin-end:     0px;
     -webkit-padding-before: 0em;
     -webkit-padding-start:  0em;
     -webkit-padding-end:    0;
     -webkit-padding-after:  0em;
  min-width: -webkit-min-content;
  padding: 1em 1.5em 1em 1em;
  margin: 1em 0;
}

#precana_registration legend,
#collectionentry legend,
#registration legend,
#ff_registration legend,
#ff_payment legend
{
  font-weight: 800;
  color: #00aeef;
  padding: 0.2em 0.4em 0.1em 0.4em;
  border: 2px solid #00aeef;
  background-color: white;
}


#subscribenewsletter input[type='submit'],
#registration input[type='submit'],
#ff_registration input[type='submit']
{
   width: 100%;
   font-weight: 800;
   height: 2em;
   border-radius:         5px 5px 5px 5px;
   -moz-border-radius:    5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   opacity:               0.3;
   cursor:                'not-allowed';
}

#collectionentry input[type='submit'],
#ff_payment input[type='submit']
{
   width: 100%;
   font-weight: 800;
   height: 2em;
   border-radius:         5px 5px 5px 5px;
   -moz-border-radius:    5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   opacity:               1;
   cursor:                'not-allowed';
}

#precana_registration input[type='radio'],
#precana_registration input[type='checkbox'],
#registration input[type='radio'],
#registration input[type='checkbox'],
#ff_registration input[type='radio'],
#ff_registration input[type='checkbox']
{
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color:#c7eafb;
}

#registration input[type=range],
#ff_registration input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
}

#registration input[type=range]::-webkit-slider-thumb,
#ff_registration input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

#registration input[type=range]:focus,
#ff_registration input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

#registration input[type=range]::-ms-track,
#ff_registration input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}

#registration input[type=range],
#ff_registration input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
  border: 0;
  background-color: transparent;
}

#registration input[type=range]:focus,
#ff_registration input[type=range]:focus {
  outline: none;
}

#registration input[type=range]::-webkit-slider-runnable-track,
#ff_registration input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #00aeef;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

#registration input[type=range]::-webkit-slider-thumb,
#ff_registration input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}

#registration input[type=range]:focus::-webkit-slider-runnable-track,
#ff_registration input[type=range]:focus::-webkit-slider-runnable-track {
  background: #00aeef;
}

#registration input[type=range]::-moz-range-track,
#ff_registration input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #00aeef;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

#registration input[type=range]::-moz-range-thumb,
#ff_registration input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

#registration input[type=range]::-ms-track,
#ff_registration input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: #2a6495;
  border-color: #00aeef;
  border-width: 16px 0;
  color: transparent;
}

#registration input[type=range]::-ms-fill-lower,
#ff_registration input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

#registration input[type=range]::-ms-fill-upper,
#ff_registration input[type=range]::-ms-fill-upper {
  background: #00aeef;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

#registration input[type=range]::-ms-thumb,
#ff_registration input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

#registration input[type=range]:focus::-ms-fill-lower,
#ff_registration input[type=range]:focus::-ms-fill-lower {
  background: #c7eafb;
}

#registration input[type=range]:focus::-ms-fill-upper,
#ff_registration input[type=range]:focus::-ms-fill-upper {
  background: #00aeef;
}

div.centerButton input.startButton
{
   width: 100%;
   font-weight: 800;
   height: 2em !IMPORTANT;
   border-radius:         5px 5px 5px 5px;
   -moz-border-radius:    5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   opacity:               1.0;
   cursor:                pointer;
   color:    #00aeef;
   background-color: #c7eafb;
   border: 1px solid #00aeef;
  width: 100%;
  font-size: 1.1em;
  color: #00aeef;
  background-color: #c7eafb;
  border: 1px solid #00aeef;
  font-family: 'Alegreya Sans',Sans Serif;
  padding: 0.3em;
  margin-bottom: 0.5em;

}

#bulletin a
{
   display: block;
   font-size: 1.17em;
   color: black;
   font-weight: bold;
   margin-top:1em;
}

#bulletin a:last-of-type
{
   color: #00aeef;
}


#bulletin img
{
   width: 100%;
   max-width: 300px;
}

#bulletinarchive
{
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;
  
  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;
  
  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         flex-start;
  -webkit-align-content:      flex-start;
  align-content:              flex-start;
  
  -moz-flex-basis:            100px;
  -webkit-flex-basis:         100px;
  flex-basis:                 100px;
}

#bulletinarchive img
{
   max-width: 100px;
}


table
{
   width: 100%;
   margin: 1em 0;
}

th, td
{
   padding:3px;
   text-align:  center;
}

tr:nth-of-type(odd)
{
    background-color: #e1f4fd;
}

tr:nth-of-type(even)
{
    background-color: #8ed8f8;
}

th
{
    background-color: #00aeef;
}

h3
{  display: block;
  font-size: 1.17em;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
  margin-bottom: 1em;
}


.all-articles
{
    max-width: 45% !IMPORTANT;
}


.article-highlight
{
  padding: 1em;
  font-family: 'Alegreya Sans',Sans Serif;
  font-weight: 700;
  font-size: 1.0em;
}
  
.minorTitleNoImageSeparation:not(:last-of-type)
{
    border-bottom: 2px dotted grey;
    padding-bottom: 1em;
    margin-bottom: 1em;
}



#directory
{
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;

  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;

  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;
  
  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;

  width: 100%;
}

#directory > div
{
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;
  
  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;

  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;

  color:            #00aeef;
  background-color: #c7eafb;
  border: 1px solid #00aeef;
  font-size:        1.1em;
  font-family:      'Alegreya Sans',Sans Serif;
  font-weight:      500;
  padding:          0.3em;
  margin-bottom:    0.5em;

  -moz-flex-basis:            344px;
  -webkit-flex-basis:         344px;
  flex-basis:                 344px;

}

#directory > div > div > span:first-of-type
{
  font-size:   1.1em;
  font-family: 'Alegreya Sans',Sans Serif;
  font-weight: 800;
  color:       black;
  text-align:  right;
  display:     block;
}

#directory > div > img
{
   height: 62px;
   width:  52px;
}

#directory > div > div > span:nth-of-type(2)
{
  color:     #00aeef;
  border:    0px 
  font-size: 1.0em;
  
  font-family: 'Alegreya Sans',Sans Serif;
  display:     block;
  text-align:  right;
}

#directory > div > div > span:nth-of-type(3)
{
  color:       #00aeef;
  font-size:   0.9em;
  font-family: 'Alegreya Sans',Sans Serif;
  display:     block;
  text-align:  right;
  font-weight: 300;
  font-style:  italic;
}


#journeyoffaith
{
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;
  
  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;
  
  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;
  
  width:          100%;
  padding-bottom: 2em;
}

#journeyoffaith > div
{
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            vertical;
  -ms-flex-direction:         column;
  -webkit-flex-direction:     column;
  -moz-flex-direction:        column;
   flex-direction:            column;
   
  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;
  
  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;
  
  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;

  color:        #00aeef;
  font-size:    1.1em;
  font-family: 'Alegreya Sans',Sans Serif;
  font-weight: 300;
  
  -moz-flex-basis:            auto;
  -webkit-flex-basis:         auto;
  flex-basis:                 auto;
}


#journeyoffaith > div > div
{
   -ms-box-orient:            vertical;
  -ms-flex-direction:         column;
  -webkit-flex-direction:     column;
  -moz-flex-direction:        column;
   flex-direction:            column;
   
  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;

  -webkit-justify-content:    space-around;
  -moz-justify-content:       space-around;
  justify-content:            space-around;
  
  -moz-align-items:           flex-start;
  -webkit-align-items:        flex-start;
  align-items:                flex-start;
  
  -moz-align-content:         flex-start;
  -webkit-align-content:      flex-start;
  align-content:              flex-start;
 
   -moz-flex-basis:     auto;
   -webkit-flex-basis:  auto;
  flex-basis:          auto;
  
  color:         #00aeef;
  font-size:     1.1em;
  font-family:   'Alegreya Sans',Sans Serif;
  font-weight:   300;
  margin-bottom: 1em;
}


#journeyoffaith > div > div > h3
{
  color:        black;
  font-size:    1.1em;
  font-family:  'Alegreya Sans',Sans Serif;
  font-weight: 600;
  
  -moz-flex-basis:            100%;
  -webkit-flex-basis:         100%;
  flex-basis:                 100%;
}

#journeyoffaith > div > div > div:first-of-type
{
  -moz-flex-basis:            auto;
  -webkit-flex-basis:         auto;
  flex-basis:                 auto;
  display: block;
}

#journeyoffaith > div > div > div:nth-of-type(2)
{
  -moz-flex-basis:            150px;
  -webkit-flex-basis:         150px;
  flex-basis:                 150px;
  flex-basis: 150px;
  max-width: 300px;
  display: block;
}

#journeyoffaith > div > div > div > img
{
   width:     300px;
   max-width: 100%;
   height:    auto;
}

#journeyoffaith ~ div
{
  clear: both;
}

.liturgies
{
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;
  
-webkit-justify-content:      space-around;
  -moz-justify-content:       space-around;
  justify-content:            space-around;
  
  -moz-align-items:           baseline;
  -webkit-align-items:        baseline;
  align-items:                baseline;
  
  -moz-align-content:         flex-start;
  -webkit-align-content:      flex-start;
  align-content:              flex-start;
}

.liturgies > div
{
  font-family:  'Alegreya Sans',Sans Serif;
  display:      inline-block;
  padding:      0.1em 0.5em;
  font-size:    0.9em;
  font-weight:  600;
  color:        black;
  
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            vertical;
  -ms-flex-direction:         column;
  -webkit-flex-direction:     column;
  -moz-flex-direction:        column;
   flex-direction:            column;
   
  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;
  
  -webkit-justify-content:    flex-start;
  -moz-justify-content:       flex-start;
  justify-content:            flex-start;
  
  -moz-align-items:           flex-start;
  -webkit-align-items:        flex-start;
  align-items:                flex-start;
  
  -moz-align-content:         flex-start;
  -webkit-align-content:      flex-start;
  align-content:              flex-start;
  
  -moz-flex-basis:            25%;
  -webkit-flex-basis:         25%;
  flex-basis:                 25%;
}

.liturgies > div:only-of-type
{
     
     -moz-flex-basis:         100%;
     -webkit-flex-basis:      100%;
  flex-basis:                 100%;
}


.liturgies > div:only-of-type > h3, .liturgies > div:only-of-type > h5
{
   width: 100%;
   text-align: center;
}


.liturgies > div > div
{
    -webkit-flex-grow:     1;
    -ms-flex-grow:         1;
    -moz-flex-grow:        1;
    flex-grow:             1;

    -webkit-flex-shrink:   1;
    -ms-flex-shrink:       1;
    -moz-flex-shrink:      1;
    flex-shrink:           1;

  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;
  
  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;

  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;

  width: 100%;
}

.liturgies > div > h3 
{
  color:     #00aeef;
  display:   block;
  font-size: 2em;
  
  -webkit-margin-before: 1em;
  -webkit-margin-after:  1em;
  -webkit-margin-start:  0px;
  -webkit-margin-end:    0px;
  
  font-weight: bold;
  margin-top:  2em;
  line-height: 1em;
}

.liturgies > div > div > span:nth-of-type(2)
{
  text-align:   right;
  font-size:    1em;
  line-height:  1.3em;
  font-weight:  800;
  color:        black;
  padding-left: 10px;
  width: 40%;
}

.liturgies > div > div > span:nth-of-type(1)
{
  text-align:  left;
  font-size:   1em;
  line-height: 1.3em;
  font-weight: 400;
  color:       #00aeef;
  width:       60%;
}

.liturgies > div > div > span:only-of-type
{
  text-align:  left;
  font-size:   1em;
  line-height: 1.2em;
  font-weight: 400;
  color:       #00aeef;
  width:       100%;
  display:     block;
}

h5
{
  display:               block;
  font-size:             0.83em;
  -webkit-margin-before: 0em;
  -webkit-margin-after:  0em;
  -webkit-margin-start:  0px;
  -webkit-margin-end:    0px;
  font-weight:           bold;
}

.error
{
  border:  2px solid red;
  padding: 1em;
  
  background-color: rgb(255, 174, 159);
  font-weight:      bold;
  margin:           1em 0;
}

video 
{
  width: 100%    !important;
  height: auto   !important;
}

.videoWrapper {
	position:       relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top:    25px;
	height:         0;
	margin-top:     2em;
	margin-bottom:  2em;
}
.videoWrapper iframe {
	position: absolute;
	top:      0;
	left:     0;
	width:    100%;
	height:   100%;
}

#SearchResults
{
   padding: 0 1em;
}

.GoogleSearchresultsTitle > b
{
    color:          #00aeef;
    font-variation: italic;
}

.googleResultTitle
{
    color: #00aeef;
    font-size: 1em;
    font-weight: bold;
}

.googleResultLink
{
   color: black;
   font-weight: normal;
   display: block;
   font-size: 0.8em;
}

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

.liturgies > div
{
  -webkit-flex-basis: 100%;
  -moz-flex-basis: 100%;
  flex-basis: 100%;
}
}

@media only screen and (device-width: 768px) {

 #mainPicture 
 {
  min-height: 491px;
 }

 #mainHeadline
 {
    min-height: 102px;
 }
}

.liturgies > div > span 
{
  display: block;
  max-width: 230px;
}

#splash
{
  display:   none;
  width:     100%;
  height:    100%;
  position:  fixed;
  line-height: 1em;
  top:      0px;
  left:     0px;
  z-index:  400;
  
  background-color: white;
  margin:           0 auto;
  padding:          10% 0;
  opacity:          0.9;
}
#splashtext
{
  width:    98vw;
  height:   100%;
  position: fixed;
  line-height: 1em;
  top:         0px;
  left:        0px;
  z-index:     410;
  background-color: transparent;
  margin:     0 auto;
  padding:    1vw;
  text-align: center;
  font-size:  1em;
  font-weight: bold;
  opacity:     1;
}

#massbookupdate
{
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;
  
  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;
  
  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;

  -moz-flex-basis:            100%;
  -webkit-flex-basis:         100%;
  flex-basis:                 100%;
}

.massinmassbook
{
  padding: 2px;
  display: -webkit-box;  
  display: -moz-box;     
  display: -ms-flexbox;  
  display: -webkit-flex; 
  display: flex;         

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;
   
  -ms-flex-wrap:              nowrap;
  -webkit-flex-wrap:          nowrap;
  -moz-flex-wrap:             nowrap;
  flex-wrap:                  nowrap;
  
  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;
  
  -moz-align-items:           stretch;
  -webkit-align-items:        stretch;
  align-items:                stretch;
  
  -moz-align-content:         stretch;
  -webkit-align-content:      stretch;
  align-content:              stretch;

  -moz-flex-basis:            100%;
  -webkit-flex-basis:         100%;
  flex-basis:                 100%;
}

.massinmassbook:nth-of-type( odd )
{
  background-color: #E5E6E7;
}

.massinmassbook:first-of-type
{
  font-weight: bold;
  background-color: #00AEEF;
  color: white;
  padding: 3px 0;
}

.massinmassbook > span:nth-of-type(1)
{
  -moz-flex-basis:            5%;
  -webkit-flex-basis:         5%;
  flex-basis:                 5%;
}

.massinmassbook > span:nth-of-type(2)
{
  -moz-flex-basis:            20%;
  -webkit-flex-basis:         20%;
  flex-basis:                 20%;
}

.massinmassbook > span:nth-of-type(3)
{
  -moz-flex-basis:            15%;
  -webkit-flex-basis:         15%;
  flex-basis:                 15%;
}

.massinmassbook > span:nth-of-type(4)
{
  -moz-flex-basis:            60%;
  -webkit-flex-basis:         60%;
  flex-basis:                 60%;
}

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

   #googlesearch input
   {
     -moz-flex-basis:            100%;
     -webkit-flex-basis:         100%;
     flex-basis:                 100%;   
  }
   
  #search
  {
     
       display: -webkit-box;  
       display: -moz-box;     
       display: -ms-flexbox;  
       display: -webkit-flex; 
       display: flex; 
  }
  
  #googlesearch
  {
       text-align: center;
  }
}

@media screen and (max-width:350px) {
   
   #googlesearch
   {
     padding-top:   5px;
     padding-right: 0px;
     text-align: center;
   }
   
   #bulletin
   {
      text-align: center;
   }
}

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

  #infobarcontainer > div,
  #midsection > div
  {
     max-width: auto;
     min-width: auto;
  -moz-flex-basis:   15%;
  -webkit-flex-basis: 15%;
  flex-basis:         15%;     
  }
}

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

  #infobarcontainer > div,
  #midsection > div
  {
     max-width: auto;
     min-width: auto;
  -moz-flex-basis:   30%;
  -webkit-flex-basis: 30%;
  flex-basis:         30%;
  }
}

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

  section > div,
  footer > div
  {
     max-width: auto;
     min-width: auto;
     -moz-flex-basis: 40%;
     -webkit-flex-basis: 40%;
     flex-basis: 40%;
  }
}

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

  section div,
  footer > div
  {
    max-width: auto;
    min-width: auto;
   -moz-flex-basis:   40%;
   -webkit-flex-basis: 40%;
   flex-basis:         40%;
  }
  
  #navigation li
  {
     border: 0px solid #00aeef;
     padding:0.5em 1em;
  }
}

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

  #infobarcontainer > div,
  #midsection > div
  {
     max-width: auto;
     min-width: auto;
  -moz-flex-basis:   100%;
  -webkit-flex-basis: 100%;
  flex-basis:         100%;     
  }
  
    section div,
    footer > div
    {
      max-width: auto;
      min-width: auto;
     -moz-flex-basis:   100%;
     -webkit-flex-basis: 100%;
     flex-basis:         100%;
  }
}

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

  #mainHeadline
  {
     -moz-flex-basis:            20%;
     -webkit-flex-basis:         20%;
     flex-basis:                 20%;
  
     margin-bottom:  0px;
  }
}

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

  #mainHeadline
  {
    -moz-flex-basis:            100%;
    -webkit-flex-basis:         100%;
    flex-basis:                 100%;
     
     margin-bottom:  20px;
  }

  #mainPicture
  {
     text-align: center;

    -moz-flex-basis:            100%;
    -webkit-flex-basis:         100%;
    flex-basis:                 100%;

     min-width: 100%;
     max-width: 100%;
  }

  #flexMainHeadline
  {
   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;

   -moz-flex-basis:            auto;
   -webkit-flex-basis:         auto;
   flex-basis:                 auto;   
  }

  #mainPicture img
  {
     margin: 0.5em auto 0.5em auto;
     min-width: 100%;
     max-width: 100%;
  }

}

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


   div.articlePhoto
  {
    width:          100%;
    float:          none;
    display:        block;
    margin-left:    0em;
    margin-top:     1em;
    margin-bottom:  1em;
  }
}

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

  #infobarcontainer h3,
  #midsection h3
  {
     padding-top: 0.5em;
  }

  #googlesearch
  {
     padding-right: 0px;
  }

  #googlesearch input
  {
     width: 100%;
  }
}

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

#logo
{
   text-align: left;
}

.infobar h3
{
     padding-top: 1em;
}

div.articlePhoto
{
    float:      none;
    max-width:  100%;
    display:    block;
    text-align: center;
}

  #infobarcontainer > div,
  #midsection > div
  {
   padding:     5px;
   max-width:   auto;
   min-width:   auto%;
     -moz-flex-basis:   100%;
     -webkit-flex-basis: 100%;
    flex-basis:         100%;
  }

  footer > div
  {
   max-width: auto;
   min-width: auto;
     -moz-flex-basis:   100%;
     -webkit-flex-basis: 100%;
    flex-basis:         100%;
  }


  div.otherHeadline
  {
  -moz-flex-basis:            100%;
  -webkit-flex-basis:         100%;
  flex-basis:                 100%;
  
     max-width: 100%;
     border-bottom: 1px dotted #00aeef ;
  }
    
  .otherPhoto
  {
     width: 100%;
     max-width: 100%;
     display:  inline-block;
  }
  
 
  .smallsummary
  {
     display:       inline-block;
     width:         90%;
     padding-left:  5%;
     vertical-align:top;
     font-size:     3vw;
     line-height:   2.8vw;
  }
}

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

  h2, .h2 
  { 
     font-size:   7vw;
     line-height: 7vw;
  }
  
  .smallsummary
  {
     font-size:   3.3vw;
     line-height: 3.5vw;  
  }
  
  #mainSummary
  {
     font-size:   4vw;
     line-height: 4vw;  
  }
}

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

#navigation > ul,
#mainHeadline,
#flexMainHeadline
{
  padding-left: 0em;
  padding-right: 0em;
  -moz-flex-basis:     auto;
  -webkit-flex-basis:  auto;
  flex-basis:          auto;
}

#icons
{
  padding-left: 1em;
  padding-right: 1em;
  -webkit-justify-content:    center;
  -moz-justify-content:       center;
  justify-content:            center;
  
}

#navigation, #navigation > ul
{
  -webkit-justify-content:    center;
  -moz-justify-content:       center;
  justify-content:            center;

  -moz-align-items:           center;
  -webkit-align-items:        center;
  align-items:                center;
  
  -moz-align-content:         center;
  -webkit-align-content:      center;
  align-content:              center;
}

  .infobar, 
  #midsection > .archdiocese,
  #midsection > .parish,
  #midsection > .church
  {
    -moz-flex-basis:   100%;
    -webkit-flex-basis: 100%;
    flex-basis:         100%;
  }
}

@media screen and (max-width:500px) 
{
  main
  {
   padding: 0 1em;
  }

#logo
{
   text-align: center;
}

  #navigation > ul
  {
   -ms-box-orient:            vertical;
   -ms-flex-direction:        column;
   -webkit-flex-direction:    column;
   -moz-flex-direction:       column;
   flex-direction:            column;
  }

  #navigation > ul > li
  {
     border-bottom:  1px solid white;
     width:          100%;
     text-align:     center;
     padding:        0.5em 0em;
  }

  #googlesearch input
  {
      text-align:center;
  }
}

@media screen and (max-width:600px) 
{
  .calendarItem
  {
      font-size:   3vw;
      line-height: 2.8vw;
  }
  
  .calendarTime
  {
      font-size:   4vw;
      line-height: 3.8vw;
  }
  
  .calendarDate
  {
      font-size:   3vw;
      line-height: 2.8vw;
  }

  .calendarEvent
  {
      font-size:   3vw;
      line-height: 2.8vw;
  }

  .allDayCalendarItem
  {
    font-size:   3vw;
    line-height: 2.8vw;
  }
}

.bookshelf, .biogallery
{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;

  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;

  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;

  -moz-align-items:           flex-start;
  -webkit-align-items:        flex-start;
  align-items:                flex-start;

  -moz-align-content:         flex-end;
  -webkit-align-content:      flex-end;
  align-content:              flex-end;
}

div.book, div.bio
{
  margin-bottom:              20px;
  -moz-flex-basis:            45%;
  -webkit-flex-basis:         45%;
  flex-basis:                 45%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

   -ms-box-orient:            horizontal;
  -ms-flex-direction:         row;
  -webkit-flex-direction:     row;
  -moz-flex-direction:        row;
   flex-direction:            row;

  -ms-flex-wrap:              wrap;
  -webkit-flex-wrap:          wrap;
  -moz-flex-wrap:             wrap;
  flex-wrap:                  wrap;

  -webkit-justify-content:    space-between;
  -moz-justify-content:       space-between;
  justify-content:            space-between;

  -moz-align-items:           flex-start;
  -webkit-align-items:        flex-start;
  align-items:                flex-start;

  -moz-align-content:         flex-end;
  -webkit-align-content:      flex-end;
  align-content:              flex-end;
}

div.bookshelf div.book div, div.biogallery div.bio div
{
    display: inline-block;
    width: 45%;
}

div.bookshelf div.book div img 
{
    display: inline-block;
    max-width: 200px;
    padding-right: 5px;
}

div.biogallery div.bio div img 
{
    display: inline-block;
    max-width: 162px;
    padding-right: 5px;
}


div.biogallery div.bio div span:nth-of-type(1)
{
     font-size: 1.2em;
     display: block;
     color: black;
     margin-bottom: 5px;
     font-weight: bold;
}

div.biogallery div.bio div span:nth-of-type(2)
{
     font-size: 1em;
     display: block;
     color: #00aeef;
     margin-bottom: 0px;
}

div.biogallery div.bio div span:nth-of-type(3)
{
  -moz-align-items:           center;
  -webkit-align-items:        center;
  align-items:                center;
}

div.biogallery div.bio div span:last-of-type
{
          font-size: 0.8em;
	      display: block;
	      color: grey;

}

@media screen and (max-width: 900px)
{
  div.biogallery div.bio div
  {
    display: inline-block;
    width: 45%;
  }

  div.bio
  {
    margin-bottom:              20px;
    -moz-flex-basis:            100%;
    -webkit-flex-basis:         100%;
  flex-basis:                 100%;
  -webkit-justify-content:    center;
  -moz-justify-content:       center;
  justify-content:            center;

  }
}

@media screen and (max-width: 525px)
{
  div.biogallery div.bio
  {
  }

  div.biogallery div.bio div
  {
    display: inline-block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
}

#subscribenewsletter select,
#subscribenewsletter input
{
   color:    white;
   background-color: #f79521;
   border: 1px solid #FFC988;
   width: calc(100% - 0.6em - 2px);
}

#subscribenewsletter  ::-webkit-input-placeholder 
{
    color:    white;
    opacity:  0.5;
}

#subscribenewsletter :-moz-placeholder 
{
   color:    white;
   opacity:  0.5;
}

#subscribenewsletter ::-moz-placeholder 
{
   color:    white;
   opacity:  0.5;
}

#subscribenewsletter :-ms-input-placeholder 
{
   color:    white;
   opacity:  0.5;
}

#subscribenewsletter input[type='submit']
{
   opacity:               1;
   cursor:                'pointer';
}

#replynewsletter
{
   font-weight: bold;
   padding: 0 0 0 0;
   font-size: 1em;
}


.splashpage
{
   padding-left: 0;
   padding-right: 0;
   padding-top:0;
}

.undersplashmargin
{
   padding-top:  1em;
   padding-left: 1em;
   padding-right: 1em;
}
.splashpageimage
{
   width: 100%;
}

.splashpageimage img
{
    width: 100%;
    max-width: 100%;
}
.clearboth
{
  clear: both;
}

.facebook-wrapper
{
   margin: 1em 0;
}


.center
{
   margin: 1em 0;
   text-align: center;
}

#contactus fieldset
{
   display: block;
   margin-bottom:2em;
   border: 2px solid #f79521;
   background-color: #ffc073;
   
     -webkit-margin-start:   0px;
     -webkit-margin-end:     0px;
     -webkit-padding-before: 0em;
     -webkit-padding-start:  0em;
     -webkit-padding-end:    0;
     -webkit-padding-after:  0em;
  min-width: -webkit-min-content;
  padding: 1em 1.5em 1em 1em;
  margin: 1em 0;
}

#contactus legend
{
  font-weight: 800;
  color: #f79521;
  padding: 0.2em 0.4em 0.1em 0.4em;
  border: 2px solid #f79521;
  background-color: white;
}

#contactus textarea
{
   color:    #f79521;
  width: 100%;
  height: 6.1em;
  font-size: 1.1em;
  color: #f79521;
  background-color: #FFE8CC;
  border: 1px solid #f79521;
  font-family: 'Alegreya Sans',Sans Serif;
  padding: 0.3em;
  margin-bottom: 0.5em;

}

#contactus input[type='submit']
{
   width: 100%;
   font-weight: 800;
   height: 2em;
   color: black;
   border-radius:         5px 5px 5px 5px;
   -moz-border-radius:    5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   opacity:               1;
}

#contactus input[type='checkbox']
{
   display: inline-block;
   width: 1em;
   height: 1em;
   background-color:#ffc073;
}

#contactus input,
#contactus select
{
   color:    #f79521;
  width: 100%;
  height: 1.1em;
  font-size: 1.1em;
  color: #f79521;
  background-color: #FFE8CC;
  border: 1px solid #f79521;
  font-family: 'Alegreya Sans',Sans Serif;
  padding: 0.3em;
  margin-bottom: 0.5em;
}

.svg-social-icons
{
   width: 30px;
   height: 30px;
   margin-right: 10px;
}