/* 
orange rgb(236, 67, 15) #ec430f 
grau rgb(37, 37, 37)  #252525
*/
  
/* Schriften einbetten*/
@import '../fonts/fA/css/all.css';  /*font awesome*/
@import '../fonts/google/css/all.css';  /*googlefonts */

/* breakpoints   (Blau>Flieder>Grün>Rot>Pink)
@media (min-width: 1px) 	{#sp-top-bar   			{background: #113399!important;}}
@media (min-width: 576px)  	{#sp-top-bar			{background: #ccccff!important;}}
@media (min-width: 768px)  	{#sp-top-bar			{background: #00ff00!important;}}
@media (min-width: 992px)  	{#sp-top-bar 			{background: #ff0000!important;}}
@media (min-width: 1200px)  {#sp-top-bar   			{background: #ff00ff!important;}}
*/

/* Header Home Schriftgröße*/
.animated-heading-before-part { font-size: clamp(0.7em, 3.8vw, 3.75em);}
.addon-root-animated-heading  { font-size: clamp(0.7em, 3.8vw, 3.75em);}
.addon-root-heading           { font-size: clamp(0.7em, 3.8vw, 3.75em);}


/* Slider Buttons (Landingpage) */
.sppb-sp-slider-button .sp-slider-btn-text {
    display: block;
    color: #fff;
    background: #ec430f; 
    padding: 10px 20px;
    transition-duration: .4s;
    transition-property: color, background;
    font-size: 16px;
    border-radius: 4px;
}


/* Badge NEU   (entfernen/setzen unter Menüeintrag) */
.sp-menu-badge-right {
    background: none!important;
    height: 7px!important;
    line-height: 0px!important;
    padding: 0 0px!important;
    font-size: 6px!important;
    font-weight: bold;
    letter-spacing: 0px!important;
    border-radius: 0px!important;
    margin-left: 0px;
}
}




/* "Seite bearbeiten" im Frontend ausblenden*/
.sp-pagebuilder-page-edit {display:none !important;}

/* doppelte Blocks wegen Update Laptop mobile usw)*/
@media (min-width: 1px) 	{
}
@media (min-width: 576px)  	{
}
@media (min-width: 768px)  	{
}
@media (min-width: 992px)  	{
  .sppb-hidden-md           {display: none !important; visibility: hidden;}
}
@media (min-width: 1200px)  {
}

/* Beratung/Planung... ausrichten bottom*/
#column-wrap-id-1575618630666.sppp-column-vertical-align,
#column-wrap-id-1575618630668.sppp-column-vertical-align,
#column-wrap-id-1575618630670.sppp-column-vertical-align,
#column-wrap-id-1575618630672.sppp-column-vertical-align
{
  align-self: self-end !important;
}

/* Social Icons größer */
#sp-footer2 > div > ul { font-size: 30px !important;}


div.sppb-carousel-extended-item a{
    cursor: default;
  	pointer-events: none; 
}



h1  {	font-family: Raleway, arial !important;}
h2  {	font-size: clamp(1.0em, 2.7vw, 2.0em) !important; font-family: Raleway, arial !important;}
h3 	{	font-size: clamp(0.7em, 2.7vw, 1.6em) !important; font-family: Raleway, arial !important;}
h4  {	font-size: clamp(0.5em, 2.7vw, 1.3em) !important; font-family: Raleway, arial !important; }
h5  {	font-size: clamp(0.3em, 2.7vw, 1.1em) !important; font-family: Raleway, arial !important; }
h6  {	font-size: clamp(0.3em, 2.7vw, 0.7em) !important; font-family: Raleway, arial !important;}




.sppb-image-layout-title {padding-left: 10px !important;}


/* Offcanvas Text klickbar*/
.offcanvas-menu .menu-deeper ul li {
    display: flex;
    flex-direction: column;
}
.offcanvas-menu .menu-deeper ul li nav-header {
    position: relative;
}
.offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent .menu-toggler {
    top: 50%;
    background: none;
    width: 100%;
    text-align: end;
    right: unset !important;
}
/* Offcanvas Style */
.offcanvas-menu .offcanvas-inner ul.menu > li {font-weight: normal; }
.offcanvas-menu .offcanvas-inner .sp-module .sp-module-title {font-weight: normal; font-size: 1.4em !important;}
.mb-4 {margin-top: 1.5rem;}

/* Bilder in Megamenü & offcanvas ausblenden */
.offcanvas-menu img{
  Display: none;
  height: 0px;
  padding: 0px;
  margin: -7px 0px 0px 0px;
}
.sp-menu-item img{
  Display: none;
  height: 0px;
  padding: 0px;
}
.sp-dropdown li.sp-menu-item > a {padding: 0px !important;}



@media (min-width: 1px)  {
 #sp-top-bar .sp-contact-time {		
    display: none!important;
  }
  #sp-header .logo a {
    font-size: 21px;
  }
}
@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 100%;
  }
  #sp-top-bar .sp-contact-time {			
    display: inline-block!important; 
  }
  #sp-header .logo a {
   font-size: 24px!important;
  }
}
@media (min-width: 768px) {
  .container, .container-md, .container-sm {
    max-width: 720px!important;
  }
}
@media (min-width: 992px){
  .container, .container-lg, .container-md, .container-sm {
    max-width: 1500px!important;
  }
  
  .sp-megamenu-parent > li > a, .sp-megamenu-parent > li span {
  padding: 0 5px;
}
  .img-detail > div:nth-child(1) > div:nth-child(1) > img:nth-child(1){
     transform: scaleX(-1);
  }

}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1300px!important;
  }
    .sp-megamenu-parent > li > a, .sp-megamenu-parent > li span {
  padding: 0 10px;
}

}
@media (min-width: 1500px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1400px!important;
  }
    .sp-megamenu-parent > li > a, .sp-megamenu-parent > li span {
  padding: 0 15px;
  }
}

.animated-heading-before-part,
.animated-heading-after-part,
.animated-text {
	text-shadow:1px 1px 5px #252525;
  }




body {
  	font-family: 'raleway', Arial !important;
}

  
/* Hintergrundbild festlegen (IMGPfaf direkt in Custom CSS von SPPB*/
body::before {  
    content: ' ';
    display: block;
    background-color: #ffffff;
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; 
}

/* headerbild bei Potrait nicht volle höhe! */
@media (orientation: portrait) {
.headerimg{ height: 40vh !important;
  			margin-top: 50px !important;
  }
}
/*Headertext*/
.headertext {height:100%;}


/*buttons*/
body .sppb-btn.sppb-btn-secondary, body .sppb-btn.btn-seconday, body .sppb-btn.btn-primary, body .btn.sppb-btn-secondary, body .btn.btn-seconday, body .btn.btn-primary {
  background: #ec430f;
}
body .sppb-btn.sppb-btn-default::before, body .sppb-btn.sppb-btn-primary::before, body .btn.sppb-btn-default::before, body .btn.sppb-btn-primary::before {
background: #ec430f;
}

body .sppb-btn.sppb-btn-secondary:hover {
  background: #252525;
}
.sppb-btn.sppb-btn-primary .fas, .sppb-btn.sppb-btn-primary .fa-solid {
  padding-left: 10px;
}
body .sppb-btn.sppb-btn-primary {
/*border-right: 1px solid rgb(236, 67, 15, 1);*/
background: rgb(255,255,255,0.05);
}

/* social-icons weg*/
#sp-top1 { width: 0%;}
#sp-top2 { width: 100%;}

/*header*/
#sp-header {
}

.logo a::after {  								/*Logo zweizeilig */
	content: "Chevalier Sonnenschutz GmbH";
  	display: block;
	font-family: 'Raleway';
  	font-size: 11px;
  	font-weight: 400;
  	letter-spacing: 1px !important;
  	white-space: nowrap;  
	color: rgb(236, 67, 15);	
}
.logo a{
  								font-family: 'allerbold', Arial; 
  								font-weight: 800;
  								color: #333333 !important;
  								white-space: nowrap;
  								letter-spacing: -1px !important;
								line-height: 1.1 !important;
}


/*Flyouts transparent wenn standard, full wenn sticky*/
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  								background: rgba(255, 255, 255, 0.6); !important;
								-webkit-backdrop-filter: blur(3px);
    							backdrop-filter: blur(3px);
}
.header-sticky .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  								background: rgba(255, 255, 255) !important;
}





.burger-icon > span {background: #252525;}




/* Bild drehen */
#sppb-addon-qN6ESv8gHsi8wt4sNM54S > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > img:nth-child(1),
{
     transform: scaleX(-1);
}

/*Elfsight*/
div[class*="Container__Inner-sc-"] {  /*Hintergrund Container*/
  								background-color: rgba(255, 255, 255, 0.8)!important;
  
} 
div[class*="ReviewBackground__Container-sc-"] {  /*Hintergrund Container*/
  								background-color: rgba(255, 255, 255, 0.0)!important;
}
div[class*="Grid__GridContainer"] {  /*Spalten breiter*/
								grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))!important;
}
div[class*="SimpleShortener__Outer-sc-"] {  /*höhe Textfeld, mehr text*/
							/*	max-height: 110px!important;*/
								line-height: 1.2!important;
								font-size: 18px!important;
}
button[class*="ButtonBase__ButtonContainer-sc-"] {  /*Button orange*/
								background-color: rgb(236, 67, 15) !important;
  								border-radius: 0px !important;
}

/*Iframe ratio für Showroom*/
.iframeratio div{
  position: relative !important; 
  padding-bottom: 75% !important; /*ratio 4:3 */
  height: 0 !important; 
  overflow: hidden !important; 
  width: 100% !important;
  height: auto !important;
}
.iframeratio div iframe {
  position: absolute !important; 
  top: 0 !important; 
  left: 0 !important; 
  width: 100% !important; 
  height: 100% !important; 
}





/* Alternativen Menü */
#menu-alternative li {
  display: inline-flex;           
  list-style-type: none;      
}
#menu-alternative {
  background-color: none;       
  padding: 4px 0;                  
  margin: 0;                        
  text-align: center;
}
#menu-alternative a {
  color: #252525;                     
  font-weight: 400;
  text-decoration: none;         
  padding: 4px 8px;              
  transition-property: color, background;
  transition-duration: 0.5s;

}
#menu-alternative a:hover img{
  color: #ffffff;                     
  transition-property: transform;
  transition-duration: 0.5s;
  transform: scale(1.05);

}
#menu-alternative a img{
  transition-property: transform;
  transition-duration: 1s; 
}
#menu-alternative li[class*=" current active"]{
  display: none;
}



/* ADV Portfolio Pro*/
.project-img-extra-content h4 { color:#fff !important;
background: rgb(37, 37, 37, 0.7);
}
.projects-wrapper .project-img img {width: 100%;} /* Fix Spaltenbreite zw. Bildern */
.ext-load-more {background: #ec430f;}
.ext-load-more:hover {color: #ec430f; border-color: #ec430f;}




/* Footer */
#sp-footer #sp-footer2 {		text-align: center !important;}
footer.sp-module {				margin-top:20px !important;}