/*
COLORS
LAYOUT - HERO ANIMATION
LAYOUT
TYPO
CARDS
ANIMATIONS
FOOTER
*/

:root {
    --color-green: #53ad32;
    --color-green-hover: #74c358;
    --color-grey: #585858;
  }
  




/* LAYOUT - HERO ANIMATION*/
.hero {
    background-image: url(/images/banners/startseite/hero.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
  	display: flex;
	flex-direction: row;
}

.hero-green {
	background-color: rgba(85, 138, 65, 0.3);
    width: 25%;
}

    .hero-center_overlay {
        width: 60%;
        background-color: rgba(255,255,255,0.8);
        margin: 0 auto;
        opacity: 1;
        -webkit-animation: fadeIn ease 2s;
        animation: fadeIn ease 2s;
    }

    .hero_logo {
        width: 100%;
		margin: 0 auto;
        opacity: 1;

        -webkit-animation: grow ease 2s;
        animation: grow ease 2s;
    }

        @keyframes grow {
            0% {width:70%;}
            100% {width:100%;}
            }

        @keyframes fadeIn {
            0% {opacity:0;}
            100% {opacity:1;}
            }
            
            @-moz-keyframes fadeIn {
            0% {opacity:0;}
            100% {opacity:1;}
            }
            
            @-webkit-keyframes fadeIn {
            0% {opacity:0;}
            100% {opacity:1;}
            }
            
            @-o-keyframes fadeIn {
            0% {opacity:0;}
            100% {opacity:1;}
            }
            
            @-ms-keyframes fadeIn {
            0% {opacity:0;}
            100% {opacity:1;}
            }

/* hide */
#banner_auto_slider_main>div:last-of-type {
  display:none;
}


  
  /* LAYOUT */

	  /* Wrapper for Main Content */
      .main-content p,
      .main-content h1 {
          width: 100%;
          margin: 1em auto 0.5em auto;
      }
  

      /* Hero image: full width*/
      #sp-banner .container {
        width: 100% !important;
        padding: 0;
        max-width: unset;
      }
  
      .banneritem img {
      width: 100% !important;
      }
  
.sp-page-title {
    height: 30vw;
    width: 100%;
    background-size: cover;
    background-position: center;
}
.sp-page-title .container {
  display: none;
}
      /* Hide icon of blog-pages */
      .post-format {display:none;}
  
      /* Logo size */
      .logo img {
          min-height: 65px;
          min-width: 220px;
          max-width: 250px;
      }
		

      #sp-header .sp-default-logo	{
        display: block;
      }

  
      /* Navigation-Items */
      .sp-megamenu-parent li a {
          padding: 0 10px;
      }
  
          @media only screen and (min-width: 1200px) {
              .sp-megamenu-parent li a {
                  padding: 0 20px;
              }
          }
 		/* Links */

.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li:hover > a {
  color:var(--color-green-hover);
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
  background: #fff;
    color:var(--color-green-hover);

}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: var(--color-green-hover);
}
  
  
    .main-content p {
      text-align: left;
    }
  

    .page-header {
      padding: 0;
      border: none
    }
  
    .entry-header {
      display: none!important;
    }
  

article.item {
  margin-top: 50px;
  margin-bottom: 50px;
}
  

  /* TYPO */
  
      /* Font default: grey */
      body {color:#585858;}
  
  
      /* Font color: green + horizontal line  */
      h1 {
          color:#53ad32;
          border-bottom: 1px solid #ccc;
          padding-bottom: 0.5em;
      }
  
      .main-content h1 {
          margin-bottom: 30px;
      }
  
      h1, h2, h3 {
        margin-top: 1em!important;
        margin-bottom: 0.5em!important;
    	}
  
  
  
  
  
  /* CARDS */

    @media (min-width: 1300px) {
      .card-row .container {
        width: 1270px;
      }
    }

    .card-row .sp-column,
    .card-row .sp-module-content,
    .card-row .sp-module,
    .card-row .custom,
    .card-aos{
      	height: 100%;
    }


    #sp-bottom1 .custom,
    #sp-bottom2 .custom,
    #sp-bottom3 .custom,
	#sp-bottom4 .custom {
        display: flex;
        flex-direction: column;
    }

    .card1,
    .card2,
    .card3,
	.card4 {
        width: 100%;
        min-height: 505px;
    }

    .card-h3-p,
    .card-text-p,
    .card-button-p {
      	margin-top: 0!important;
        margin-left: 10px;
        margin-right: 10px;
    }


    .card-img-p {
        margin: 0;
        padding: 0;
        }

    .card-img-p img {
        width: 100%;
        }


    .card-text-p {
        height: 100px;
    }

        @media only screen and (max-width: 1199px) {
            .card-text-p {
                height: 150px;
            }
        }

        @media only screen and (max-width: 767px) {
            .card-text-p {
                height: 130px;
            }
        }
        
  
    /* Font color: white */
    #sp-bottom a {
        color:#fff;
        }


    


    /* MOBILE */
    @media only screen and (max-width: 767px) {
        #sp-bottom1 .sp-column,
        #sp-bottom2 .sp-column,
        #sp-bottom3 .sp-column,
        #sp-bottom4 .sp-column {
        width:80%;
        margin: 0 auto;
        }
	}

  
    /* Mobile: center cards */
    @media only screen and (max-width: 1200px) {
        #sp-bottom1 .custom,
        #sp-bottom2 .custom,
        #sp-bottom3 .custom,
      	#sp-bottom4 .custom {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }

    /* Mobile: bottom gap */
    @media only screen and (max-width: 992px) {
        #sp-bottom1,
        #sp-bottom2,
        #sp-bottom3,
      	#sp-bottom4 {
            margin-bottom: 80px;
        }
    }

    /* Mobile: center p */
    @media only screen and (max-width: 767px) {
        #sp-bottom1 .custom p,
        #sp-bottom2 .custom p,
        #sp-bottom3 .custom p,
        #sp-bottom4 .custom p {
        width: 80%;
        margin: 0 auto;
        }

        .custom p a img {
        margin: 0 auto !important;
        }
    }





    /* Card Buttons */
    .card-button {
        background-color: #fff;
        color: #53ad32 !important;
        padding: 5px;
        border-radius: 4px;
    }

        .card-button:hover {
        color: #585858 !important;
        font-size: 1.1em;
        }

    .card-button-p {
    margin: 10px;
    padding-bottom: 20px;
    }



    /* Emergency Button */
    .red-button {
    background-color: rgb(225, 0, 0) !important;
    color: #fff !important;
    }

        .red-button:hover {
            color: #fff !important;
            }


        @media only screen and (max-width: 767px) {
            .card-button {
                text-align: center;
            }
        }





    /* Card images */
  
    #card1-img {
        background-image:url(/images/glaserei/glass-1497227_640.jpg);
    }
    #card2-img {
        background-image:url(/images/teaser/hsw-teaser.jpg);
    }
    #card3-img {
        background-image:url(/images/teaser/24-7-teaser.jpg);
    }
    #card4-img {
        background-image:url(/images/teaser/brandschutztuer-teaser.jpg);
    }

    .card-img {
        float:left;
        margin: 0px 0px 20px 0px;
        width:100%;
        height:233px;
        overflow:hidden;
        background-size:100% 233px;
        background-position:0px 0px;
        transition:all 0.5s ;
        -webkit-transition:all 0.5s ;
        -o-transition:all 0.5s ;
        -moz-transition:all 0.5s ;
      }
      
        .card-img:hover {
        background-size:110% 263px;
        background-position:-25px -25px;
        }












/* ANIMATIONS */

    /* horizontal <hr> */
    @keyframes hr-slideIn {
        from {width: 10px;}
        to {width: 80px;}
    }

    hr {
        border: 2px solid #fff;
        width: 80px;
        margin: 20px 0px;
        animation-name: hr-slideIn;
        animation-duration: 1s;
    }


/* Intro-Text */
.intro-aos {
  margin: 0 auto;
  padding: 0;
  width: 70%;
  font-size: 1.2em;
}


/* CARD AOS */
.card-aos {
  margin: 0;
  padding: 0;
  background-color: var(--color-green);
  box-shadow: 0px 0px 3px var(--color-grey);
}

/* FOOTER */
#sp-footer {
    background: var(--color-grey);
}