/* Custom.css created by Axel make settings for sapella homepage  */

#sp-contact-email > {background: red; color: #ffffff;}
/* sp-page-title-heading
/*
">Email <a href="mailto:Info@floox.com">Info@floox.com</a></li>
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item  > a:hover  {background: #0B2c55; color: #00bcd7;}	/* Schrift Türkis auf dunkelblau */

/* We defined our own header, it shall have the height of 198 px which is the size of the sapella image with turtle */
#sp-header, #sp-header .logo  {height: 198px; background: #0b2c55 ; /* background-repeat:no-repeat; */ 	}
/* -header { background-image:url("/images/sapella/testbilder/Test-Header_1200x100.jpg")} 		/* Standard Background image */

/* Choose the header height depending on screen size */
/* TEST */
/* default-Abstand zum oberen Rand	*/
#offcanvas-toggler  { padding: 89px 0px 0px 20px; }
#offcanvas-toggler {font-size: 56px; }	
#sp-header {background-repeat: no-repeat; }


@media (max-width: 767px) {
  /*CSS HERE*/
  #sp-header, #sp-header .logo  {height: 50px; background: #0b2c55 ;  	}
  #sp-header{ background-image:url("/images/sapella/kopf-logo ultra_breit_1429x50.jpg"); background-repeat: no-repeat; } 
/*  #sp-header{ background-repeat:no-repeat; }	/* */
  #offcanvas-toggler   { padding: 0px 0px 0px 0px; }
}

@media (min-width: 768px) and (max-width: 1200px) {
  #sp-header, #sp-header .logo  {height: 100px; background: blue ;  	}

  /* nur zum Test, dass wir hier sind - works only if not display:none, s.u. */
  .sp-megamenu-parent > li > a,  .sp-megamenu-parent > li > span {font-size:20px; font-weight: bold; } 

  /* #sp-header{ background-image:url("/images/sapella/testbilder/Test-Header_1200x100.jpg"); background-repeat: no-repeat;}  /* Testbild */
  #sp-header{ background-image:url("/images/sapella/kopf-logo ultra_breit_1479x100.jpg"); background-repeat: no-repeat;} 
  #offcanvas-toggler   { padding: 41px 0px 0px 100%; right:0}   
  #offcanvas-toggler   { padding: 141px 0px 0px 0px ; position: absolute; right:0 }   

  /* Problem bei Auflüsung ca. 1000-1200 Pixel: Das Menu steht nicht oben im Header, sondern tiefer und überlagert den Text */
/* Abhilfe: Erst ab 1200 Pixel wird das Menu angezeigt, darunter gibt es nur das Hamburger Menu				*/
       #sp-menu .sp-megamenu-parent {display: none !important;} 
}

@media (min-width: 1201px) {
  /*CSS HERE*/
  #sp-header, #sp-header .logo  {height: 198px; }
  /* #sp-header{ background-image:url("/images/sapella/testbilder/Test-Header_2000x150.jpg"); background-repeat: no-repeat;  }   /* Testbild */
  #sp-header{ background-image:url("/images/sapella/kopf-logo ultra_breit_5630x198.jpg"); background-repeat: no-repeat;  } 
  
  #offcanvas-toggler   { padding: 139px 0px 0px 25px; } 
}
/*   #sp-header{ background-image:url("/images/sapella/testbilder/Test-Header_2000x150.jpg"); } 	/* WORKS */

  
/* TEST ENDE */
  
/* Ausschalten für alle außer grosser Schirm: .d-none .d-xl-block	*/
/* define font size and style for the menu */
.sp-megamenu-parent > li > a,  .sp-megamenu-parent > li > span {font-size:25px; font-weight: bold; color: white; }


/* Change main menu to bottom position - push it down by 139px, must be checked to fit*/
/* Schatten um Hauptmenu:		/**/
.sp-megamenu-parent   { padding: 139px 0px 0px 0px; 
   /* box-shadow: 40px 20px 10px rgba(255,0,0, 0.9);	/*  Roter Schatten um Hauptmenu, offset-x | offset-y | blur-radius | spread-radius | color */
}
/* Schatten um Untermenu:		/**/
.sp-megamenu-parent .sp-dropdown {
/*   box-shadow: 40px 20px 10px rgba(255, 255, 0, 1);	/*  Gelber Schatten um Hauptmenu, offset-x | offset-y | blur-radius | spread-radius | color */
   box-shadow: 15px 15px 20px 0px rgba(0, 188, 215, 0.8)
}




/*********** OFF - CANVAS  BUTTON  AND MENU ****/
/* Change off-canvas button to bottom position - push it down by 39px, must be checked to fit, give 10px distance to menu*/
/* Maybe always the same value as for the mega menu	*/
/**** 03-08.2021 OFF #offcanvas-toggler {  padding: 139px 0px 0px 10px;}			/**/
#offcanvas-toggler i {font-size: 28px;}			/* Set size of offcancas toggler, should be approx. font size of menu */
#offcanvas-toggler {font-size: 61px;}			/* Set size of offcancas toggler, should be approx. font size of menu */	/* TEST */
/* color of the off canvas menu button */
#offcanvas-toggler > i.fa {color: red ;}
#offcanvas-toggler > i.fa:hover {background:  #0b2c55  ; color: #00bcd7;}

/* Test 2021-12-14	*/

#offcanvas-toggler  fa:hover {background:  #ffffff  ; color: yellowgreen;}
#offcanvas-toggler > i { background:  #ffffff !important  ; color: red !important;}
/* #offcanvas-toggler  { background: red !important; font-size: 132px; }			/**/
/* #offcanvas-toggler  { background: red ; color: yellowgreen; font-size: 56px; }	/**/

/*.offcanvas-menu  { logo-image:url("/images/sapella/sapella-kl-kopfbild-pp.jpg"}	/* Gibt feisten Fehler*/

/* Versuch 14.12.2021 /**/
/* .offcanvas-menu > .logo > .logo-image:url("/images/sapella/sapella-kl-kopfbild-pp.jpg"} /**/
.burger-icon {background-color: white; }
.burger-icon {color:coral}	/**/
.burger-icon i.fa:hover {background:  #ffffff  ; color: yellowgreen;}		/**/
/* Ende Versuch 07.12.2021 */
/* .offcanvas-menu > img.logo-image {src: "/images/sapella/sapella-kl-kopfbild-pp.jpg"} /**/
/*.offcanvas-menu .offcanvas-inner .sp-module .logo-image {src("/images/sapella/sapella-kl-kopfbild-pp.jpg") /**/

      
      
      
/***** Show the expanded OFF CANVAS MENU when opening it ****/
.offcanvas-menu .offcanvas-inner {  padding-right: 0;}
.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler {  display: none;}
body.ltr .offcanvas-menu .offcanvas-inner .sp-module ul > li ul { margin-left: 0; }
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li {  padding: 0.25rem 0;}
.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-deeper.menu-parent {	padding-bottom: 0.5rem; }
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul.menu-child {   display: initial; }
.offcanvas-menu .offcanvas-inner .sp-module ul.menu-child > li {   padding-top: 0.5rem;   padding-left: 1.1rem; }
/**/

/*************** Turn breadcrumbs OFF  ****/
/* .breadcrumb { display: none;}	/**/


/* Menu items color */
.sp-megamenu-parent > li > a {color: white;}		/* Standard-Farbe des Menus; Text = Weiss*/


/* Colors of already selected = active menu items */
/* Active color of menu item:  */
/* Main Menu = Home, About Us, ...	*/
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a 
{ color: #BBBBBB; font-weight: bold; background: #0b2c55}  /* Schrift hellgrau bold  auf dunkelblau */
/* All sub menues - entries if active */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active  > a {color: #BBBBBB;} 


/* 2nd Level = About Us--> History	*/
/* .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active  > a {color: magenta;} 		/* Textfarbe 2. Ebene Untermenu-Eintrags WORKS!!!	 */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active  > a {color: magenta;} 		/* Textfarbe 2. Ebene Untermenu-Eintrags WORKS!!!	 */

/* 3rd Level = Products --> Product Videos --> TRINN	*/
.sp-megamenu-parent .sp-dropdown .sp-menu-item li.active  > a {color: yellow;} 		/* Textfarbe des vorletzten selektierten Untermenu-Eintrags	WORKS */
/* Lowest level  - if Level greater than 2	*/ 
/* .sp-megamenu-parent .sp-dropdown .sp-menu-item li.current-item.active  > a {color: magenta;} 		/* Textfarbe des untersten selektierten Untermenu-Eintrags	WORKS!!! */


/* All sub menues - entries if active ####  Override settings made above except unterster seletierter Eintrag*/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active  > a {color: #BBBBBB;} 




/*  Color of hover menu item */
/* .sp-megamenu-parent > li > a:hover 	{ background:  #0b2c55  ; color: #00bcd7; }  	/* Türkis auf dunkelblau.   Ist dasselbe wie .sp-megamenu-parent > li:hover > a	 */
.sp-megamenu-parent > li:hover > a	{ background:  #0b2c55  ; color: #00bcd7; }		/* hält im Gegensatz zu Zeile vor die Farbe, wenn die Maus auf submenu geht */

/******************** Settings for submenu	*********************/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item a	{font-weight: bold; font-size:18px	}	/* size and bold */

/* Standard appearance of submenu	*/
/* .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner  { background: #00bcd7;}		/* Hintergrund Türkis */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner  { background: #03527b;}		/* Hintergrund submenu, ganzes submenu Helleres Dunkelblau 1b3c65 */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item  a {color: #ffffff;}    			/* Einträge Weiss */


/* Appearance of submenu items on hover	*/
/*  Text und hintergrund - liefert kleineren Balken als item:hover , da nur der Text hinterlegt wird*/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item  > a:hover  {background: #0B2c55; color: #00bcd7;}	/* Schrift Türkis auf dunkelblau */

/* .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner:hover {background: black;}	/* Change Background color of complete submenu on hover*/

/* Abstände im submenu */
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:not(:last-child) { margin-bottom: 10px; }


/********** Menu nach unten setzen **************/
.sp-megamenu-parent .sp-megamenu-inner {vertical-align: bottom; }  

#sp-header {vertical-align: bottom;}
#sp-header .sp-megamenu-parent > li > {vertical-align: bottom;}


.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {padding-left:10px; padding-right:10px;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {padding-left:10px; padding-right:10px;}
/* .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover {background: #00B9F1;}	/**/




/*settings for breadcrumd: background-color and height */
/* .sp-page-title .breadcrumb {background-color: #cccccc; }	/* background color of You are here: Home / ... / ... */
															/* height: 50px; defines height of it, not of the whole row */
.breadcrumb li span {color: #cccccc;}							/* color of text for Home and other links inside the path */ 
.breadcrumb li a {color: 81b3ca;}								/* ??? */
.sp-page-title .breadcrumb {    display: none; }	/* */

 .sp-megamenu-parent{text-align: center;}



/* #sp-breadcrumb, #sp-breadcrumb .breadcrumb {height: 15px; background-color: #ffffff; font-size: 13px } */

/* How to display all submenu items in off-canvas menu */
/*
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul {display: block;}
*/


/* .bottom {background-color: #0b2c55 ; }
.bottom {background-color: #fb2c55 ; }
*/


/* global change color: */

#sp-footer, #sp-bottom {
  background: #0b2c55 ;
  color: #fff;
}
#sp-footer a, #sp-bottom a {
  color: #cde8ef ;
}
#sp-footer a:hover, #sp-bottom a:hover, #sp-footer a:active, #sp-bottom a:active, #sp-footer a:focus, #sp-bottom a:focus {
  color: #81b3ca ;
}
#sp-bottom .sp-module-content .latestnews > li > a > span {
  color: #fff;
}

 #sp-main-body {
   background: #0b2c55 ; color: #ffffff ;
}	/**/

/* Reihenfolge bachten!!!    :link — :visited — :hover — :active		*/
/* #sp-main-body a:active {background: red; color: #ff00ff; }	/* angeklickt*/
/* #sp-main-body > a:hover {background: #00bcd7; color: red; }	/* mouse over */
/* #sp-main-body a:hover { color: #FF0000; }	/* mouse over */

/* #sp-main-body a:focus {background: orange; color: #000000; }	/* mouse over */
/* #sp-main-body a:link { color: #00bcd7; }	/* Link, unvisited: r */
/* #sp-main-body a:visited { color: #81b3ca; }	/* Link, visited:  */


/* #sp-main-body > a:hover {background: #00bcd7; color: red; }	/* mouse over */

#sp-main-body a:link { color: #00bcd7; }	/* Standard-farbe link unvisited: türkis*/
#sp-main-body a:visited { color: #81b3ca; }	/* Link, visited:  dunkleres hellblau*/
#sp-main-body a:hover {  background: #00bcd7; color: #FFFFFF; }	/* mouse over : Hintergrund türkis, Schrift weiß*/


/* Schriftfarbe der Überschriften h3 und h4 setzen */
h3 { font-weight: bold; color:#00bcd7;  } /* Farbe türkisblau, fett */
h4 { color:#00bcd7;  } /* Farbe türkisblau */
h5 { color:#00bcd7;  } /* Farbe türkisblau */