header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
@media screen{
#toTop{display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;background-color:#000;color:#FFF;padding:.5em}#toTop:hover{background-color:#FFF;color:#000}#toTop:active,#toTop:focus{outline:none}
}
/**
 * CLICKPRESS CSS-Grid
 * @author: Stefan Schulz-Lauterbach
 *
 * thanks to Dinko Skopljak for co-working
 */
.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-stretch {
  justify-items: stretch;
}

.content-start {
  align-content: start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: end;
}

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

[class*=grid_] {
  display: grid;
  grid-gap: 1rem;
}
[class*=grid_] > .block {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .grid_mobile_100 {
    grid-template-columns: 1fr;
  }
  .grid_mobile_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_mobile_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_mobile_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_mobile_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_mobile_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_mobile_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_mobile_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_mobile_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_mobile_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_mobile_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_mobile_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_mobile_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_mobile_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_mobile_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_mobile_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .gap_mobile_0 {
    grid-gap: 0;
  }
  .gap_mobile_1 {
    grid-gap: 1rem;
  }
  .gap_mobile_2 {
    grid-gap: 2rem;
  }
  .gap_mobile_3 {
    grid-gap: 3rem;
  }
  .gap_mobile_4 {
    grid-gap: 4rem;
  }
  .gap_mobile_5 {
    grid-gap: 5rem;
  }
  .gap_mobile_6 {
    grid-gap: 6rem;
  }
  .gap_mobile_7 {
    grid-gap: 7rem;
  }
  .gap_mobile_8 {
    grid-gap: 8rem;
  }
  .gap_mobile_9 {
    grid-gap: 9rem;
  }
  .gap_mobile_10 {
    grid-gap: 10rem;
  }
  .gap_mobile_11 {
    grid-gap: 11rem;
  }
  .gap_mobile_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 768px) {
  .grid_tablet_100 {
    grid-template-columns: 1fr;
  }
  .grid_tablet_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_tablet_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_tablet_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_tablet_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_tablet_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_tablet_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_tablet_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_tablet_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_tablet_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_tablet_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_tablet_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_tablet_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_tablet_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_tablet_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_tablet_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_tablet_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_tablet_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_tablet_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gap_tablet_0 {
    grid-gap: 0;
  }
  .gap_tablet_1 {
    grid-gap: 1rem;
  }
  .gap_tablet_2 {
    grid-gap: 2rem;
  }
  .gap_tablet_3 {
    grid-gap: 3rem;
  }
  .gap_tablet_4 {
    grid-gap: 4rem;
  }
  .gap_tablet_5 {
    grid-gap: 5rem;
  }
  .gap_tablet_6 {
    grid-gap: 6rem;
  }
  .gap_tablet_7 {
    grid-gap: 7rem;
  }
  .gap_tablet_8 {
    grid-gap: 8rem;
  }
  .gap_tablet_9 {
    grid-gap: 9rem;
  }
  .gap_tablet_10 {
    grid-gap: 10rem;
  }
  .gap_tablet_11 {
    grid-gap: 11rem;
  }
  .gap_tablet_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 992px) {
  .grid_desktop_100 {
    grid-template-columns: 1fr;
  }
  .grid_desktop_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_desktop_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_desktop_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_desktop_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_desktop_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_desktop_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_desktop_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_desktop_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_desktop_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_desktop_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_desktop_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_desktop_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .grid_desktop_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_desktop_40_20_20_20 {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .grid_desktop_20_40_20_20 {
    grid-template-columns: 1fr 2fr 1fr 1fr;
  }
  .grid_desktop_20_20_40_20 {
    grid-template-columns: 1fr 1fr 2fr 1fr;
  }
  .grid_desktop_20_20_20_40 {
    grid-template-columns: 1fr 1fr 1fr 2fr;
  }
  .grid_desktop_20_20_20_20_20 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gap_desktop_0 {
    grid-gap: 0;
  }
  .gap_desktop_1 {
    grid-gap: 1rem;
  }
  .gap_desktop_2 {
    grid-gap: 2rem;
  }
  .gap_desktop_3 {
    grid-gap: 3rem;
  }
  .gap_desktop_4 {
    grid-gap: 4rem;
  }
  .gap_desktop_5 {
    grid-gap: 5rem;
  }
  .gap_desktop_6 {
    grid-gap: 6rem;
  }
  .gap_desktop_7 {
    grid-gap: 7rem;
  }
  .gap_desktop_8 {
    grid-gap: 8rem;
  }
  .gap_desktop_9 {
    grid-gap: 9rem;
  }
  .gap_desktop_10 {
    grid-gap: 10rem;
  }
  .gap_desktop_11 {
    grid-gap: 11rem;
  }
  .gap_desktop_12 {
    grid-gap: 12rem;
  }
}

/*# sourceMappingURL=clickpress-grid.css.map */

#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
.content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666}
/** CSS definitions: colors, fonts, widths - LEUCHTIE **/

:root {
    /* Farbdefinitionen */

    /* Color used inside the header */
    --headerback: rgba(0,0,51,1);
    --modsearchheaderback: #5c7ea1;
    --modsearchheadertext: #ffffff;

    /* Color used inside the footer */
    --footerback: rgba(0,0,51,1);
    --linknavifootercolor: #fff;

    /* Color used inside the navigation */
    --navmainlevel2color: #ececec;
    --nav-line-back:  rgba(0,0,51,1);/*Haupt-Navi-Zeile neu*/
    --navback:  rgba(0,0,51,1);/*Haupt-Navi-Zeileneu*/
    --navback2: #5c7ea1;/*Navigation Untermenü neu*/
    --mobilnavibackground: #2b425e; /*#5c7ea1;*/
    --mobilenaviborder: #003;
    --linknavicolor: #ffd700;

    /* Color used inside the content */
    --background: #003;
    --containerborder: #354c6a;
    --containerback: rgba(99,184,255,0.1);
    --mainback: rgba(99,184,255,0);
    
    --maincolor: #000000;
    --fontcolor: #ffffff;
    --h1h4color: #ffd700;
    --linkcolor: #ffd700;
    --selectfocusborder: #9f111b;
    --perrorback: #f1f1f1;
    --boxshaddow: rgba(0,0,0,0.15);
    --imgcaption: #00ff00;
    --errorcolor: red;
    --hrcolor: #ffd700;

    /* forms */
    --buttonback: #46648c; /* #5c7ea1; */
    --buttonbackhover: #346740;
    --modsearchborder: #ccc;
    --mobilebuttonborder: #ffd700;

    /* for adding multiple boxes in a one column layout */
    --boxback: rgba(99,184,255,0.1);
    --boxborder: 1px solid none;

    /* colors for the top-link button */
    --totop_back: rgba(43,66,94,1);/*435784*/
    --totop_arrow: rgba(255,215,0,1);/*ffbf00*/
    --totop_back_hover: rgba(53,65,95,1);/*35415F*/

    /* Accordeon colors */
    --accordeonheader: #ffd700;
    --accordeonhover: #336630; /* rgba(53,65,95,1); 35415F*/
    --accordeonborder: #2b425E; /*rgba(67,87,132); 435784*/
    --accordeonback: rgba(43,66,94,1);/*435784*/
    --accordeoncontentback rgba(99,184,255,0.1);

    /* Slider colors */
    --slider-border: #46607a;
    --slider-background: rgba(99,184,255,0.1);

    /* font definitions */
    --mainfont: Arial, sans-serif;
    --accordeonarrow: "Font Awesome 5 Free";

    /* Size definitions */
    --maxwidth: 1536px; /*80%;*/
    --maxheight: 670px;
	
	/* neue Variablen */
	--kachelborder: 1px solid none;
	--kachelbackground: rgba(99,184,255,0.1);

    /* images */
    --backgroundimage: url("/files/theme/img/leuchthalsband-leuchtie-led-hund-hintergrund.jpg");
}

/** CSS one column, mobile first **/

html {
	overflow-y: scroll;
	height: 100%;
	font-size: 16px;
	line-height: 24px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	font-family: var(--mainfont);
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5;
    background-color: var(--background);
	color: var(--fontcolor);
}

/* Adapt boxmodel */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:before,
*:after{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* general elements and paddings/margins */

p, ul, ol, pre, table, blockquote {
    margin-top: 0em;
    margin-bottom: 1em;
}

/*p {
	text-align: justify;
}*/

ul ul, ol ol, ul ol, ol ul {
    margin-top: 0em;
    margin-bottom: 0em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li {
    margin-left: 2em;
}

h1, h2, h3, h4 {
	line-height: 1.5;
	color: var(--h1h4color);
}

hr {
	color: var(--hrcolor);
}

/* Links */
a,
a:visited {
	color: var(--linkcolor);
	text-decoration: underline;
}
a:hover,
a:focus,
a:active {
	color: var(--linkcolor);
    outline: 0;
}

#wrapper {
	width: 100%;
	max-width: var(--maxwidth);
	margin: 0 auto;
	background-color: var(--mainback);
	/* for a shaddow, please use the following in an additional css file: */
	/*-webkit-box-shadow:0 2px 6px rgba(68,68,68,1);
    box-shadow: 0 2px 5px rgba(68,68,68,1);*/
}

#header {
	padding: 0 0;
	background-color: var(--headerback);	
}

#header .inside {
	text-align: center;
}

/** if you want to have different banners on smartphone and PC, **/ 
/** name the PC version banner and the smatphone versio logo **/
/*
#banner {
	display: none;
}

#logo {
	display: block;
	margin: 0 auto;
}
*/
#main {
	font-size: 1em;
	line-height: 1.5;
	color: var(--fontcolor);
	}
	
#main .inside {
	padding: 0 1em;
}

#footer {
	margin: 1.5em 0 0 0; 
	padding: 1.5em 2%;
	border-top: 1px solid var(--footerback);
	color: var(--linknavifootercolor);
	background-color: var(--footerback);	
}

#footer a,
#footer a:hover,
#footer a:focus,
#footer a:active {
	color: var(--linknavifootercolor);
	text-decoration:underline;
}

/* search field in the header */

#header .mod_form {
	margin: 0 0.5em 0;
}

#form-search {
	position: relative;
	display: inline-block;
	margin: 0 0 0.3em 0;
	width: 100%;
}

#form-search input.text {
	margin-bottom: 0;
	padding-right: 30px;
	width: 100%;
	transition: all 0.5s ease 0s;
}

#form-search input.text:focus {
	width: 240px;
}

#form-search input.submit {
	position: absolute;
    right: 6px;
    top: 7px;
    width: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

/* format search results */

.mod_search form {
	border: 1px solid var(--boxborder);
	padding: 25px;
	background: var(--boxback);
	border-radius: 5px;
}

.mod_search .header {
	margin-top: 2em;
	padding: 0.2em;
	text-align: center;
	background: var(--modsearchheaderback);
	color: var(--modsearchheadertext);
	border-radius: 5px;
}

mark {
	background: none;
	color: var(--linkcolor);
	font-weight: 700;
}

.mod_search > div {
	padding: 0.75em 0.5em;
}

.mod_search .odd,
.mod_search .even {
	background: var(--boxback);
	border: var(--boxborder);
	border-radius: 5px;
	margin: 0.6em 0;
}

.mod_search form button {
	width: 100%;
}

#ctrl_7 {
	padding: 0.3em;
}

/* Buttons */

.button a,
button {
    display: inline-block;
    padding: 0.5em 2.75em;
    background:	var(--buttonback);
    font-size: 1em;
    margin: 0.5em 0;
    text-align: center;
    color: var(--linknavicolor);
    font-weight: 400;
    text-decoration: none;
    border-radius: 0.5em;
    box-shadow: 0 1px 2px var(--boxshaddow);
    border: 0;
    transition: all 0.3s ease 0s;
}

.button a:hover,
.button a:focus,
button a:hover,
button a:focus {
    background-color: var(--buttonbackhover);
}

.button-center,
.text-center {
    text-align: center;
}

button {
    cursor: pointer;
}

/* formattings for formulars */

input,
textarea,
select {
	margin-bottom: 1em;
	padding: 0.5em;
	border: 1px solid var(--buttonback);
	outline: 0;
	width: 100%;
	border-radius: 2px;
}

input:focus,
textarea:focus,
select:focus {
	border: 1px solid var(--selectfocusborder);
}

form span.mandatory {
	display: none;
}

.submit {
	margin-top: 0;
}

p.error {
	color: var(--errorcolor);
	background: var(--perrorback);
	border: 2px solid var(--errorcolor);
	padding: 0.5em;
	margin: 0 0 0.25em 0;
}

.radio_container span {
	margin-right: 2em;
}

.radio_container input {
	width: auto;
	margin-left: 2px;
}

.radio_container label {
	display: inline-block;
}

.checkbox_container input {
	width: auto;
}

.checkbox_container label {
	display: inline-block;
}

/* Image formatting */

figure.float_left {
	margin-right: 1.5em;
}

figure.float_right {
	margin-left: 1.5em;
}

figure.float_above,
figure.float_below {
    margin-bottom: 1.5em;
}

/* frage ob der irgendwo nötig ist
.image_container {
    display: inline-block;
}
*/

.caption {
	line-height: 1.2;
	font-size: 0.875em;
	background-color: var(--background);
	text-align: center;
	padding: 3px;
	margin-bottom: -1em 0.5em 0 0.5em;
	border-radius: 5px;
	color: var(--imgcaption);
}
/*
.img-center {
	text-align: center;
}
*/

/* The container element is used to center the content on the page */
#container {
    background: var(--containerback);
} 

/** CSS one column, PC Screen **/

@media screen and (min-width: 768px) {
	
	body {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
		background-image: var(--backgroundimage);
		background-repeat:no-repeat;
		background-position: center; background-attachment: fixed;
	}

	#main {
		min-height: var(--maxheight);
	}

	#header .inside {
		display: flex;
		flex-wrap: wrap;
	}

	#header .mod_form {
		position: relative;
		right: 0em;
		z-index: 10;
	}
	/*
	#banner {
		display: block;
	}

	#logo {
		display: none;
	}
	*/
	#form-search input.text {
		width: 115px;
	}
	#form-search {
		margin: 0em 0 0em 0;
	}
	
}


/* Viewport min var(--maxwidth) */
@media screen and (min-width: 768px) {

	#wrapper {
		padding: 0;
	}		

}

/** addition for header/footer full size **/

#wrapper {
	/* we must remove the max width here, as the main layout should use the full width */
	/* this does not work with internet explorer */
	max-width: unset;
}

#header {
	/* define a margin to get some space to the  header */
	margin: 0 0 1.5em 0; 
}

/* Viewport min 768px */
@media screen and (min-width: 768px) {

	body {
		/* remove the padding, as we need no space here */
		padding-top: 0;
		padding-bottom: 0;
	}

	/* set max-width and margin to center teh element */	
	#header .inside {
		margin: 0 auto;     
		max-width: var(--maxwidth);  
	}

	/* set max-width and margin to center teh element */	
	#footer .inside {
		max-width: var(--maxwidth);  
		margin: 0 auto;     
	}
	
    /* The container element is used to center the content on the page */
    #container {
        margin: 0 auto;
        max-width: var(--maxwidth);
        border-radius: 5px;
        background: var(--containerback);
		border: 1px solid var(--containerborder);

		/* for a shaddow, please use the following in an additional css file: */
        /*-webkit-box-shadow:0 2px 6px rgba(68,68,68,1);
        box-shadow: 0 2px 5px rgba(68,68,68,1);*/
    } 

}
/* Position of the menu button */

div.menubutton {
    width:100%;
    right:0;
    top:.2rem;
    position:relative;
    display:block;
    margin-bottom:.2em;
	padding-bottom: .2em;
    z-index: 10;
}

div.menubutton a.shownav:after {
	font-size: 0.7rem;
	content: " \25bc"
}

div.menubutton a.hidenav:after {
	font-size: 0.7rem;
	content: " \25b2"
}

div.menubutton a.hidenav {
	display: none;
}

/* Layout of the menu button */

div.menubutton a {
	display: block;
	margin: 0.1em;
	padding: 0.5rem;
	background-color: var(--mobilnavibackground);
	border: 1px solid var(--mobilebuttonborder);
	border-radius: 0.25rem;
	text-decoration: none;
	color: var(--linknavicolor);
	/*behavior:url('assets/css3pie/1.0.0/PIE.htc');*/
}

/* header navigation */

#nav-main {
	margin: 0.2em;
	padding: 0;
    background-color: var(--mobilnavibackground);
    /*behavior: url('assets/css3pie/1.0.0/PIE.htc');*/
    transition: 1s;
    line-height: 2;
}

#nav-main ul.level_1 {
	margin: 0;
	padding: 0;
	text-align: left;
}

#nav-main li {
    margin: 0;
    padding: 0 0.2em;
	border-top: 1px solid var(--mobilenaviborder);
	border-left: 1px solid var(--mobilenaviborder);
	border-right: 1px solid var(--mobilenaviborder);
    list-style-type: none;
}

#nav-main ul.level_2 {
	margin: 0;
	padding: 0 0 0 2rem;
	text-align: left;
}

#nav-main li:last-of-type {
    border-bottom: 0;
}

#nav-main li a,
#nav-main li span {
    display: block;
    padding: .1rem;
    text-align: left;
    background-color: var(--mobilnavibakbackground);
    text-decoration: none;
    color: var(--linknavicolor);
}

#nav-main a:hover,
#nav-main a:focus {
    text-decoration: underline;
}

#nav-main .active {
    background-color: var(--headerback);
    text-decoration: none;
    color: var(--linknavicolor);
}

/* create the menu that can be hidden */

#nav-main {
    max-height: 0;
}

#menu:target nav.mod_navigation {
    max-height:40rem;
}

#menu:target a.shownav {
    display:none;
}

#menu:target a.hidenav {
    display:block;
}

/** CSS one column, PC Screen **/

@media screen and (min-width: 768px) {
	
	/* remove menu button for responsive naviagtion */
	div.menubutton {
		display: none;
	}

	#nav-main {
		max-height: 58px;
		display: block;
		background-color: var(--nav-line-back);
		color: var(--linkcolor);
		margin: 0 0 0 0;
	}
	
	#nav-main ul {
		width: auto;
		float: left;
		margin: 0;
		padding: 0;
		list-style: none;
		background-color: var(--nav-line-back);
	}

	#nav-main li {
		width: auto;
		float: left;
		margin: 0 0em 0 0em; 
		padding: 0 1em 0 1em; 
		border: 0px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		background-color: var(--navback);
	}

	#nav-main li span, 
	#nav-main li a {
	    display: inline;
    	padding: 0;
		background-color: var(--navback);
		border: 0px;
	}

	#nav-main li:hover,
	#nav-main li:hover a,
	#nav-main li:hover a span,
	#nav-main li:hover strong {
		background-color: var(--navback2);
	}

	#nav-main li.active.submenu,
	#nav-main strong.active.submenu,
	#nav-main li.active,
	#nav-main strong.active {
		background-color: var(--navback2);
	}

	#nav-main .level_1 > li:hover,
	#nav-main .level_1 > li:hover > a,
	#nav-main .level_1 > li:hover > a span,
	#nav-main .level_1 > li:hover > strong,
	#nav-main .level_1 > li.active,
	#nav-main .level_1 > li.active > strong {
		background-color: var(--navback);
	}

	#nav-main a {
		background-color: var(--navback);
		display: block;
		line-height: 2rem;
		text-decoration: none;
		color: var(--linknavicolor);
	}

	#nav-main .active,
	#nav-main .trail {
		line-height: 2rem;
		border: 0px;
		color: var(--linknavicolor);
	}

	#nav-main .active strong{
		font-weight: bold;
	}
	
	#nav-main a:hover,
	#nav-main a:focus {
		color: var(--linknavicolor);
		background-color: var(--navback);
	}

	#nav-main .level_2 {
		width: 0;
		height: 0;
		position: absolute;
		left: -32768px;
		/*top: -32768px;*/
		overflow: hidden;
		display: block;
	}
	
	#nav-main ul.level_2 {
		margin: 0;
		margin-left: -1em;
		padding: 1em 0 1em 0;
		text-align: left;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
	}	
	
	#nav-main .level_2 li {
		clear: both;
		background-color: var(--navback2);
	}
	
	#nav-main .level_2 span {
		background-color: var(--navback2);
	}
	
	#nav-main li:hover .level_2 {
		width: auto;
		height: auto;
		min-width: 78px;
		left: auto;
		/*top: auto;*/
		overflow: auto;
		display: block;
		background-color: var(--navback2);
		z-index: 1000;
	}

	#nav-main .level_2 .active,
	#nav-main .level_2 .trail {
		font-weight:bold;
		background-color: var(--navback2);
	}
		
	#nav-main .level_2 .sibling
	{
		font-weight: normal;
	}
	
}

/* 3 Boxen nebeneinander für 3 Spalten - am besten ein eigenen Artikel Elemente bauen. Dort 3 Elemente rein legen mit box-left, box-middle und box-right als Klasse */
/* 2 Boxes 
.box2-left,.box2-right {    width: 100%;    margin-top: 1em;	padding: 0.5em;    float: left;    min-height: 180px;	border-radius: 5px;	background: var(--box2back);	border: var(--box2border);} */
/* 3 Boxes */
.box3-left,.box3-middle,.box3-right,.box3 {    width: 100%;    margin-top: 1em;	padding: 0.5em;    float: left;    min-height: 180px;	border-radius: 5px;	background: var(--box3back);	border: var(--box3border);}
/* 4 Boxes */
.box4-left,.box4-left-middle,.box4-right-middle,.box4-right {    width: 100%;    margin-top: 1em;	padding: 0.5em;    float: left;    min-height: 180px;	border-radius: 5px;	background: var(--box3back);	border: var(--box3border);}

.box2 {
    padding: 0.7em;
    float: left;
    min-height: 11.5px;
    border-radius: 5px;
    background: var(--boxback);
    border: var(--boxborder);
    width: 99%;
    margin: 0.5em 0.5%;
}


/* Screens ab 768px */
@media screen and (min-width: 768px) {  
	/* 2 Boxes
	.box2-left {		width: 49%;		margin: 2em 1% 0 0;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box2back);		border: var(--box2border);	}
	.box2-right {		width: 49%;		margin: 2em 0 0 1%;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box2back);		border: var(--box2border);	} */
	/* 3 Boxes */
	.box3-left {		width: 32%;		margin: 2em 0 0 0;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box3back);		border: var(--box3border);	}
	.box3-middle {		width: 32%;		margin: 2em 2% 0 2%;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box3back);		border: var(--box3border);	}
	.box3-right {		width: 32%;		margin: 2em 0 0 0;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box3back);		border: var(--box3border);	}
	.box3 {		width: 31%;		margin: 2em 1% 0 1%;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box3back);		border: var(--box3border);	}
	/* 4 Boxes */
	.box4-left {		width: 23%;		margin: 2em 1% 0 1%;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box3back);		border: var(--box3border);	}
	.box4-left-middle {		width: 23%;		margin: 2em 1% 0 1%;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box3back);		border: var(--box3border);	}
	.box4-right-middle {		width: 23%;		margin: 2em 1% 0 1%;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box3back);		border: var(--box3border);	}
	.box4-right {		width: 23%;		margin: 2em 1% 0 1%;		padding: 0.5em;		float: left;		min-height: 185px;		border-radius: 5px;		background: var(--box3back);		border: var(--box3border);	}	
	.box2 {
    width: 49%;
		min-height: 235px;
	}
} 

/* 3 Boxen nebeneinander für 3 Spalten - am besten ein eigenen Artikel Elemente bauen. Dort 3 Elemente rein legen mit box-left, box-middle und box-right als Klasse */

/* 2 Boxes */
.box2-left,
.box2-right,
.box3-left,
.box3-middle,
.box3-right,
.box4-left,
.box4-left-middle,
.box4-right-middle,
.box4-right,
.box3 {
    width: 100%;
    margin-top: 1em;
	padding: 0.5em;
    float: left;
    min-height: 180px;
	border-radius: 5px;
	background: var(--boxback);
	border: var(--boxborder);
}

/* Screens ab 768px */
@media screen and (min-width: 768px) {  

	/* Boxes basic definitionen */
	.box2-left, 
	.box2-right,
	.box3-left,
	.box3-middle,
	.box3-right,
	.box4-left, 
	.box4-left-middle, 
	.box4-right-middle, 
	.box4-right {
		padding: 0.5em;
		float: left;
		min-height: 185px;
		border-radius: 5px;
		background: var(--boxback);
		border: var(--boxborder);
	}


	/* 2 Boxes */
	.box2-left {
		width: 49%;
		margin: 2em 1% 0 0;
	}

	.box2-right {
		width: 49%;
		margin: 2em 0 0 1%;
	}

	 
	/* 3 Boxes */
	.box3-left {
		width: 32%;
		margin: 2em 0 0 0;
	}

	.box3-middle {
		width: 32%;
		margin: 2em 2% 0 2%;
	}

	.box3-right {
		width: 32%;
		margin: 2em 0 0 0;
	}
	
	.box3 {
		width: 32%;
		margin: 2em 0.66% 0 0.66%;
	}

	/* 4 Boxes */
	.box4-left {
		width: 23%;
		margin: 2em 1% 0 1%;
	}

	.box4-left-middle {
		width: 23%;
		margin: 2em 1% 0 1%;
	}

	.box4-right-middle {
		width: 23%;
		margin: 2em 1% 0 1%;
	}

	.box4-right {
		width: 23%;
		margin: 2em 1% 0 1%;
	}	

} 

/** Accordeon **/
/**The first accorion should not be open at first opening the web oage, so change j_accordion.html5 **/

.ce_accordion {
	margin: 0.5em 0;
	border: 1px solid var(--accordeonborder);
	border-radius: 0.5em;
}

.ui-accordion-content {
	padding: 0.25em 0.5em;
}

.ce_accordion .toggler {
	cursor: pointer;
	color: var(--accordeonheader);
	background: var(--accordeonback);
	outline: none;
	padding: 0.5em;
	font-weight: 700;
}

.ce_accordion .toggler.active,
.ce_accordion .toggler:hover {
	background: var(--accordeonhover);
	
}

.ui-icon:before {
	/* font-family: var(--accordeonarrow); */
	color: var(--accordeonheader);
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	width: 25px;
	text-align: center;
	content: '+';
}

.ui-accordion-header-active .ui-icon:before {
    content: '-';
}

/* Akkordeon Contao 5 */

.handorgel__header__button {
	background: var(--accordeonback) !important;
	margin-top: 0.5em !important;
	margin-bottom: 0.5em !important;
	border-top: 0px solid var(--accordeonback) !important;
	border-radius: 0.5em 0.5em 0 0 !important;
	color: var()--accordeonheader) !important;
}

.handorgel__header__button:hover {
	background: var(--accordeonhover) !important;
}

/*
.handorgel__header--open {
	background: var(--accordeonhover) !important;
}
*/

.handorgel__content--open {
	border-radius: 0 0 0.5em 0.5em !important;
}

.handorgel__content {
	background: var(--accordeoncontentback) !important;
	border: 1px solid var(--accordeonborder) !important;
}

.content-accordion {
    border-bottom: 0px solid #eee !important;
}

.handorgel__header__button:before {
	color: var(--accordeonheader);
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	width: 25px;
	text-align: center;
	content: '+';
}

.handorgel__header--open .handorgel__header__button:before {
    content: '-';
}

[aria-expanded="false"] {
	border-radius: 0.5em !important;
}

/** Definitions for Image sliders, based on  RockSolid-Slider **/

.slider-center {

	border: 2px solid var(--slider-border);
	border-radius: 0.5em;
}

.slider-abstand {
	margin: 0 0 1em 0;
}

.rsts-box-slide p {

    display: none !important;

}

.rsts-main {
    background-color: var(--slider-background);
    border-radius: 0.5em;
    border: 1px solid var(--slider-border);
}

.rsts-text {
	padding: 0.5em;
}

.rsts-thumbs-view {
	padding: 0 0 0.5em 0;
}

.rsts-skin-default.rsts-type-fade .rsts-slide {
	background-color: rgba(0,0,0,0);
}

/* Viewport min 768px */
@media screen and (min-width: 768px) {
        
    .slider-center {
        margin: auto auto;
    }
}

/**
 *  Definitions for to top link, based on contao extension "Button um zum Anfang der Seite zu springen"
 *
 *  To use the extension:
 *  1.) install it first
 *  2.) Create a Themes - Module TopLink, based on UItoTop, and give it a Text/Icon like: "<i class="far fa-arrow-alt-circle-up"></i> alternativ ohne font awesome: Icon &#8657;"
 *  3.) Within Themes - Seitenlayout:
 *      3.1) enable jQuery
 *      3.2) add an exrta head tag for fonts awsome: <link href="/files/theme/fonts/awesome/css/all.min.css" rel="stylesheet">
 *      3.3) add 23_toplink.css to the style sheets
 *      3.4) Add the TopLink module as first module in the footer
 *
 **/ 

#toTop {
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    overflow: hidden;
    background-color: var(--totop_back);
    color: var(--totop_arrow);
    padding: .1em;
	font-size: 3em;
	border-radius: 7px;
}

#toTop:hover {
    background-color: var(--totop_back_hover);
    color: var(--totop_arrow);
}
/** CSS für LEUCHTIE speziell **/

.echt h2  {
    font-size: 1em; 
}

.kachel-alt {
	border-radius: 5px;
	background: rgba(99,184,255,0.1);
	border: 1px solid none;
	padding-top: 1em;
}

/* die drei folgenden sind übergangsweise für die Anleitungsseite img-center-neu, kachel-neu ce_cp_grid_start*/

.img-center-neu figure {
	text-align: center;
}

/* Wenn Kachel nötig wird innerhalb einer seite */
.kachel {
	background: var(--kachelbackground);
	padding: 0.7em;
	border: var(--kachelborder);
	border-radius: 5px;	
	margin-bottom: 1em;
}

.ce_cp_grid_start {	margin-bottom: 1em;}

.li-abstand {
    margin-top: 0.5em;
}

.li-abstand li {
    margin-top: 0.5em;
}

.img-abstand {
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

img {
	border-radius: 7px;
	/*border: 1px solid black;*/
}

.img-rahmen img {
	border: 1px solid #ffbf00;
}

.content-slider img {margin: 0;}

body {
	background-image:url("/files/theme/img/leuchthalsband-leuchtie-led-hund-hintergrund.jpg");
	background-repeat:no-repeat;
	background-position: center; background-attachment: fixed;
}

h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.2rem;
}

.fuellbild figure {
	display: none;
}

.nounderline a {
	text-decoration: none;
}

.ul-links ul {
	text-align: left;
}

#cboxOverlay {
    background: none;
}

/* Boxen */

.box-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 40px;
}

.box {
  width: 100%;
  min-width: 200px;
}

 #flex-box3 {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

/* für FAQ */

.widget-checkbox {display: none;}

.mod_faqlist a {
	color: #ffffff; 
	text-decoration: none;
}

.info {
	font-size: 0.8em;
	font-style: italic;
	margin: 2em 0;
	text-align: right;}

/* Abstand für BDA */

.abstand-bda {
	padding-left: 3em;
}

.img-bda img{
	width: 55px;
}

/* Breadcrumb */

.mod_breadcrumb ul {
	list-style: none;
	margin: 1.5em 0;
	font-size: 0.8em;
}

.mod_breadcrumb li {
	display: inline-block;
	margin: 0;
	padding: 0;
}

.mod_breadcrumb li:after {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  content: '>';
  width: 20px;
  text-align: center;
}

.mod_breadcrumb .last:after {
	content: '';
}

.faq-a-b ol { list-style: upper-alpha;}

.faq-ul li {
	margin-top: 0.7em;
	margin-bottom: 0.7em;
	font-size: 1.2em;
}
/* Viewport max 767px */

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

	.bild-mitte-mobile figure {
				width: 100%;
				text-align: center;
	}

}



/* Viewport min 768px */

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

		.fuellbild figure {
			display: block;
			margin-top: -4em;
		}

		.bild-mitte figure {
					width: 100%;
					text-align: center;
		}

		.img-faq {
			max-width: 25%;
			margin: auto;
		}
		
		#header img {margin:0;}

		.box {
			width: 48%;
			min-width: 200px;
		}

		/*img {
			margin: 0 1em;
		}*/

		/* Abstand für BDA */

		.abstand-bda {
			padding-left: 10em;
		}

		.img-bda img{
			width: 100%;
		}

		.faq-ul li {
			margin-top: 0.2em;
			margin-bottom: 0.2em;
			font-size: 1em;
		}
}


/* for printing, remove colors and backgrounds */
@media print {

    @page {
      size: A4;
    }
    
    #nav-main,
    #nav-mobile,
    #form-search,
    #footer .box-wrapper {
      display: none;
    }
    
    body {
      border: 0;
    }
    
    #wrapper {
      margin: 0;
    }
    
    #footer {
      border: 0;
      margin: 0;
    }
    
    #main a[href]:after {
      content: " (" attr(href) ")";
    }
    
}
    
/* 21-images.css Stand: 03.05.2023 */
/* Image formatting */

/* Bilder mit Rahmen ohne Abstand */
.img-rahmen img {
	border-radius: 7px;
	border: var(--imgborder);
}

.img-rahmen figcaption {
	line-height: 1.2;
	font-size: 0.875em;
	background-color: var(--captionbackground);
	text-align: center;
	padding: 0.3em;
	border-radius: 5px;
	color: var(--captioncolor);
	margin: -0.2em 0 0 0;
}

/* Linker und rechter Abstand zum Text bei Bildern bei Text mit Bild */
.float_left, .media--left>figure {
	margin-right: 1em;
}

.float_right, .media--right>figure  {
	margin-left: 1em;
}

/* Bilder in mobilem Layout prozentual anzeigen */
.img-mobile-80 img {
	width: 80%;
}

.img-mobile img {
	width: 100%;
	}

.img-100-50 figure {
	width: 100%;
}

.img-100-20 figure {
	width: 100%;
}
	
.img-50-100 figure {
	max-width: 50%;
}

.img-50-50 figure {
	max-width: 50%;
}

.img-100-100 figure {
	max-width: 100%;
}

.img-50-40 figure {
	max-width: 50%;
}

.img-50-150px figure {
	max-width: 50%;
}

.bild-50-40 {
	max-width: 50%;
}

.img-center figure {
	text-align: center;
}

.bild-center {
	text-align: center;
}

.img-no-caption figcaption {
	display: none;
}

.img-autowidth {
	width: auto;
}

.img-container .img-autowidth {
	width: auto;
}

/* Viewport min 768px */
@media screen and (min-width: 768px) {
	
	.img-100-50 figure {
		max-width: 50%;
	}
	
	.img-50-100 figure {
		max-width: 100%;
	}
	
	.img-50-50 figure {
		max-width: 50%;
	}
	
	.img-100-100 figure {
		max-width: 100%;
	}
	
	.img-100-20 figure {
		max-width: 20%;
	}
	
	.img-50-40 figure {
		max-width: 40%;
	}
	
	.img-50-150px figure {
		max-width: 150px;
	}
	
	.bild-50-40 {
		max-width: 40%;
	}

}