.logo-image {
	margin-top: 150px;
}


#sp-menu>.sp-column {
	height: 80%;
}
@media (max-width: 991px) {
	#sp-menu>.sp-column {
		height: 50%;
	}
}



#sp-header {
	box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.0);
	animation: spFadeIn 0.0s;
	animation: spFadeOut 0.0s;
}

/* Grosses Logo*/
.logo-image {
    height: 160px;
}

/* Grosses Logo wird durch Script verkleinert */
#sp-header .kleines_logo a { 
transform: scale(0.5);
transition: .8s ease-out;
transition-delay: 0.1s;
}

@media (min-width: 992px){
	#sp-header {
    height: 180px;
	}
}
/* Logo für kleine Bildschirme */
@media (max-width: 991px){
	.logo-image {
		margin-top: 35px;
		height: 80px !important;
	}
	#sp-header .kleines_logo a { 
		transform: scale(1);
		transition: .8s ease-out;
		transition-delay: 0.1s;
	}
}


@media (max-width: 575px) {
	#sp-header {
    height: 60px;
	}
}

@font-face {
    font-family: 'CenturyGothic';
    src: url('../fonts/CenturyGothic.woff2') format('woff2'),
         url('../fonts/CenturyGothic.woff') format('woff'),
         url('../fonts/CenturyGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'CenturyGothic', Arial ;
	font-size: 18px;
	
}

h1, h2, h3 { 
	font-family: 'CenturyGothic', Arial;
	font-size: 32px;
	font-weight: 800;
	color: #848960;
}


@media (min-width: 576px){
    .container, .container-sm {
    max-width: 540px;
}}

@media (min-width: 768px){
    .container, .container-md, .container-sm {
    max-width: 720px;
}}

@media (min-width: 992px){
    .container, .container-lg, .container-md, .container-sm {
    max-width: 960px;
}}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1000px;
}}

@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1100px;
}}






.background {
    background:#f3f3f3;
    padding: 20px;
}

.btn-primary, .sppb-btn-primary {
    border-color: #BDC389;
    background-color: #BDC389;
}

.btn-primary:hover {
    border-color: #BDC389;
    background-color: #AAC389;
}








.nav-link {
    border-style: solid;
    border-width: 2px !important;
}

a.nav-link {
    border-style: solid;
    border-width: 2px !important;
    border-right-style: solid !important;
    border-color: grey !important;
    border-radius: 0px !important;
}

/* ======================= ab hier von der helix3  custom.css eingefügt */
#sp-top-bar {
    background: #ffff00;
	padding: 0px;
}

#sp-main-body {
	background-color: #ffffff;
}

.body-wrapper {
	background-color: white;
}

.sp-megamenu-parent > li > a {
	font-size:16px;
}

.offcanvas-menu { 
	background-color: white; 
	color: white;
	font-size:22px;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
	width: 300px;
}


@font-face {
    font-family: 'Danilla';
    src: url('../fonts/Danilla.woff2') format('woff2'),
         url('../fonts/Danilla.woff') format('woff'),
         url('../fonts/Danilla.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CenturyGothic';
    src: url('../fonts/CenturyGothic.woff2') format('woff2'),
         url('../fonts/CenturyGothic.woff') format('woff'),
         url('../fonts/CenturyGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'CenturyGothic', Arial ;
	font-size: 18px;
	
}

h1, h2, h3 { 
	font-family: 'CenturyGothic', Arial;
	font-size: 28px;
	font-weight: 800;
	color: #848960;
}

h2 {
    margin-bottom: 20px;
    margin-top: 40px;
}
}
 
.sp-megamenu-parent {
    float: left;
}

.pull-img_right{
	float: right;
	margin-left: 30px;
}

.background {
    background: #DEE1C4;
    padding: 20px;
}

/* erscheint bei Kursauswahl bei kleiner Seitenbreite */
.dropdown-toggle {
	background: #BDC389;
}

.btn-check:focus+.btn-secondary, .btn-secondary:focus, .btn-secondary:hover {
	background-color: #848960;
}

/* erscheint bei Kursauswahl */
#kursauswahl.header-sticky {
    position: fixed;
    z-index: 9999;
    top: 130px;

    background:#ffffff;
    padding: 0px;
    margin-left: 180px;
}



.background {
    background:#f3f3f3;
    padding: 20px;
}

.anchoroffset {
    scroll-margin-top: 7.5em;
  }

/* erscheint bei Kursauswahl bei grosser Seitenbreite */  
.nav-link {
    border-style: solid;
    border-width: 2px !important;
}

a.nav-link {
    border-style: solid;
    border-width: 2px !important;
    border-right-style: solid !important;
    border-color: grey !important;
    border-radius: 0px !important;
}

#sp-header.menu-fixed-out .logo a { 
width: 150px;
transition: width .5s ease-out;
}

#sp-header.menu-fixed .logo a { 
width:90px;
transition-property: width;
transition: width .5s ease-out;
}

/* in einem Modul zuweisen und es bleibt fix beim Scrollern -> Kursübersicht */ 
.my-fixed {
	position: fixed;
}

.mod-custom {
	margin-top: 60px;
	/*width: min-content;*/
}

/*Grundstellung nach Neuladen der Seite*/
.accordion-button {
	background: #BDC389;
	border-color: #848960;
	
}

/*Wenn Button geöffnet und geschlossen wurde und Cursor drauf steht*/
.accordion-button:focus {
	background: #BDC389;
	border-color: red;
	box-shadow: 0 0 0 0rem rgb(13 110 253 / 25%);
}

/*Button geöffnet*/
.accordion-button:not(.collapsed) {
    color: #111111;
    background-color: #D1D5AC;
	border-color: #848960;
}


/* Schriftfarbe für Kursübersicht im Modul*/
a.list_kursuebersicht {
	color: #848960;
	display: inline-block;
	width: 90%;
    border-bottom-color: #848960;
    border-bottom-style: solid;
    border-bottom-width: 1px;
	padding-top: 8px;
	padding-bottom: 8px;
	line-height: 110%;
}
}
/* Abstand zwischen den Kursen im Modul*/
.sp-module ul {
	margin: 10px 0;
}

/* Rahmen um das Intro-Image im Ausstellungen-Blog */ 
.article-intro-image {
	width: 250px;
	margin-right: 20px;
	margin-bottom: 20px;
	border-color: lightgrey;
	border-style: solid;
	border-width: 2px;
	padding: 10px;
	background: white;
	float: left;
	
}

/* für Texte im Ausstellungen-Blog */ 
.item-content {
    overflow: auto;
}

.ribbon-wrapper-orange {
 width: 85px;
 height: 88px;
 overflow: hidden;
 position: absolute;
 top: -3px;
 right: -3px;
 z-index: 90;
}
.ribbon-orange {
 font: bold 15px Sans-Serif;
 color: #FFF;
 text-align: center;
 text-shadow: rgba(0,0,0,0.5) 0px 1px 0px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 position: relative;
 padding: 7px 0;
 left: -5px;
 top: 15px;
 width: 120px;
 background-color: #e85311;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#e85311), to(#d26d01)); 
 background-image: -webkit-linear-gradient(top, #e85311, #d26d01); 
 background-image: -moz-linear-gradient(top, #e85311, #d26d01); 
 background-image: -ms-linear-gradient(top, #e85311, #d26d01); 
 background-image: -o-linear-gradient(top, #e85311, #d26d01); 
 color: #FFF;
 -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-orange:before, .ribbon-orange:after {
 content: "";
 border-top: 3px solid #c26400; 
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
 position:absolute;
 bottom: -3px;
}
.ribbon-orange:before {
 left: 0;
}
.ribbon-orange:after {
 right: 0;
}

div.list-title {
	border-bottom: 1px solid #000000;
	margin-bottom: 5px;
	margin-top: 20px;
}


/* So ist die Fusszeile auch bei wenig Inhalt am unteren Rand */ 
.body-innerwrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
#sp-main-body {
    margin-bottom: auto;
	padding: 10px;
}

#sp-header .logo {
	height: 50px;
}


#sp-header .logo a { 
width: 100%;
transition: .8s ease-out;
}


.offcanvas-menu .offcanvas-inner ul.menu li.active a {
    color: #BDC389 !important;
}

 #offcanvas-toggler {height: 140px;} 
 #offcanvas-toggler,
 .sp-megamenu-parent > li > a, 
 .sp-megamenu-parent > li > span {
	 line-height: 200px; 
}


/* Schaltet das Springen beim Scrollen aus*/
#sp-header.header-sticky {
    top: 0px;
	animation: none;
	opacity: 100%;
}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
	font-family: 'CenturyGothic';
	font-size: 18px;
	padding: 0 10px 0 10px;
}

.article-full-image.float-img_right {
    float: right;
    margin-left: 30px;
	margin-bottom: 30px;
}

.article-full-image.float-img_left {
    float: left;
    margin-right: 30px;
	margin-bottom: 30px;
	margin-top: 16px;
}

.article-details {
    margin-top: 50px;
}

#sp-left .sp-module .header-sticky, #sp-right .sp-module .header-sticky {
	border: none;
	margin-top: 40px;
}


#sp-left .sp-module:first-child, #sp-right .sp-module:first-child {
    margin-top: 40px;
	border: none;
}

.list_kursuebersicht {
	line-height: 12px;
}


.convertforms .cf-form-wrap {
	padding-left: 0px;
}

label.cell.margin-top-1 {
    width: 50%;
}


#sp-left .sp-module ul a {
    color: #000000; /* Hier können Sie die gewünschte Farbe einstellen (z.B., Rot) */
}

#sp-left ul {
	border-bottom: 1px solid #bbb; /* Fügt einen Strich (1 Pixel, solide, schwarze Farbe) unter jedem Listenelement hinzu */
    padding: 10px; /* Fügt Innenabstand zum Listenelement hinzu (optional) */
}

#sp-footer2 {
	margin-top: -60px;
}

.convertforms.cf-success .cf-response {
	background-color: #BDC389;
}

a:hover, a:focus, a:active {
    color: #BDC389;
}


a {
	color: #848960;
}

.article-details .article-full-image img {
	border-radius: 0px;
}

div.acym_module_success {
	background-color: #BDC389;
	color: white;
	
}


#mod-custom124.custom  {
	margin: 0px;
    background-color: red;
    padding: 0px;
	border: 0px;
	height: 21px;

}

#sp-top-bar {
	background-color: white;
}

ul.social-icons {
	align: center;
}

.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
    color: #848960;
	font-weight: bold;
}

.sp-megamenu-parent>li:hover>a {
    color: #BDC389;
	font-weight: bold;
}

html {
    scroll-behavior: auto !important;
}

#sp-footer .container-inner {
    border-top: 1px solid rgba(000, 000, 000, 0.1);
}

#sp-footer, #sp-bottom {
    background: #BDC389;
    color: #000000;
}


#sp-footer a, #sp-bottom a {
	color: black;
}

/* Icongrösse im Footer festlegen */
.fab, .icon-joomla {
    font-size: 20px;
}

.col-sm-2 {
	margin-left: -15px;
}

.article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery {
	margin: 0px 20px 20px 0px;
	border: 2px solid lightgrey;

}

/* auf schmalen Bildschirmen rechts neben Bild grossen Rand einstellen, damit Text unter das Bild rutscht */
@media (max-width: 575px) {
	.article-list .article .article-intro-image, .article-list .article .article-featured-video, .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery {
		margin: 0px 225px 20px 0px;
		border: 2px solid lightgrey;
	}
}