@font-face {
    font-family: 'Roboto-Light';
    src:url('Roboto-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RobotoSlab';
    src:url('RobotoSlab-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Overpass-Bold';
    src:url('Overpass-ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Overpass-Light';
    src:url('Overpass-ExtraLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


:root {
  --mystyle-background: #eee;
  --mystyle-background-alt: #ddd;		/* base background */
/*  --mystyle-background-alt: rgb(126,201,169);*/	/* alternate background */
  --mystyle-contrast-background: rgb(75,109,134);	/* constrasting background */

  --mystyle-text-color: var(--mystyle-contrast-background);	/* text color on background */
  --mystyle-contrast-text-color: var(--mystyle-background);	/* text color on contrasting background */

  --mystyle-accent-color: rgb(101,143,163);		/* accent color */

  --mystyle-highlight: rgb(238,233,247);	/* menu highlight color */
  --mystyle-card: rgb(208, 185, 144);
  --mystyle-card-header: #fff;

  --mystyle-logo: rgba(0,0,0,0); /*url("logoHRR.png");*/

  --mystyle-heading-font: 'RobotoSlab',"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mystyle-heading-text-transform: none;
  --mystyle-heading-font-weight: normal;
  --mystyle-heading-line-height: 100%;

  --mystyle-menu-height-small: 48px;
  --mystyle-menu-height-large: 64px;
  --mystyle-menu-height-submenu: 32px;

  --mystyle-font-text: 'Overpass-Light',"Helvetica Neue",Helvetica,Arial,sans-serif;

  --mystyle-center-width-large: 100%; /* 1299px */
  --mystyle-center-width-mid: 100%; /* 874px */

  --mystyle-symetric-background: unset; /*url('wood.jpg');*/
}

html {
  font-family: var(--mystyle-font-text);
  padding:0px;
  margin:0px;
}

body {
  padding:0px;
  margin:0px;
}

.logo {
/*  display: inline-block;*/
  display: none;
  width: 300px;
  height: 100%;
  padding-top: 33px;
  margin: 8px;
  background: var(--mystyle-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.banner:has(img) {
  display: block !important;
  position: relative;
  container-type:inline-size;
}
.banner > img {
  height: unset !important;
  position: relative !important;
  display: block;
}
.banner:has(img) > .content {
  position: absolute !important;
  width:100%;
  height:100%;
  top: 0;
  left: 0;
}
.banner:has(img) .block {
  background: none !important;
}

.banner:has(img) .block:has(.frame-type-header) {
  position: relative;
  top:50%;
  transform:translateY(-50%);
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

.text-light .frame-type-header h2,
.text-light .frame-type-header h3 {
  color: #fff;
  text-shadow: 0px 0px 13px rgba(0,0,0,1);
}

.text-dark .frame-type-header h2,
.text-dark .frame-type-header h3 {
  color: #000;
  text-shadow: 0px 0px 13px rgba(255,255,255,1);
}

.banner .frame-type-header h2 {
  font-size: 3.6cqw;
  margin-bottom: 0.5cqw;
}
.banner .frame-type-header h3 {
  font-size: 2.5cqw;
  margin-bottom: 0.5cqw;
}
 
.ce-above .ce-row {
  display: flex;
  justify-content: center;
}

.ce-above .ce-row .ce-column {
  margin: 0px;
  flex: 1 1 auto;
}

.ce-gallery img {
  max-width: 100%;
  height: auto;
}

.c-siema > div {
  container-type: inline-size;
}

.c-siema img {
  max-height: 75cqw;
  width: auto;
  margin-left:auto;
  margin-right:auto;
}

.ce-bodytext *:last-child {
  margin-bottom: 0;
}

.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery {
  margin-bottom: 0;
}

:not(.frame-card) > .ce-above .ce-bodytext > h1,
:not(.frame-card) > .ce-above .ce-bodytext > h2 {
  float: left;
  width: 33%;
  margin-left: 1em;
  margin-right: 1em;
  margin-bottom: 0em;
  text-align: center;
}
 
.c-columns .block {
  padding: 0em;
  background: inherit;
}

.c-columns {
  overflow: hidden; 
}

.ce-intext.ce-left .ce-gallery, .ce-intext.ce-right .ce-gallery {
  width: 40%;
  min-width: 40%;
}

.frame-card .ce-center.ce-above .ce-gallery {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  border-radius: 100%;
  overflow: hidden;
}

.frame-space-after-small, .frame-space-after-extra-small {
  margin-bottom: -3em !important;
}

.frame-space-before-small, .frame-space-before-extra-small {
  margin-top: -3em !important;
}

.frame-type-container .col .block { 
  position: relative;
}

.frame-type-container { 
  position: relative;
}

.frame-type-container .col:has(.frame-card):before {
  content:'';
  background: var(--mystyle-card);
  border-radius: 15px;
  position:absolute;
  top: 0;
  bottom: 0;
  width: inherit;
}

.c-containerColumns-1-1-1 .col:before {
  width:30%;
}

.c-containerColumns-1-1 .col:before {
  width:47.5%;
}

@media screen and (max-width:840px) {
  .frame-type-container .col:before {
    display:none;
  }
}

.ce-intext.ce-left .ce-gallery {
  margin-right: 3em;
}
.ce-intext.ce-right .ce-gallery {
  margin-left: 3em;
}

.c-siema .siema-navigation {
  height: 30% !important;
  bottom: 35% !important;

  opacity: 0 !important;
  transition: opacity 0.3s;
}

.c-siema:hover .siema-navigation {
  opacity: 1 !important;
}

button.siema-navigation {
  background: rgba(255,255,255,0.5)  !important;
/*  border: none; */  
  border-radius: 5px;
}

.siema-navigation::after {
  border-color:rgba(255,255,255,0) var(--mystyle-accent-color) var(--mystyle-accent-color) rgba(255,255,255,0) !important;
  border-width:0px 5px 5px 0px !important;
}

a {
  color: inherit;
}

.block li::before {
  content: "•";
  color: var(--mystyle-accent-color);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.block li {
  list-style: none;
  margin-bottom: .4em;
  margin-top: .4em;
}

.menu label, #hamburger {
  display: none;
  font-size: 2em;
  font-style: normal;
  color: #fff;
  padding: 0px;
  padding-left: 1em;
  line-height: var(--mystyle-menu-height-small);
}

.menu input[type=checkbox] {
  display: none;
}

.menu ul {
  list-style: none;
  padding:0px;
  margin:0px;
  font-weight: bold;
}

.menu > ul {
  line-height: var(--mystyle-menu-height-small);
  margin-left: 24px;
  text-align: center;
}

.menu li {
  position: relative;
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
}

.menu li a {
  padding-top: 10px;
  padding-bottom: 10px;
}

.menu li ul li {
  display:block;
  width: 15em;
}

.menu li.active {
  color: var(--mystyle-accent-color);
}

.menu li:hover {
  background: var(--mystyle-highlight);
  color: var(--mystyle-accent-color);
}

.menu > ul ul {
  float:left;
  position: absolute;
  left: 0px;
  top: var(--mystyle-menu-height-small);
  display:none;
  z-index: 11;
  line-height: var(--mystyle-menu-height-submenu);
  text-align: left;
  background-color: var(--mystyle-background-alt);
  color: var(--mystyle-text-color);
  border: 1px solid black;
  box-shadow: 2px 2px 5px rgba(0,0,0,.3);
}

.menu li:hover ul {
  display: block;
}

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

#sticky-bar, #sticky-bar * {
  transition: all 300ms;
}

.sticky {
  position: fixed;
  display: block;
  top: 0; 
  z-index:10;
  box-shadow: 0px 0px 30px rgba(0,0,0,.5);
}

.sticky + .block {
  padding-top: calc(3em + var(--mystyle-menu-height-small)) !important;
}

div:target ::before {
  height: calc(3em + var(--mystyle-menu-height-small));
  margin-top: calc(-3em - var(--mystyle-menu-height-small));
  display: block;
  content: "";
}

.form-group .input > input, .form-group .input > textarea {
  width: 600px;
  margin-bottom: 2em;
}

.form-group .input > textarea {
  min-height: 10em;
}

@media only screen and (max-width: 768px) {
  .form-group .input > input, .form-group .input > textarea {
    width: 100%;
  }
}


.btn-group > button {
  background: var(--mystyle-contrast-background);
  color: var(--mysryle-contrast-text-color);
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  border: none;
}

.btn-group > button:hover {
  background: var(--mystyle-accent-color);
}
 
.button {
/*  line-height: 48px;*/
  display: inline-block;
  background: var(--mystyle-contrast-background);
  color: var(--mystyle-contrast-text-color);
/*  padding-left: 2em;*/
/*  padding-right: 2em;*/
}

.button * {
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  display: inline-block;
}

.button:hover {
  background: var(--mystyle-accent-color);
}

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

.tag {
  padding: 4px 10px 2px 10px;
  background: var(--mystyle-contrast-background);
  color: var(--mystyle-contrast-text-color);
  border-radius: 10px;
}

.block {
  display: block;
  background: var(--mystyle-background);
  color: var(--text-color);

  padding: 3em;
  margin: 0;
}

.block:has(.frame-padding-none) {
  padding: 0em;
}

.block.header {
  padding: 0;
}

.block.header h1,
.block.header h2 {
  text-align: center;
  margin: 0;
  padding-top: 1em;
}

.frame-card {
  background: var(--mystyle-card);
  border-radius: 15px; 
  overflow: hidden;
  padding: 2em;
  font-size: 14px;
}

.ce-textpic.ce-intext .ce-row {
  width: fit-content;
  margin: auto;
}

.taupebg {
 /* background: var(--mystyle-background-alt); */
  position:relative;
}

.greenbg {
  background: var(--mystyle-contrast-background);
  color: var(--mystyle-contrast-text-color);
}
/*
.offsetbg {
  margin-top: 6em;
  margin-bottom: -6em;
}

.offsetbg > div {
  position: relative;
  top: -6em;
}
*/

.block > .frame {
  position: relative;
}

.taupebg::before {
  background: var(--mystyle-background-alt);
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.taupebg.offsetbg::before {
  top: 6em;
}

h1, h2 {
  margin-top: 0em;
  margin-bottom: 1em;
  color: var(--mystyle-accent-color);
  font-size: 32pt;

  font-family: var(--mystyle-heading-font);
  font-weight: var(--mystyle-heading-font-weight);
  line-height: var(--mystyle-heading-line-height);
  text-transform: var(--mystyle-heading-text-transform);
}

h3 {
  margin-top: 0em;
  margin-bottom: 0em;
  font-size: 22px;
  font-weight: bold;
}

.frame-card h1, 
.frame-card h2 {
  font-size: 26pt;
  color: var(--mystyle-card-header);
}

figure.table {
  margin: 0px;
}

.contenttable {
  width: 100%;
}

.contenttable td {
  vertical-align: top;
}

@media only screen and (max-width:700px) {
  .contenttable table, .contenttable tbody, .contenttable tr, .contenttable td, .contenttable th {
    display: block;
  }
}

body:has(.center)::before{
  content:'';
  display:block;
  position:fixed;
  width:50%;
  height:100%;
  z-index:-2;
  top:0px;
  overflow:hidden;
  background:var(--mystyle-symetric-background);
  background-size:cover;
}

body:has(.center)::after{
  content:'';
  display:block;
  position:fixed;
  width:50%;
  height:100%;
  z-index:-2;
  top:0px;
  right:0px;
  overflow:hidden;
  background:var(--mystyle-symetric-background);
  background-size:cover;
  background-position:right;
}

.bg {
  width: 50%;
  height: 100%;
  z-index: -2;
  position: fixed;
  top: 0px;
  display: block;
  overflow: hidden;
}

.spacer {
  width: 100%;
  height: 3em;
  display: block;
  overflow: hidden;
  position: relative;
}

.spacer > img {
  position: relative;
  z-index: -4;
}

.left {
  left: 0px;
}

.right {
  right: 0px;
  text-align: right;
}

.right > img {
  position: absolute;
  right: 0;
}

.stretch {
  height:100%;
  width:auto;
}

.center, .sticky {
  width: var(--mystyle-center-width-mid);
}

/*
 .sticky {
  width: 100%;
}
*/

body > .block > .frame,
.center > .block > .frame {
  width: calc(900px - 6em);
  margin-left:auto;
  margin-right:auto;
}

.center {
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  background: var(--mystyle-background);
  z-index: 0;

  box-shadow: 0px 0px 15px rgba(0,0,0,.7);
}

.footer {
  text-align: right;
}

.footer span {
  display: block;
}


@media only screen and (min-width:1330px) {
  /* Large enough for fixed-size 3 column layout */
  .center, .sticky {
    width: var(--mystyle-center-width-large);
  }
  
  body > .block > .frame,
  .center > .block > .frame {
    width: calc(1300px - 6em);
  }

  .menu > ul { 
    line-height:var(--mystyle-menu-height-large);
    font-size:larger;
  }

  .logo {
    padding-top: 42px;
  }

  .sticky + .block {
    padding-top: calc(3em + var(--mystyle-menu-height-large)) !important;
  }

  div:target ::before {
    height: calc(3em + var(--mystyle-menu-height-large));
    margin-top: calc(-3em - var(--mystyle-menu-height-large));
  }

  .menu > ul ul {
    top: var(--mystyle-menu-height-large);
  }

  .ce-intext {
    margin-left: 3em;
    margin-right: 3em;
  }

  :not(.frame-card) > .ce-above .ce-bodytext > h1,
  :not(.frame-card) > .ce-above .ce-bodytext > h2 {
    width: 25%;
    margin-left: 2em;
    margin-right: 2em;
  }

  .footer {
    text-align: center;
  }

  .footer span {
    display: inline-block;
    padding: 0 1em 0 1em;
  }

  .footer span:not(span:last-of-type) {
    border-right: 1px solid var(--mystyle-contrast-text-color);
  }
}

@media only screen and (max-width:900px) {
  /* Variable width 2-column layout */
  .center, .sticky {
    width:100%;
  }

  body > .block > .frame,
  .center > .block > .frame {
    width: 100%;
  }

  .bg {
    display:none;
  }

  h1, .frame-card h1, 
  h2, .frame-card h2 {
    font-size: 24pt;
  }

  .ce-intext.ce-left .ce-gallery, .ce-intext.ce-right .ce-gallery {
    width: 100%;
    float: none;
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: 1em;
  }

  .ce-above .ce-bodytext > h1,
  .ce-above .ce-bodytext > h2 {
    float: none;
    width: 100%;
    margin-left: 0em;
    margin-right: 0em;
    margin-bottom: inherit;
    text-align: left;
  }
 

}

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

  .sticky + .block {
    padding-top: calc(3em + var(--mystyle-menu-height-small)) !important;
  }

  div:target ::before {
    height: calc(3em + var(--mystyle-menu-height-small));
    margin-top: calc(-3em - var(--mystyle-menu-height-small));
  }

  .menu label {
    display: inline-block;
  }

  /* Break down menu items into vertical list */
  .menu ul li {
    display: block;
  }

  .menu ul::before {
    content: "";
    background: var(--mystyle-logo);
    background-size: contain;
    background-repeat: no-repeat no-repeat;
    background-position: right;
    display: block;
    position: absolute; 
    right: 8px;
    top: 8px;
    height: var(--mystyle-menu-height-small);
    width: 200px;
  }

  .sticky {
/*    padding: 16px 0 0 0;*/
  }

  .menu .logo {
    display: none;
  }

  .menu > ul {
    text-align: left;
  }

  .menu > ul ul {
    display: block;
    position: relative;
    float: none;
    box-shadow: none;
    top: auto;
    left: auto;
  }

  .menu li ul li {
    width: 100%;
  }

  /* toggle label */ 
  .menu > input:checked ~ #openMenu {
    display: none;
  }
  .menu > input:checked ~ #closeMenu {
    display: block;
  }
  .menu > input:not(:checked) ~ #openMenu {
    display: block;
  }
  .menu > input:not(:checked) ~ #closeMenu {
    display: none;
  }

  /* Toggle show/hide menu on checkbox click */
  .menu > ul {
    overflow: hidden;
    max-height: 0px;
    transition: 400ms;
  }

  .menu > input:checked ~ ul {
    max-height: 1000px;
  }
}
 

@media only screen and (max-width:570px) {
  .block {
    padding: 2em 1.5em 2em 1.5em;
  }

  .sticky + .block {
    padding-top: calc(2em + var(--mystyle-menu-height-small)) !important;
  }

  div:target ::before {
    height: calc(2em + var(--mystyle-menu-height-small));
    margin-top: calc(-2em - var(--mystyle-menu-height-small));
  }
}