/* ##################################################
The very Base CSS Defintions
################################################## */
/*
SIMPLE RESET
 */
html, body                                  { height: initial; }
html                                        { font-size: 62.5%; height: 100%; scroll-behavior: smooth; }
textarea                                    { overflow: auto; }
img                                         { border: 0; max-width: 100%; height: auto; }
button, input, optgroup,
select, textarea, form, fieldset            { color: inherit; background-color: inherit; font: inherit; margin: 0; padding: 0; border-radius: 0; }
main, nav, section, article, header, pre,
blockquote, dl, figure, figcapture, address { display: block; padding: 0; margin: 0; font-style: normal; }

::placeholder                               { opacity: 1; }

/* Box sizing rules */
*,
*::before,
*::after                                    { box-sizing: border-box; }

/* Scroll margin allowance above anchor links */
:target                                     { scroll-margin-block-start: 10rem; }

/* Scroll margin allowance below focused elements  to ensure they are clearly in view */
:focus                                      { scroll-margin-block-end: 8vh; }

/* remove the text-underline from all a with a class*/
a                                           { text-decoration: none; color: var(--color-black); }
a:not([class]):hover                        { color: var(--color-1); text-decoration: underline; }

/*If you use visited Links use this also...*/
a:not([class]):active                       { color: var(--color-link-active); }
a:not([class])                              { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3.5px; }

/* Base :focus styles for fallback purposes */
:focus-visible                              { outline-color: var(--color-focus); outline-width: 1px; outline-style: solid; outline-offset: 3px; color: var(--color-focus); }

/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
  :focus                                    { outline-color: var(--color-focus); outline-width: 1px; outline-style: solid; outline-offset: 3px; color: var(--color-focus); }
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  *                                         { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;  }
}


/* ##################################################
Basic Styling
html font-size is set to 62.5% so that all the REM measurements throughout
are based on 10px sizing. So basically 1.5rem = 15px.
If you simply set the font-size in media query to ex. 60% it will reduce all the rem declarations.
################################################## */

body.rd-body {
  font-family: var(--primary-font);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  /* please define ALWAYS background and font-color*/
  color: var(--color-black);
  background-color: var(--color-white);
  height: 100%; /* this trick prevents the body to have margin collapse, if a child element has a margin*/
  margin: -1px 0 0 0;
  padding: 1px 0 0 0; /* */
  -webkit-overflow-scrolling: touch; /* smooth scrolling for ios devices*/
  line-height: 1.5; /* for "better" font smoothing display on all devices, ony if neede for fonts
    -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;*/
 }
.rd-base-container                         { min-height: 100vh; overflow-x: hidden; }
section.rd-module,
main.rd-site-content                       { width: 100%; max-width: 100%; position: relative; z-index: 2; }
.rd-site-content:before                    { content: ''; height: 105px; display: block; }



section.rd-module:last-child               { padding-bottom: var(--modul-margin-bottom); }
.rd-bg-color-2,
section.rd-module.rd-bg-color-2            { background-color: var(--color-bg-2); }
.rd-bg-color-3,
section.rd-module.rd-bg-color-3            { background-color: var(--color-bg-1); }

@media (max-width: 990px) {
  .rd-site-content:before                  { height: 105px; }
}
@media (max-width: 490px) {
  .rd-site-content:before                  { height: 90px; }
}

/*##################################################
Standard Modul Paddings
################################################## */
section.rd-module                          { background-color: var(--color-white); margin-top: 0px; padding-top: calc(var(--modul-margin-top) / 2); padding-bottom: calc(var(--modul-margin-bottom) / 2); }
section.frame-space-before-nospace         { padding-top: 0; }
section.frame-space-after-nospace          { padding-bottom: 0; }

section.frame-space-before-extra-small     { padding-top: calc(var(--modul-margin-top) / 4); }
section.frame-space-after-extra-small      { padding-bottom: calc(var(--modul-margin-bottom) / 4); }
section.frame-space-before-small           { padding-top: calc(var(--modul-margin-top) / 3); }
section.frame-space-after-small            { padding-bottom: calc(var(--modul-margin-bottom) / 3);}
section.frame-space-before-medium          { padding-top: calc(var(--modul-margin-top) / 2); }
section.frame-space-after-medium           { padding-bottom: calc(var(--modul-margin-bottom) / 2); }
section.frame-space-before-large           { padding-top:var(--modul-margin-top); }
section.frame-space-before-large           { padding-bottom:var(--modul-margin-bottom);  }
section.frame-space-before-extra-large     { padding-top: calc(var(--modul-margin-top) * 2);  }
section.frame-space-after-extra-large      { padding-bottom: calc(var(--modul-margin-bottom) * 2);  }




/*##################################################
Standard Container for spacing Content in the middle of screen
################################################## */
.rd-container                                   { max-width: var(--max-container-width); margin: 0 auto; width: calc(100% - var(--container-gap) - var(--container-gap)); }
.news .rd-module-blog-overview .rd-container,
.news .rd-module-events-overview .rd-container  { max-width: var(--medium-container-width); padding-top: 4px; }
@media (max-width:375px) {
  .rd-container                           { --container-gap: 1rem; }
}
/* ##################################################
Typography
################################################## */
.rd-text-box                              { font-size: var(--font-size-medium); }
.rd-text-box>*:last-child                 { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6                    {
  font-size: var(--font-size-h);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--header-margin-bottom) 0;
  /* word Wraps */
  word-wrap: normal;
  hyphens: auto;
  max-width: 100%;/* IE Weirdness*/
}

h1                                         { font-size: var(--font-size-h2); line-height: 1.3; }
h2                                         { font-size: var(--font-size-h2_1); line-height: 1.4; }
h3                                         { font-size: var(--font-size-h4); }
h4                                         { font-size: var(--font-size-h5); }
h5                                         { font-size: var(--font-size-h6); }
h6                                         { font-size: var(--font-size-h6); }
@media (min-width:790px) {
  h1,
  .like_h1                                 { font-size: var(--font-size-h1); line-height: 1.2; }
  h2,
  .like_h2                                 { font-size: var(--font-size-h2); line-height: 1.2; }
  h3, .like_h3                             { font-size: var(--font-size-h3); line-height: 1.2; }
  h4                                       { font-size: var(--font-size-h4); }
  h5                                       { font-size: var(--font-size-h5); }
  h6                                       { font-size: var(--font-size-h6); }
}
p                                          { margin: 0 0 var(--paragraph-margin-bottom) 0; word-wrap: normal; hyphens: auto; max-width: 100%; }
.small                                     { font-size: var(--font-size-small); }
table                                      { margin: 3rem 0; padding: 0; border-collapse: separate; border-spacing: 1rem; border: 0; }
td,
th                                         { padding: 0 0 1rem 0; border-style: solid; border-width: 0 0 1px 0; text-align: left; vertical-align: top; margin: 0 1rem 1rem 0; }
hr                                         { height: 1px; border: 0; background-color: currentColor; margin: 2rem 0; }
b, strong                                  { font-weight: var(--font-weight-bold); }

/*##################################################
 Lists
################################################## */
ul, ol                                    { padding-left: 2.5rem; margin: 0 0 3rem 0; }
ul ul, ul ol, ol ol, ol ul                { margin: 1.5rem 0 1.5rem 3rem; }
li                                        { margin-bottom: 0.5rem; position: relative; }
main .rd-text-box ul,
main .rd-text-box ol,
main .rd-accordion-wrapper ul,
main .rd-accordion-wrapper ol,
main .rd-container td ul,
main .rd-container td ol                  { padding:0; margin:0 0 2rem 0; list-style: none; }
main .rd-text-box li,
main .rd-accordion-wrapper li,
main .rd-container td li                  { font-size: var(--font-size-medium); list-style: none; padding-left:30px; margin-bottom:1rem; }

main .rd-text-box li:before,
main .rd-accordion-wrapper li:before,
main .rd-container td  li:before          {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background-color:var(--color-1);
  position:absolute;
  left:0;
  top: 6px;
}
main .rd-text-box .rd-benefit-list li:before,
main .rd-accordion-wrapper .rd-benefit-list li:before,
main .rd-container td .rd-benefit-list li:before    { height: 20px; width: 20px; top: 2px; }
main .rd-text-box .rd-benefit-list li:after,
main .rd-accordion-wrapper .rd-benefit-list li:after,
main .rd-container td .rd-benefit-list li:after   {
  content: '';
  position: absolute;
  top: 5px;
  left: 7px;
  width: 6px;
  height: 12px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(45deg);
}
main .rd-text-box ol,
main .rd-accordion-wrapper ol,
main .rd-container td ol                    { counter-reset: my-counter; }
main .rd-text-box ol li,
main .rd-accordion-wrapper ol li,
main .rd-container td ol li                 { counter-increment: my-counter; }
main .rd-text-box ol li::before,
main .rd-accordion-wrapper ol li::before,
main .rd-container td ol li:before  {
  content: counter(my-counter);
  text-align: center;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  width:20px;
  height:20px;
  top:2px;
  line-height:1.4;
}

/*##################################################
Images and image box
################################################## */
figure                                     { display: block; position: relative; width: 100%; }
figure img                                 { display: block; }
figcaption                                 { margin:0.5rem 0; font-size: var(--font-size-small);}
picture                                    { width: 100%; height: 100%; }
img                                        { max-width: 100%; height: auto; }
main a:not([class]),
a.rd-text-link-download                    { position: relative; color: var(--color-1); text-decoration: underline; }
a.rd-text-link-download:hover              { color: var(--color-1); }


main .rd-text-box  a:not([class]):before,
main td  a:not([class]):before,
main .rd-accordion-wrapper a:not([class]):before {
  content: '';
  background: url(../images/icon-arrow-up-right.svg) 0 2px no-repeat;
  background-size: contain;
  display: inline-block;
  width: 20px;
  height: 15px;
  filter:var(--svg-color-1);
}
main .rd-text-box a[href^="#" i]:before,
main .rd-text-box a[href^="https://p673159.webspaceconfig.de/" i]:before,
main .rd-text-box a[href^="https://mediencampus.h-da.de" i]:before,
main .rd-text-box a[href^="https://hda-media.codersunlimited.com" i]:before,
main .rd-text-box a[href^="https://mediencampus.h-da.de/" i]:before,
main .rd-text-box a[href^="https://hda-media.codersunlimited.com/" i]:before,
main .rd-text-box a[href^="tel:" i]:before,
main .rd-text-box a[href^="mailto:" i]:before,
main .rd-text-box a[href^="/" i]:before,
main td a[href^="#" i]:before,
main td a[href^="https://p673159.webspaceconfig.de/" i]:before,
main td a[href^="https://mediencampus.h-da.de" i]:before,
main td a[href^="https://hda-media.codersunlimited.com" i]:before,
main td a[href^="https://mediencampus.h-da.de/" i]:before,
main td a[href^="https://hda-media.codersunlimited.com/" i]:before,
main td a[href^="tel:" i]:before,
main td a[href^="mailto:" i]:before,
main .rd-accordion-wrapper a[href^="#" i]:before,
main .rd-accordion-wrapper a[href^="https://p673159.webspaceconfig.de/" i]:before,
main .rd-accordion-wrapper a[href^="https://mediencampus.h-da.de" i]:before,
main .rd-accordion-wrapper a[href^="https://hda-media.codersunlimited.com" i]:before,
main .rd-accordion-wrapper a[href^="https://mediencampus.h-da.de/" i]:before,
main .rd-accordion-wrapper a[href^="https://hda-media.codersunlimited.com/" i]:before,
main .rd-accordion-wrapper a[href^="tel:" i]:before,
main .rd-accordion-wrapper a[href^="mailto:" i]:before,
main .rd-accordion-wrapper a[href^="/" i]:before  {
   background: url(../images/icon-arrow-right.svg) 0 2px no-repeat;
  background-size: contain;
  display: inline-block;
  width: 20px;
  height: 15px;
}



main a[href^="/fileadmin/user_upload/"i]:before,
main a.rd-text-link-download:before,
main td a[href^="/fileadmin/user_upload/"i]:before,
main .rd-accordion-wrapper a[href^="/fileadmin/user_upload/"i]:before {
  content: '';
  background: url(../images/icon-download.svg) 0 2px no-repeat!important;
  background-size: 19px 19px!important;
  display: inline-block;
  width: 20px;
  height: 20px!important;
  filter: var(--svg-color-1);
  margin-bottom: -3px;
}
main a:focus-visible                          { outline-color: var(--color-focus) }
main .rd-text-box a:hover                     { color:var(--color-2); }

/* event / News / Project Single apge */
.rd-category-select                           { width:100%; color: var(--color-2); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); margin-bottom: 10px;}


/* breadcrumb*/
.rd-breadcrumb ol {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 3rem auto 1rem auto;
  padding: 0;
  width: calc(100% - var(--container-gap) - var(--container-gap));
  max-width: var(--max-container-width);
  font-size: var(--font-size-small);
 }
.rd-breadcrumb ol li                       { padding: 0; list-style-type: none; margin:0; }
.rd-breadcrumb ol li a                     { text-decoration: none; color: var(--color-link); display: flex; }
.rd-breadcrumb ol li.rd-breadcrumb-home a  { display: block; width: 15px; height: 100%; background: url(../images/icon-home.svg) 0 center no-repeat; background-size: 15px auto; }

.rd-breadcrumb ol li.rd-breadcrumb-home a:hover { color: var(--color-link); }

.rd-breadcrumb ol li a:before,
.rd-breadcrumb ol li a:after               { display: none; }
.rd-breadcrumb ol li a span                { position: relative; display: flex; }
.rd-breadcrumb ol li a span:before         {
  content: '';
  width: 5px;
  height: 5px;
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: var(--color-black);
  margin: auto .6rem auto -3px;
  transform: rotate(45deg);
}
.rd-breadcrumb ol li [aria-current="page"],
.rd-breadcrumb ol li [aria-current="page"]:hover { font-weight: var(--font-weight-bold); text-decoration: none; color: var(--color-link); }
/*
@media (max-width:560px) {
.rd-breadcrumb ol li {    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }.rd-breadcrumb ol li.rd-breadcrumb-home,
.rd-breadcrumb ol li.rd-breadcrumb-home + li,
.rd-breadcrumb ol li.rd-breadcrumb-home + li + li,
.rd-breadcrumb ol li:last-child { clip: auto !important; clip-path: none; display: block; height: auto; line-height: normal; width: auto; overflow: inherit; position: relative; }.rd-breadcrumb ol li.rd-breadcrumb-home + li + li { margin-right:11px; }.rd-breadcrumb ol li.rd-breadcrumb-home + li + li:after { position: absolute; right: -16px; top:6px; content: ''; width: 5px; height: 5px; border-width: 1px 1px 0 0; border-style: solid; border-color: var(--color-black); margin: auto .6rem auto -3px; transform: rotate(45deg); }.rd-breadcrumb ol li:last-child {  display:flex; }.rd-breadcrumb ol li:last-child:before {  content:'…'; margin:0 10px 0 0; } }@media (max-width:380px) { .rd-breadcrumb ol {  width: calc(100% - var(--container-gap)); } }
*/

@media (max-width:380px) {
  .rd-breadcrumb ol                       { margin:1rem auto 1rem auto;  width: calc(100% - var(--container-gap)); }
}

/* pagination */
.rd-pagination-content                    { display: flex; font-size: var(--font-size-medium); }
.rd-pagination                            { display: flex; margin: 3rem auto 0 auto; }
.rd-pagination ul                         { margin: 0; padding: 0; display: flex; }
.rd-pagination ul li                      { margin: 0 0.5rem 0.5rem 0.5rem; padding: 0; list-style-type: none; display: flex; }
.rd-pagination ul li a                    { display: flex; text-decoration: none!important; font-weight: var(--font-weight-bold); margin: auto; color: var(--color-black); }
.rd-pagination ul li a span               { padding: 0.5rem 0.5rem 0.2rem 0.5rem; border-bottom: 2px solid transparent; }
.rd-pagination ul li a:hover span         { color: var(--color-1); border-color: var(--color-1); }
.rd-pagination ul li a[aria-current="page"] span { color: var(--color-black); border-color: var(--color-1); }
.rd-pagination .rd-button-prev,
.rd-pagination .rd-button-next            { width: 35px; height: 32px; border: 0; position: relative; padding: 0; margin: 0; background-color: transparent !important; }

.rd-pagination .rd-button-prev:before,
.rd-pagination .rd-button-next:before {
  content: '';
  width: 15px;
  height: 15px;
  border-width: 3px 3px 0 0;
  padding: 0;
  transform: rotate(-135deg);
  position: absolute;
  left: calc(50% - 7px);
  top: calc(50% - 7px);
  border-color: var(--color-1);
  border-style: solid;
}
.rd-pagination .rd-button-next:before      { transform: rotate(45deg); }

.rd-pagination .rd-button-next:hover:before,
.rd-pagination .rd-button-next:hover:after { border-color: var(--color-black); }


/* Generic Card Design */
.rd-card-overview                          { display: flex; margin-left: calc(var(--grid-gap) * -1); flex-wrap: wrap; --grid-gap: 1rem; }
.rd-card                                   { position: relative; overflow: hidden; width: calc(33.333331% - var(--grid-gap)); margin: 0 0 3rem var(--grid-gap); }
.rd-large-teaser .rd-card                  { width: calc(100% - var(--grid-gap)); display: flex; flex-wrap: wrap; }
.rd-large-teaser .rd-card .rd-image        { width: calc(100% - 360px); aspect-ratio: 16 / 9; }
.rd-large-teaser .rd-image img             { object-fit: cover; object-position: 0 50%; width: 100%; height: 100%; }
.rd-large-teaser .rd-card .rd-text-box     { width: 360px; position: relative; display: flex; flex-direction: column; }
.rd-card .rd-text-wrapper                  { color: var(--color-white); padding: 3rem 3rem 3rem 2rem; }


.rd-card:before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 70px);
  background-color: var(--color-1);
}
main .rd-text-box .rd-preview-text  li:before                { background-color:var(--color-white); }
main .rd-text-box .rd-preview-text .rd-benefit-list li:after { background-color:var(--color-1);  }
main .rd-text-box .rd-preview-text ol li::before             { color: var(--color-1); }
main .rd-text-box .rd-preview-text .rd-benefit-list li:after { border-right: 2px solid var(--color-1); border-bottom: 2px solid var(--color-1); background-color: transparent; }

.rd-card:after {
  content: '';
  z-index: -1;
  position: absolute;
  bottom: 0.5px;
  right: 0;
  width: 660px;
  height: 70px;
  background-color: var(--color-1);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

.rd-card:nth-of-type(3n+2):before,
.rd-card:nth-of-type(3n+2):after           { background-color:var(--color-3); }

.rd-card:hover:before,
.rd-card:hover:after                       { background-color:var(--color-2)!important; }


.rd-card .rd-image                         { aspect-ratio: 4 / 3; overflow: hidden; }
.rd-card .rd-image img                     { object-fit: cover; object-position: 50% 50%; height: 100%; width: 100%; }
.rd-card .rd-text-box a                    { color: var(--color-white); position: static; width: fit-content; display: inline-block; font-size: var(--font-size-body); }
.rd-card .rd-text-box a:hover              { color:var(--white); }
main .rd-card .rd-text-box a:focus-visible { outline-color: var(--color-white); outline-offset: 5px; }
main .rd-card .rd-text-box a:before        { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display:block; background:none;  }
main .rd-card .rd-text-box a span          { position: relative; display: flex; }
.rd-card .rd-text-box a span:before        {
  content: '';
  background: url(../images/icon-arrow-right.svg) 0 2px no-repeat;
  background-size: contain;
  width: 20px;
  height: 15px;
  filter: var(--svg-color-white);
  display: block;
  margin-top: 3px;
}
.rd-card .rd-info-box                      { font-size: var(--font-size-small); display: flex; font-weight: var(--font-weight-bold); margin-bottom: 1rem; flex-wrap: wrap;}
.rd-card .rd-card-title                    { font-size: var(--font-size-h4); }
.rd-large-teaser .rd-card-title            { font-size: var(--font-size-h3); }
.rd-card .rd-info-box .rd-category-date    { position: relative; margin-right: 1rem;}
.rd-card .rd-info-box  .rd-category-name +  .rd-category-date       { margin-left: 3rem; }
.rd-card .rd-info-box  .rd-category-name + .rd-category-date:before {
  content: '';
  width: 2px;
  height: 1.6rem;
  top: 3px;
  background-color: var(--color-white);
  position: absolute;
  left: -1.6rem;
}




@media (max-width:960px) {
  .rd-card                                {   width: calc(50% - var(--grid-gap)); }
  .rd-card:nth-of-type(3n+2):before,
  .rd-card:nth-of-type(3n+2):after       { background-color:var(--color-1); }
  .rd-card:nth-of-type(2n+2):before,
  .rd-card:nth-of-type(2n+2):after       { background-color:var(--color-3); }

}

@media (max-width:768px) {
  .rd-large-teaser .rd-card .rd-image,
  .rd-large-teaser .rd-card .rd-text-box { width: 50%; aspect-ratio: inherit; }
}
@media (max-width:560px) {
  .rd-large-teaser .rd-card .rd-image,
  .rd-large-teaser .rd-card .rd-text-box { width: 100%; }
  .rd-card                               { width: calc(100% - var(--grid-gap)); }
}

/* Filter Boxes*/
.rd-filter-box                           { display:flex; flex-wrap: wrap; margin-bottom:3rem; }
.rd-filter-item { margin-right:2rem; }
.rd-filter-box .rd-filter-button         {
  background-color:var(--color-bg-2);
  border-color:var(--color-bg-2);
  padding-right:4rem;
  position: relative;
  margin: 0;
  min-width:200px;
  font-weight:var(--font-weight-bold);
}
.rd-filter-box .rd-filter-button:after   {
  content: '';
    position: absolute;
    right: 10px;
    width: 12px;
    height: 12px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: var(--color-1);
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    top: calc(50% - 6px);
}
.rd-filter-box .rd-filter-button:focus-visible               { background-color:var(--color-bg-2); }
.rd-filter-box .rd-filter-button:hover:after                 { filter:var(--svg-color-white); }
.rd-filter-box .rd-filter-button[aria-expanded="true"]:after { transform:rotate(135deg); top:calc(50% - 8px)}
.rd-counter                                                  { margin-left:0.5rem; }
.rd-categroy-field {
  position: absolute;
  width:auto;
  border: 1px solid var(--color-bg-2);
  z-index: 12;
  background-color: var(--color-white);
  margin: 0;
  min-width: 200px;
  padding: 1rem;
  display:none;
}
.rd-filter-button[aria-expanded="true"] + .rd-categroy-field { display:block; }
.rd-checkbox-list                                            { padding:0; margin:0; }
.rd-checkbox-list li                                         { padding:0.5rem 0; display:flex; margin:0; border-bottom: 1px solid var(--color-bg-2);}
main .rd-checkbox-list li:last-of-type                       { margin:0; border-bottom: 0; }
.rd-categroy-field label                                     { margin-right:1rem;  }
.rd-categroy-field input {
  margin: auto 0 auto auto;
  appearance: none;
  background-color: #fff;
  font: inherit;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--color-1);
}
.rd-categroy-field input:checked           { background-color:var(--color-1); }
.rd-action                                 { display:flex; }
.rd-action button                          { margin-right:1rem; }
.rd-action.rd-filter-item,
.rd-action button[type="reset"]            { margin-right:0;}


@media (max-width:960px) {
  .rd-filter-box .rd-filter-button         { width: fit-content; min-width:inherit;}
}

@media (max-width:768px) {
  .rd-filter-box .rd-filter-button         { width: fit-content; min-width:inherit;  }
  .rd-filter-box .rd-filter-item           { margin-bottom:2rem; }
}

@media (max-width:560px) {
  .rd-filter-box .rd-filter-item           { margin-bottom:2rem; width:100%; margin-right:0; }
  .rd-filter-box .rd-filter-button         { width:100%; }
  .rd-categroy-field                       { position: relative; width:100%; }
}


/*##################################################
Skip-link / Visually Hidden Elements for Screenreaders
################################################## */
.jumpoint { position: absolute; top:-200px; }

.rd-skip-link,
.visuallyhidden {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
/* if the container with the class is in focus it is visible, otherwise its hidden */
.rd-skip-link:focus {
  position: absolute;
  clip: auto !important;
  clip-path: none;
  display: block;
  height: auto;
  line-height: normal;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
  padding: 1rem;
  background-color: var(--color-1);
  color: var(--color-white);
}