/** mn begin 
customization file erzeugt extra zum anpassen des Aussehens der KIH Website
mn end **/



/* Optional: Hover-Effekt */
.offcanvas-toggler:hover .hamburger span {
  background-color: #333333;
}

/** mn begin */
/** damit der Header bei responsive nicht kleiner wird */
#sp-header {
    height: 70px !important;
}
/** mn end */

/** //mn begin */
/** //mn this is for helix ultimate */
.article-ratings-social-share {
display: none !important;  
}

.article-main-component {
  background-color: #eeffff
  border-color: #1f1f1f;
}

.layout-boxed .body-innerwrapper {
  box-shadow: none;
}
/** //mn end */

/** mn begin */
/** die texte im menu fett zeigen */
.sp-menu-item {
	font-size: 35px;
	font-weight: 800;
}
/** mn end */


.--bs-body-font-weight {
	font-size: 35px;
	font-weight: 800;
}

/** mn begin */
/** aktives menu item fett */
.sp-menu-item.current-item.active a {
	font-weight: bold;
}
.sp-menu-item.sp-has-child.active a {
	font-weight: bold;
}
.sp-menu-item.active a {
	font-weight: bold;
}
/** mn end */

/** mn begin */
/** das kleine hellblaue Rechteck nach einem h1 Text */
.sppb-dynamic-content-text h1::after, .h1::after {
  background-color: #009de3;
  content: " ";
  display: inline-block;
  margin-left: 6px;
  width: 55px;
  height: 18px;
}
/** mn end */


/** mn begin */
/** reduce space between Header and Article(s) area  */
.com-content #sp-main-body { 
	padding-top: 60px;
}
/** mn end */


/** mn begin */
/** damit im sp simple portfolio Item-Seite 
/** kein hinweis zum Client JoomShaper erscheint */
.sp-simpleportfolio .sp-simpleportfolio-meta {display: none; width:0%;} 
/** mn end */


/** mn begin */
/** Farben auf der Titel-Fläche im Blog-Article */
.sp-page-title{
	display: none; 
	width:0%;
	height:0%;
	background-color: #EEEEEE;
	color: #000;
}
/** mn end */
 
/** mn begin */
/** damit im sp simple portfolio kein VIEW Link zu der Item-Seite erscheint */
a.btn-view{
  display: none !important;
}
/** falls die Item-Seite erscheint, hiermit regelt man deren relative Breite */ 
.sp-simpleportfolio .sp-simpleportfolio-description {
  width: 100%; float: none;
}
/** mn end */

/** mn begin */
/** show the image with their original size (not overblown) in the gallery-format within a blog article */
.carousel-item img{
  width: auto;
  height: auto;
  max-width: none;
}
/** mn end */

/** mn begin */
.article-intro-image.float-left img{
	object-fit: contain;	
}
.intro-image-blog  img{
	object-fit: contain;	
}
/** mn end */

.kunst-im-hafen-blog   img{
	object-fit: contain;	
}


.speasyimagegallery-gallery-item-content {opacity: 1 !important;}

.speasyimagegallery-gallery .speasyimagegallery-gallery-item-title {
    color: yellow;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.sppb-tab-content .sppb-tab-custom-content{
  background-color: #EEEEEE;
}

/** mn begin */
/** den Link ganz unten in der Blog-Übersichtseite bearbeiten */
/** er ist im CustomMod-BlogLink Modul enthalten*/
.my-CustomMod-BlogLink a {
  box-shadow: inset -10 -10 0 10 #009ddf;
  color: #000000;
  padding: 0.3em .35em;
  margin: 0 -.25em;
  transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
.my-CustomMod-BlogLink a:hover {
  color: #fff;
  box-shadow: inset 350px 0 0 0 #009ddf;
}
/** mn end */

/** mn begin */
/* Fix cropped images in Helix Ultimate Masonry Blog */
.article-intro-image.float-left img {
  object-fit: contain !important; /* show full image inside the box */
  width: 100% !important;         /* make it responsive */
  height: auto !important;        /* preserve aspect ratio */
}

/* Ensure the container adapts to the image height */
.article-intro-image.float-left  {
  height: auto !important;
}
/** mn end */



/** mn begin */
/** damit im sp simple portfolio kein hinweis zu den möglichen tags erscheint 
div.sp-simpleportfolio-tags{ display: none !important; }
div.sp-simpleportfolio-info{ display: none !important; } 
/** mn end */

.sp-simpleportfolio-created,
.sp-simpleportfolio-tags {display: none;}
/** mn end */

/** mn begin */
/* nach dem entfernen des <a>-tags sollte auch das hover kein effekt haben */
/* .sp-simpleportfolio-info:hover{background:#333;color:#fff} */
.sp-simpleportfolio-item:hover .sp-simpleportfolio-info:hover{background:#f5f5f5;color:#000}
.sp-simpleportfolio-item:hover .sp-simpleportfolio-info:hover{background:#f50005;color:#000}
/** mn end */

/** mn begin */
/** ein beispiel wie der haupt-container in css angesprochen wird 
zuerst wird überall der hintergrund blau, und nur im container grün */
/* - Diese Zeile kommentiert das ganze wieder aus 
 body {background: blue; background-color: blue;} 
/** #sp-main-body > .container {background: green;} 
/** mn end */


/** mn begin */
/* #sp-footer .container-inner{padding:30px 0;border-top:1px solid rgba(255, 255, 255, 0.1)}
/* - Diese Zeile kommentiert das ganze wieder aus */
#sp-footer{background:#ffffff;padding:0}
#sp-footer .container-inner{padding:0px 0;}
/** mn end */

/** mn begin */
/** The Sliding Highlight Link Hover Effect 
zut Testzwecken wurden es auf alle links angewendet und natürlich klappt es nicht gut 
Man muss eine eigene Klasse dafür erzeugen, hm wie genau noch mal? */
/* - Diese Zeile kommentiert das ganze wieder aus 
a {
  box-shadow: inset -10 -10 0 10 #009ddf;
  color: #009dde;
  padding: 0.3em .35em;
  margin: 0 -.25em;
  transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
}
a:hover {
  color: #fff;
  box-shadow: inset 350px 0 0 0 #009ddf;
}
/** mn end */