/*
Schmuckfarbe: #
Fonts: Roboto, Fjalla One
*/

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance:none;font-family:'Roboto',arial,helvetica,clean,sans-serif; }
html, body, form, textarea, input, button, select, legend, h1, h2, h3, h4, h5, h6, p, ol, ul, table, td, th {color:#5E5E5E;margin:0;padding:0;}
body {background:#fff;text-align:center;font:18px/1.6 'Roboto',arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html { overflow-y:scroll; }
#parent { overflow:hidden;position:relative;width:100%;min-width:320px; }
tr:nth-child(even) { background-color: #cccccc; }
tr:nth-child(odd) { background-color: #ededed; }
th { background-color: #; color: #ffffff; }

.content-block { padding:30px 20px;text-align:left; }
.content-block-center { text-align:center; }
.content-block-grey { background:#DCDCDC;}
.inner { margin:0 auto;max-width:1000px; }
.inner-sm { margin:0 auto;max-width:780px; }

.rtl .content-block, .rtl .headsection, .rtl .box-content { text-align:right; }
.rtl .box-content p.more { left:30px;right:inherit; }
.rtl p.more { text-align:left; }
.rtl .footer-block-logo { text-align:right; }
.rtl .footer-block-meta { text-align:left; }


#logo { display:inline-block;padding:20px;text-align:left;vertical-align:top;width:50%; }
#logo a { display:block;line-height:0; }
#logo img { display:block; }
.navanchorwrap { display:inline-block;margin-top:10px;padding-right:20px;text-align:right;vertical-align:top;width:50%; }
#navanchor { display:block;float:right;height:30px;padding:10px 0;position:relative;width:30px; }
#navanchor span { background:#;height:2px;left:5px;position:absolute;text-indent:999em;top:15px;width:18px; }
#navanchor span:before, #navanchor span:after { background:#;content:'';height:2px;left:0;position:absolute;width:18px; }
#navanchor span:before { top:-4px; }
#navanchor span:after { top:4px; }
#navanchor span { font-size:0; }

#navwrap { display:none; }
#navwrap.active { display:block; }

#navwrap { font-size:.778em; }
#nav { list-style:none; }
#nav li { background:none;display:inline-block;padding:0; }
#nav a { color:#;display:block;font-family:'Fjalla One',sans-serif;padding:10px;text-decoration:none;text-transform:uppercase; }
#nav a:hover, #nav a:focus, #nav a.active { text-decoration:underline; }

#footer { background:#333;padding:10px 20px; }
.footer-block { display:inline-block;vertical-align:middle; }
.footer-block-logo { text-align:left;width:33.3%; }
.footer-block-meta { text-align:right;width:66.6%; }
address { font-size:.667em;font-style:normal; }

.headsection { background-position:center center;overflow:hidden;position:relative;text-align:left; }

.title { position:absolute;bottom:40px; }
.credits { background:#FFF;background:rgba(255,255,255,.8);bottom:0;color:#333;display:block;font-size:.6em;padding:5px;position:absolute;right:0; }
.box-inner .credits { top:0; bottom:auto; }

h1 { font-size:3.33em;line-height:1.4;max-width:560px; }
h1 span { background-color:#;color:#FFF;display:inline;font-family:'Fjalla One',sans-serif;padding:8px 20px;box-decoration-break:clone;-webkit-box-decoration-break:clone; }

h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-family:'Fjalla One',sans-serif; }

h6 { text-transform:uppercase; }
h2 { color:#333;font-size:2.222em;margin:.8em 0 .5em; }
h3 { color:#333;font-size:1.944em;margin:.7em 0 .5em; }
h4 { color:#;font-size:1.667em;margin:.7em 0 .5em; }
h5 { color:#;font-size:1.389em;margin:.6em 0 .5em; }
h6 { color:#;font-size:.889em;margin:.6em 0 .5em; }
p {}
p.small { font-size:0.7em; }

p.onelineonly { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
pre { white-space: pre-wrap; }
strong { font-weight:900; }
a { color:#; }
a:hover { font-weight:900; font-style:italic; }
pre { color:#000000; font-size: .8em; margin:.8em .3em .8em .3em; padding:.2em; background-color: #dddddd; font-family: courier, lucida console; }
blockquote { border-left: 10px solid #;margin:2em 10px;padding:15px 10px 5px 40px;position:relative; }
blockquote:before { color:#;content:'“';display:block;font-size:4em;line-height:1;position:absolute;left:8px;top:0; }
abbr, acronym { border-bottom: none; }
.notop > *:first-child {margin-top:0;}
.v { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */  clip: rect(1px, 1px, 1px, 1px); border:0 !important;height: 1px !important;margin: -1px !important;padding:0 !important;overflow: hidden;width: 1px !important;}
ol { margin:0;margin-left:2em; }
ul { list-style:none;margin:0;margin-left:12px; }
ul li { background:url(icon-list.png) left top 0.5em no-repeat;background-size:12px 10px;padding-left:16px; }
.rtl ul li { background:url(icon-list-rtl.png) right top 0.5em no-repeat;padding-left:0;padding-right:16px; }

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

.ad-wrapper { margin:0 auto;text-align:center;width:100%; }
.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%; }
video { max-width: 100%; height: auto; }
.article-wrapper { display:flex;flex-wrap:wrap;margin:0 -10px; }
article.box { display:inline-block;display:flex;margin:0 0 20px;vertical-align:top;width:50%; }
.box-inner { background:#FFF;margin:0 10px;padding-bottom:80px;position:relative;text-align:center; }
.box-content { padding:20px;text-align:left; }
.box-content p { font-size:.778em; }
.box-content p.more { position:absolute;bottom:20px;right:30px; }

p.content { font-size:.778em;}
p.more { margin:10px 0;text-align:right; }
p.more a { border:2px solid #;color:#;display:inline-block;font-family:'Fjalla One',sans-serif;padding:5px 25px;text-decoration:none;text-transform:uppercase;transition:.4s ease all; }
p.more a:hover, p.more a:focus { background:#;color:#FFF; }

.meta-link a { color:#FFF;display:inline-block;font-family:'Fjalla One',sans-serif;text-decoration:none; }

.maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
.maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
.svg-content { display: inline-block; position: absolute; top: 0; left: 0; }
.svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; }
@media screen and (max-width: 479px) {
  article.box { width:100%; }
  .footer-block-logo, .footer-block-meta { text-align:center;width:100%; }
  .headsection {
    background-image:url('/assets/media/header/mobile/cityrun-marathon-stadt-laufen.jpg');
    background-image: -webkit-image-set(url('/assets/media/header/mobile/cityrun-marathon-stadt-laufen.webp') 1x);
  }
}
@media screen and (max-width: 719px) {
  #navwrap { background:#;left:0;padding:20px 30px 40px;position:absolute;right:0;top:50px;z-index:999; }
  #nav a { color:#FFF;padding:15px 0; }
  #nav li { border-bottom:1px solid #FFF;width:100%; }
  .headsection {
    background-image:url('/assets/media/header/mobile/cityrun-marathon-stadt-laufen.jpg');
    background-image: -webkit-image-set(url('/assets/media/header/mobile/cityrun-marathon-stadt-laufen.webp') 1x);
  }
  h1 { font-size:1.6em; }
  h2 { font-size:1.45em; }
  h3 { font-size:1.35em; }
  h4 { font-size:1.25em; }
  h5 { font-size:1.1em; }
  h6 { text-transform:none; }
}
  
/* Slideshow container */
.slideshow {
  max-width: 780px;
  width:100%;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.slideshow .credits { top:0; bottom:auto; }

/* Features mit rv_module_costomscript */

.featurebox {
    width:100%;
    padding:10px;
    border-radius: 10px;
    border:4px #;
    background:#dddddd;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    text-align:center;
}

.featurebox-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.featurebox input[type="text"] {
    padding: 20px 24px;
    border: 1px solid var(--lightgray);
}

.featurebox input[type="text"]:focus,
.featurebox input[type="number"]:focus {
  border: 1px solid var(--teal);
  outline: none;
}

.featurebox input[type="range"] {
    padding: 8px 10px;
    background: #f8f8f8;
    flex: 1;
    margin-left: 1rem;
    margin-right: 1rem;
}

#featureboxresult {
    flex: 1;
    font-family: Monaco, mono;
    background: #f4f4f4;
}

@media screen and (min-width: 720px) {
  #logo { width:25%; }
  #navanchor, .navanchorwrap { display:none; }
  #navwrap { display:inline-block !important;margin-top:6px;text-align:right;vertical-align:top;width:75%; }
  .rtl #navwrap { text-align:left; }
  #nav li { margin-right:10px; }
  .headsection {
    background-image:url('/assets/media/header/desktop/cityrun-marathon-stadt-laufen.jpg');
    background-image: -webkit-image-set(url('/assets/media/header/desktop/cityrun-marathon-stadt-laufen.webp') 1x);
  }
  .content-block { padding:50px 20px; }
  
}


@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5 )and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
  ul li { background-image:url(icon-list@x2.png); }
  .rtl ul li { background-image:url(icon-list-rtl@x2.png); }
  
}