/* compress later https://csscompressor.com/ */
/* HTML5 reset */
/* html5reset.css - 01/11/2011 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%; font-size: calc(1rem + 0.1vh);
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
    line-height: calc(1rem + 0.2vh);
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display: block;
}

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000; 
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration:  line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;   
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}


/* adamz UI formatting CSS */
:root {
  color-scheme: light dark;
}

  body {
    padding: 0px;
    margin: 0px;
    text-align: right;
    font-family: "Source Sans Pro", source-sans-pro, Verdana, Geneva, sans-serif;
    font-weight: 200;
    font-style: normal;
    line-height: 110%; line-height: calc(1.1rem + 0.2vh);
    background-color: #000000;
    text-wrap: balance;
  }
  
  P {
    font-size: 90%; font-size: calc(0.9rem + 0.15vh);
    color: #000000;
    line-height: 150%; line-height: calc(1.5rem + 0.2vh);
    margin-bottom: 1rem;
  }
  
#content  li {
    font-size: 90%; font-size: calc(0.9rem + 0.15vh);
    line-height: 150%; line-height: calc(1.5rem + 0.2vh);

  }
  #content ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
  }
  A {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
  }
  
  A:active {
    background-color: #000080;
    color: #ffffff;
  }
  /* A:visited {COLOR: #404040; FONT-WEIGHT: bold; TEXT-DECORATION: none} */
  
  H1, h2, h3 {
    color: #000000;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: normal;
    text-wrap: balance;
  }
  H1 { font-size: 150%; font-size: calc(1.5rem + 0.5vh); }
  H2 {font-size: 150%; font-size: calc(1.5rem + 0.5vh);}
  H3 {font-size: 150%; font-size: calc(1.5rem + 0.5vh);}
  
  a:hover {
    text-decoration: underline;
  }

  /* Links for screen readers */
  .sr-only {
    background: #a20025;
    color: #fff;
  height: auto;
  left: 50%;
  padding: 10px;
  position: absolute;
  text-transform: uppercase;
  font-size: 100%; font-size: calc(1rem + 0.1vh);
  font-weight: normal;
  /* transform: translateY(-100%);*/
  transition: transform 0.3s;
    }
.sr-only:not(:focus) {
  padding: 0px;
  clip: rect(1px, 1px, 1px, 1px);
}
    /*  .sr-only:focus {
      transform: translateY(0%);
    } */
  /*  Background Video ===============================*/
  
  #backgroundvideo {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index:-1000;
}
  
  /*  SECTIONS  ============================================================================= */
  
  .section {
    clear: both;
    padding: 0px;
    margin: 0px;
  }
  
  /*  GROUPING  ============================================================================= */
  
  .group:before,
  .group:after {
    content: "";
    display: table;
  }
  .group:after {
    clear: both;
  }
  .group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
  }
  
  /*  GRID COLUMN SETUP   ==================================================================== */
  
  .col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
  }
  
  .col:first-child {
    margin-left: 0;
  } /* all browsers except IE6 and lower */
  
  /*  GRID OF THREE   ============================================================================= */
  
  .span_3_of_3 {
    width: 100%;
  }
  
  .span_2_of_3 {
    width: 66.13%;
  }
  
  .span_1_of_3 {
    width: 32.26%;
  }
  
  /* Containers */
  
  #container {
    padding: 0px;
    width: auto;
    display: block;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 0 -50px 0;
  }
  #logo {
    margin: 0px;
    margin-left: 10px;
    display: block;
  }
  
  #logo a {
    text-decoration: none;
    background-position-x: left;
    background-position: left top;
    background-image: url(../images/AdamLeincom_web_logo.png);
    background-repeat: no-repeat;
    background-image: url(../images/AdamLeinLogo.svg);
    display: block;
    max-width: 375px;
    width: auto;
    height: 90px;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    margin-left: 8px;
    margin-top: 10px;
    margin-bottom: 15px;
    transition: transform 0.3s;
  }
  .no-js #logo a, .no-svg #logo a {
	    background-image: url(../images/AdamLeincom_web_logo.png);
}
  #logo a:active,
  #logo a:hover {
    background-color: transparent;
  }
  #logo h1 {
    display: none;
  }
  
  #row1 {
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding-bottom: 15px;
   /*  background-image: -webkit-linear-gradient(
      270deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    background-image: -moz-linear-gradient(
      270deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    background-image: -o-linear-gradient(
      270deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    padding: 0px;
    background-image: linear-gradient(
      180deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    ); */
  }
  
  #row2 {
    clear: both;
  }
  
  #headerspacer {
    height: 40vh;
    display: block;
    width: 100%;
    clear: both;
    padding: 0px;
    margin: 0px;
  }
  
  #rightpane {
    padding: 0px;
    margin: 30px 0px 0px 0px;
    width: auto;
    max-width: 120px;
    display: block;
    height: auto;
    visibility: visible;
    text-align: left;
  }
  #leftpane {
    padding: 0px 261px 0px 0px;
    margin: 0px;
    display: block;
    text-align: center;
  }
  
  .col {
    margin: 0px;
    padding: 0px;
  }
  
  /* Top navigation */
  #topnav {
    margin: 0px;
    margin-top: 10px;
    margin-left: 24px;
    height: 18px;
    text-align: right;
    max-width: 474px;
    display: block;
    clear: both;
  }
  #topnav ul {
    padding: 0px;
    margin: 0px;
  }
  #topnav ul li {
    list-style-type: none;
    float: left;
  }
  #topnav a {
    display: block;
    padding: 3px 7px 3px 7px;
    font-size: 80%; font-size: calc(0.8rem + 0.1vh);
    font-weight: 300;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
    margin-left: 0px;
    margin-right: 17px;
    text-shadow: -1px 1px 2px #000000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000');
  }
  #topnav a:hover,
  #topnav a:focus {
    background-position: top;
    text-decoration: none;
    background-color: #a20025;
    color: #ffffff;
   
  }
  a.topnav {
    color: #ffffff;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
    text-decoration: none;
    transition: transform 500ms ease;
    transform-origin: left;
  }
  #topnav a.topnavhere,
  #topnav a.topnavhere:hover,
  #topnav a.topnavhere:focus {
    color: #fb0039;
    background-image: none;
    background-color: transparent;
  }
  
  /* random quote styles */
  #randomquote {
    margin-top: 30px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    display: block;
    clear: both;
    max-width: 200px;
  }
  
  #randomquote p {
    color: #ffffff;
    font-size: 65%; font-size: calc(0.65rem + 0.1vh);
    line-height: 150%; line-height: calc(1.5rem + 0.2vh);
  }
  
  .quote {
    text-align: left;
    text-decoration: none;
    margin-left: 3px;
    margin-right: 4px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .author {
    text-decoration: none;
    font-style: italic;
    text-align: right;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 7px;
    margin-bottom: 0px;
    display: block;
  }
  
  /* Subnavigation sidebar */

  #subnav ul {
    padding: 0px;
    margin: 0px 0px 0px 0px;
  }
  #subnav ul li {
    list-style-type: none;
  }
  #subnav ul li a {
    font-size: 70%;
    font-weight: 500;
    display: block;
    padding: 2px 2px 2px 6px;
    margin: 3px 0px 3px 0px;
    color: #ffffff;
    width: 120px;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: -1px 1px 2px #000000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000');
    transition: transform 500ms ease;
  }
  #subnav a:hover,
  #subnav a:focus {
    background-position: top;
    background-color: #a20025;
    color: #ffffff;
  }
  
  /* Content styles */
  #content {
    display: block;
    padding: 12px;
    margin: 0px auto 0px auto;
    clear: both;
    text-align: left;
    /*font-weight: 200; 
      font-size: medium; */
    max-width: 500px;
    background: #ffffff;
  }
  
  #content {
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    backdrop-filter: blur(20px) saturate(125%);
  }
  
  .no-backdropfilter #content {
    background-color: #ffffff;
    background: -webkit-linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    background: -moz-linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    background: -o-linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(255, 255, 255, 1) 100%
    );
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=85)"; /* IE8 */
  }
  /* .no-backdropfilter #content form { 
      background: #ffffff; 
  }   */
  
  #topstory {
    clear: both;
  }
  
  #content img {
    position: relative;
    margin: 10px;
  }
 
  
  .head {
    padding: 4px 6px 4px 6px;
    font-size: 100%; font-size: calc(1rem + 0.1vh);
    background-color: #676767;
    color: #ffffff;
    font-weight: bold;
    clear: both;
  }
  
  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }
  
  .video-container iframe,
  .video-container object,
  .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* Social Links */
  
  div#sociallinks {
    text-align: center;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .btn_contact {
    background: #8a8a8a;
    background-image: -webkit-linear-gradient(top, #8a8a8a, #363636);
    background-image: -moz-linear-gradient(top, #8a8a8a, #363636);
    background-image: -ms-linear-gradient(top, #8a8a8a, #363636);
    background-image: -o-linear-gradient(top, #8a8a8a, #363636);
    background-image: linear-gradient(to bottom, #8a8a8a, #363636);
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
    color: #ffffff;
    font-size: 100%; font-size: calc(1rem + 0.1vh);
    font-weight: 400;
    text-transform: uppercase;
    padding: 7px 30px 7px 30px;
    text-decoration: none;
    margin-right: auto;
    margin-left: auto;
    border-top: #cbcbcb 2px solid;
    border-left: #cbcbcb 2px solid;
    border-right: #434343 2px solid;
    border-bottom: #434343 2px solid;
  }
  
  .btn_contact:hover {
    background: #a20025;
    background-image: -webkit-linear-gradient(top, #a20025, #70001a);
    background-image: -moz-linear-gradient(top, #a20025, #70001a);
    background-image: -ms-linear-gradient(top, #a20025, #70001a);
    background-image: -o-linear-gradient(top, #a20025, #70001a);
    background-image: linear-gradient(to bottom, #a20025, #70001a);
    text-decoration: none;
  }
  .btn_contact::first-letter {text-decoration: underline!important;}
  
  #sociallinks ul {
    list-style: none;
    text-align: center;
    padding: 0px;
    clear: both;
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
    display: table;
  }
  #sociallinks li {
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
  }
  #sociallinks ul li a {
    font-size: 70%; font-size: calc(0.7rem + 0.1vh);
    font-weight: 500;
    padding: 6px;
    margin: 4px 0px 4px 0px;
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
  }
  #sociallinks ul li a:hover {
    background-color: #a20025;
    color: #ffffff;
  }
  
  /* Thumbnail Gallery Styles */
  
  .gallery {
    display: block;
    margin-bottom: 12px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  
  .gallerycell img {
    padding: 2px;
    vertical-align: middle;
    margin: auto;
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timeline: view();
  }

  .gallerycell img:hover {
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
  }
  .gallerycell {
    display: block;
    float: left;
    width: 25%;
    height: 110px;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    white-space: nowrap;
  }
  .gallerycell:before,
  .gallerycell_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .gallerycell a { display: inline-block;}
  .gallerycell a:active {
    background-color: none;
    background: none;
  }
  
  .galleryrow {
    clear: left;
  }
  
  Div.photogallery P {
    font-size: 80%; font-size: calc(0.8rem + 0.1vh);
    color: #a20025;
  }
  Div.photogallery a:active {
    filter: alpha(
      Opacity=99,
      FinishOpacity=30,
      style=1,
      StartX=0,
      FinishX=2,
      StartY=0,
      FinishY=2
    );
    background: none;
  }
  Div.photogallery a:visited {
    filter: alpha(
      Opacity=99,
      FinishOpacity=30,
      style=1,
      StartX=0,
      FinishX=2,
      StartY=0,
      FinishY=2
    );
    background: none;
  }
  
  span.Date {
    font-size: 70%; font-size: calc(0.7rem + 0.1vh);
    font-style: italic;
  }
  
  #content img.photo {
    max-width: 460px;
    width: 100%;
  }
  
  /* Picture display page */
  .PictureTitle {
    color: #2e398d;
    font-weight: bold;
    font-size: 100%; font-size: calc(1rem + 0.1vh);
  }
  .navsubsection {
    font-size: 50%; font-size: calc(0.5rem + 0.1vh);
    color: #2e398d;
    font-weight: bold;
    text-decoration: none;
    width: 95%;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    font-variant: small-caps;
    text-align: center;
  }
  a.prevnext {
    font-size: 70%; font-size: calc(0.7rem + 0.1vh);
    color: #a20025;
    font-weight: 500;
    text-transform: uppercase;
     white-space: nowrap;
     padding: 0.4rem;
  }
  div.photo img {
    max-width: 450px;
  }
  #nextprevbuttons {
    margin-top: 25px;
    display: flex;
    width: 100%;
    clear: both;
    margin-bottom: 10px;
  
  }
  #prevbutton, #nextbutton  { flex-grow: 1; 
    align-items: stretch;}
  #nextbutton a {float: right;}

  /* Pages listing table */
  div.pages {
    width: 100%;
  }
  
  ul#pageslist li {
    list-style-type: none;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 5px;
  }
  ul#pageslist p {
    margin: 0px;
    padding: 0px;
  }
  span.plist_title {
    font-size: 90%; font-size: calc(0.9rem + 0.15vh);
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: uppercase;
    display: inline-block;
    width: 80%;
  }
  span.plist_date {
    font-weight: 100;
    font-size: 75%; font-size: calc(0.75rem + 0.1vh);
    font-style: italic;
    display: inline-block;
    width: 15%;
  }
  span.plist_descr {
    display: inline-block;
    width: auto;
    clear: left;
    padding-left: 25px;
    padding-top: 10px;
  }
  
  .tablestripes2 {
    background-color: #f4f4f4;
  }
  
  /* Forms */
  .formFields {
    padding: 10px;
  }
  .formFields label,
  .formFields input {
    clear: both;
    width: 100%;
  }
  .formFields textarea {
    clear: both;
    width: 100%;
  }
  .formFields label {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 115%; font-size: calc(1.15rem + 0.1vh);
    display: block;
  }
  .formFields input {
    margin-bottom: 20px;
    display: block;
  }
  .buttonsContainer {
    text-align: center;
    padding: 10px;
  }
  .guesttxtlabels {
    font-size: 70%; font-size: calc(0.7rem + 0.1vh);
    font-weight: bold;
    color: #2e398d;
    /* 
       
      border-right: 1px solid #DDDDB3; 
      border-bottom: 1px solid #DDDDB3; 
      background-color: #F0F0F0; 
       
      border-right-color: #2E398D; 
      border-bottom-color: #2E398D; */
  }
  .guesttxt {
    font-size: 100%; font-size: calc(1rem + 0.1vh);
    margin: 3px 0px;
  }
 
  div.guestbookentry {
    margin-top: 30px;
    display: block;
    height: auto;
  }
  div.guestbookentry .guesttxtlabels {
    width: 22%;
    display: block;
    float: left;
    white-space: nowrap;
  }
  div.guestbookentry .guesttxt {
    width: 77%;
    display: block;
    float: left;
  }
  div.guestbookentry .guesttxtrow {
    width: 100%;
    clear: both;
    border-bottom: 1px solid #ddddb3;
    display: block;
  }
  div.guestlistspacer {
    display: block;
    width: 100%;
    clear: both;
    height: 15px;
  }
  
  .pagelinksbck {
    background-color: #cccccc;
  }
  .pagelinks {
    font-weight: bold;
    clear: both;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 20px;
    display: block;
    text-align: center;
  }
  .pagelinks a { display: inline-block; 
    padding: 7px; }
  .pagelinks span.currentpage { background-color: #bbbbbb; color: #000000; padding: 7px;}
  .formfield {
    background-color: #fefefc;
    padding-top: 10px;
  }
  .formbutton {
    color: #ffffff;
  
    font-weight: bold;
    border-left: 2px solid #a05456;
    border-right: 2px solid #000000;
    border-top: 2px solid #a05456;
    border-bottom: 2px solid #000000;
    background-color: #2e398d;
    font-size: 100%; font-size: calc(1rem + 0.1vh);
    border-color: #a05456;
    border-style: none;
  }
  
  .photo {
    text-align: center;
    margin-top: 5px;
  }
  
  .newsdate {
    padding-left: 7px;
    /* float: left;
    width: 20%; */
  }
  .newsdate p {
    /*color: #8a8a8a;
    color: #a20025;*/
    color: #7a011d;
    font-weight: 200;
    font-size: 100%; font-size: calc(1rem + 0.1vh);
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .newsrow {
    clear: both;
    display: grid;
    margin-bottom: 15px;
  }
  .newsrow:nth-child(even),
  #pageslist li:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.3);
  }
  
  .no-js .newsrow:nth-child(even),
  .no-js #pageslist li:nth-child(even) {
    background-color:#dedede;
  }

  .newstext {
    /* width: 75%; 
    display: block;
    float: right;*/
    padding-left: 7px;
  }
  .newstext p {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  
  /* Footer stuff */
  #footer {
    background-position: 50% bottom;
    padding: 60px 5px 25px 5px;
    clear: both;
    width: auto;
    display: block;
    float: none;
    text-align: center;
    /* height: 51px; */
    height: auto;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(
      270deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 1) 100%
    );
    background-image: -moz-linear-gradient(
      270deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 1) 100%
    );
    background-image: -o-linear-gradient(
      270deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 1) 100%
    );
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(0, 0, 0, 1) 100%
    );
  }
  #footer a {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 80%; font-size: calc(0.8rem + 0.1vh);
  }
  #footer a:hover {
    background: #a20025;
  }
  #push {
    height: 50px;
  }
  
  div#facebookcomments {
    margin-top: 20px;
  }
  p#copyright {
    font-size: 70%; font-size: calc(0.7rem + 0.1vh);
    color: #8a8a8a;
    font-weight: normal;
  }
  
  .stickymonavbar {
    display: none;
  }
  
  /*style of text when new font is loading*/
  .wf-loading h1,
  .wf-loading p {
    font-family: source-sans-pro, sans-serif;
    visibility: hidden;
  }
  
  /* High DPI style modifications */
  @media (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 120dpi),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-resolution: 124.8dpi),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-resolution: 144dpi),
    (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) {
        html { font-size: 120%; font-size: calc(1rem + 0.6vh)}
    body {
      /* Usually one should use this on dark background only 
      http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ */
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
    }
     #logo a {max-width: 410px; height: 118px;
  }
  #topnav {max-width: 700px;}
  #content { max-width: 700px;}
  
  }
 /* extra large browser windows */
@media (min-width: 1240px) {
  html { font-size: 140%; font-size: calc(1.4rem + 0.1vh);}
  #content {max-width: 700px; padding: 1rem;}
  #logo a {max-width: 410px; height: 118px;
  }
  #topnav {max-width: 700px;}
  #randomquote {
	max-width: 100%;
}

}
  
  /* Style modifications for different browser sizes */
  /* tablet-ish widths */
  @media (max-width: 750px) {
    #topnav ul li {
      list-style-type: none;
      float: none;
      text-align: left;
    }
  
    .gallerycell {
      width: 32%;
    }
    div.photo img {
      max-width: 450px;
      width: 95%;
    }
  
    .newstext {
      width: 100%;
      display: block;
      float: none;
      padding-left: 15px;
      clear: both;
    }
  }
  /* mobile widths */
  @media (max-width: 580px) {
    html { font-size: 100%; font-size: calc(1rem + 0.1vh);}

    .col {
      margin: 0% 0% 0% 0%;
    }
    .span_3_of_3 {
      width: 100%;
    }
    .span_2_of_3 {
      width: 100%;
    }
    .span_1_of_3 {
      width: 100%;
      background-image: -webkit-linear-gradient(
        270deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 100%
      );
      background-image: -moz-linear-gradient(
        270deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 100%
      );
      background-image: -o-linear-gradient(
        270deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 100%
      );
      background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1) 100%
      );
    }
    #logo {
      width: 75%;
    }
    #topnav {
      /*margin-top: 50px; */
      margin-top: 35px;
      margin-bottom: 10px;
      width: auto;
      height: auto;
      display: block;
    }
    #topnav a {
	padding-top: 11px; padding-bottom: 10px; font-size: 110%; font-size: calc(1.1rem + 0.1vh);
}
    #headerspacer {
      display: none !important;
    }
  
    #randomquote {
      clear: both;
      float: right;
      margin-right: 20px;
      width: 100%;
      margin-top: 10px;
      padding-bottom: 10px;
      display: block;
  
    }
    #randomquote p {
      font-size: 65%; font-size: calc(0.65rem + 0.1vh);
    }
  
    #sociallinks ul li a {
	padding: 7px; display: inline-block; /*width: 25%*;*/
}
    #row1 {
      padding: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-left: 0px;
      margin-bottom: 0px;
      /*background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,1.00) 100%); 
      background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,1.00) 100%); 
      background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,1.00) 100%); 
      background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,1.00) 100%); 
          */
    }
    #row1.section.group .col.span_2_of_3 {
      display: block;
      /*margin-bottom: 77px; */
    }
  
    #row1.section.group .col.span_1_of_3 {
      clear: both;
      display: block;
    }
    #rightpane {
	max-width: 100%; width: 100%;
}
    
    .gallerycell {
      width: 50%;
    }
    #content {
      background: #ffffff;
    }
    #content {
      background-color: rgba(255, 255, 255, 0.65);
      -webkit-backdrop-filter: blur(30px) saturate(125%);
      backdrop-filter: blur(30px) saturate(125%);
    }
  
    .no-backdropfilter #content {
      background-color: rgba(255, 255, 255, 1);
    }
  
    #subnav ul li a {
      font-size: 110%; font-size: calc(1.1rem + 0.1vh);
      width: auto;
      padding-top: 10px; padding-bottom: 10px;
    }
    #row2.section.group .col.span_1_of_3 {
      width: 100%;
      background: #000000 !important;
    }
    #content img.inline50img {
      width: 40%;
    }
    #content p img {
      width: 100%;
    }
  
    #content p {
      font-weight: 400;
    }
    #backgroundvideo {
	 width: 100vw;
  height: 50vh;
}
    .cb-slideshow li span {
      width: 100%;
      height: 70%;
      position: absolute;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-position: top center;
      transition: height 5s ease;
      -webkit-transition: height 5s ease;
      -moz-transition: height 5s ease;
      -o-transition: height 5s ease;
    }
    .cb-slideshow {
      transition: height 5s ease;
      -webkit-transition: height 5s ease;
      -moz-transition: height 5s ease;
      -o-transition: height 5s ease;
      list-style-type: none;
    }
        
    
    #push {
      display: none;
    }
    #footer {
      background: #000000;
      background-image: none;
    }
  }
  /* Only show sticky footer if width is lower than 480px and height is larger than 400 */
  @media (min-height: 400px) and (max-width: 480px) {
    /* page navigation mobile menu sticky footer */
    .stickymonavbar {
      overflow: hidden;
      position: fixed;
      width: auto;
      z-index: 10;
      display: flex;
      justify-content: center;
      bottom: 0;
  bottom: env(safe-area-inset-bottom, 0);
    }
  
    .stickymonavbar a {
      /*float: left; 
      display: block;*/
      display: flex;
      text-align: center;
      padding: 12px 13px;
      margin: 0px;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 100%; font-size: calc(1rem + 0.1vh);
      font-weight: 300;
    }
    .stickymonavbar a {
      background-color: black;
      color: #f2f2f2;
      background-color: rgba(51, 51, 51, 0.65);
      -webkit-backdrop-filter: blur(30px) saturate(125%);
      backdrop-filter: blur(30px) saturate(125%);
    }
    .no-backdropfilter .stickymonavbar a {
      background-color: rgba(51, 51, 51, 1);
      color: #ffffff;
      border: 1px #ffffff;
    }
  
    .stickymonavbar a:hover {
      background-color: #ddd;
      color: black;
    }
  
    .stickymonavbar a.active {
      background-color: #4caf50;
      color: white;
    }

/* CSS specific to iOS devices only - weiner bar fix ... old:   
@supports (-webkit-overflow-scrolling: touch) */
@supports (-webkit-touch-callout: none) {

  .stickymonavbar a { padding-bottom: 10px; }
  .stickymonavbar a:first-child {border-top-left-radius: 1.5em; padding-left: 1em;}
  .stickymonavbar a:last-child {border-top-right-radius: 1.5em; padding-right: 1em;}
  .stickymonavbar { width: 100%; 
  /* bottom: calc(1rem + env(safe-area-inset-bottom)); */ }
  

  
}
  }
  
  /* make background fill screen on smaller squares */
  @media (max-height: 460px) and (max-width: 580px) {
    #backgroundvideo {
      width: 100vw;
     height: 100vh;
   }
  }
    /*
    @media (max-height: 460px) and (max-width: 580px) {
    .cb-slideshow li span {
      width: 100%;
      height: 100%;
      position: absolute;
      background-size: cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-position: top center;
      transition: height 5s ease;
      -webkit-transition: height 5s ease;
      -moz-transition: height 5s ease;
      -o-transition: height 5s ease;
    }
  }*/
  
  
  /* switch to 1 column at very small screen sizes */
  @media (max-width: 270px) {
    .gallerycell {
      width: 100%;
    }
    #content img.inline50img {
      width: 90%;
    }
  }
 

  /* light or dark browser theme  https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme  */
  /* Dark mode */
  @media (prefers-color-scheme: dark) {
    
    .stickymonavbar a {
      background-color: black;
      color: #f2f2f2;
      background-color: rgba(51, 51, 51, 0.65);
    }
    .no-backdropfilter .stickymonavbar a {
      background-color: rgba(51, 51, 51, 1);
      color: #ffffff;
      border: 1px;
      border-color: #ffffff;
    }
  
    .no-backdropfilter #content, .no-js #content {
      background-color: #000000;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 1) 100%
      );
    }
  
    .backdropfilter #content {
      background-color: rgba(0, 0, 0, 0.7);
    }
  
    #content H1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    li,
    label,
    #sociallinks ul li a,
    .guesttxtlabels,
    .guesttxt {
      color: #ffffff;
    }
  
    .newsrow:nth-child(even),
    #pageslist li:nth-child(even) {
      background-color: rgba(100, 100, 100, 0.3);
    }
    .no-js .newsrow:nth-child(even),
  .no-js #pageslist li:nth-child(even) {
    background-color:#222222;
  }
  
    .newsdate p {
      color: #da6363;
      font-weight: bold;
    }
    .PictureTitle {
      color: #ffffff;
    }
    .pagelinksbck {
      color: #000000;
    }
  
    a.prevnext {
      color: #ffffff;
      background-color: #a20025;
     font-weight: 500;
      text-transform: uppercase;
     
      /* width: 20%; */
    }
  }
  /* Mobile Dark mode without backdrop filter support */
  @media (max-width: 480px) and (prefers-color-scheme: dark) {
    .no-backdropfilter #content {
      background-color: #444444;
      background: linear-gradient(
        180deg,
        rgba(5, 5, 5, 1) 0%,
        rgba(68, 68, 68, 1) 100%
      );
    }
  }
  
  /* Light mode */
  @media (prefers-color-scheme: light) {
    .stickymonavbar a {
      background-color: #ffffff !important;
      background-color: rgba(255, 255, 255, 0.85) !important;
      color: black !important;
    }
    .no-backdropfilter .stickymonavbar a {
      background-color: rgba(221, 221, 221, 1);
    }
  }
  
  @media (prefers-color-scheme: no-preference) {
    .backdropfilter .stickymonavbar a {
      background-color: #fff;
      background-color: rgba(255, 255, 255, 0.85);
      color: black;
    }
  
    .no-backdropfilter .stickymonavbar a {
      background-color: rgba(221, 221, 221, 1);
    }
  }
  
  /* less animation for reduced motion preference 
  @media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0ms !important;
 transition-duration: 0ms !important;
 }
    .cb-slideshow li span {
      transition: none;
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
    }
    .cb-slideshow {
      transition: none;
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
    }
    #backgroundvideo source {display: none;} 
  }
*/

 
  /* Apply safe area padding for iPhones with notch and bottom bar buttons */
body {
    padding-top: env(safe-area-inset-top, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
}



  @media (prefers-reduced-motion: no-preference;) {
    .gallerycell > img {
      animation: fadeInAnimation linear forward;
      animation-timeline: view();
      animation-range: 10% 20%;
    }
    
    @keyframes fadeInAnimation {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  
      entry 0%  {
      opacity: 0; transform: translateY(100%);
    }
    entry 100%  {
      opacity: 1; transform: translateY(0);
    }
  
    /* exit 0% {
      opacity: 1; transform: translateY(0);
    }
    exit 100% {
      opacity: 0; transform: translateY(-100%);
    }
      */
  }
  
  }