.template-root {background:  var(--cassiopeia-color-primary); color: var(--white);}
a.template-root:hover {background:  var(--cassiopeia-color-hover) !important; color: var(--white) !important;}

body {color: RGBA(0,0,0,0.5);font-family: 'Open Sans', sans-serif !important;}
/* .row {width:100%;} */
.h1, h1 {font-weight: 400 !important; margin-bottom: 1rem;font-family: 'Open Sans', sans-serif !important; color:#01843e;}
.h4, h4 {font-weight: 400 !important; margin-bottom: 1rem;font-family: 'Open Sans', sans-serif !important;}
.h3, h3 {font-weight: 400 !important;font-family: 'Open Sans', sans-serif !important;}
a {text-decoration: none !important;font-family: 'Open Sans', sans-serif !important;}
.container-component {margin-top: 3rem;}
.template-root {background:  var(--cassiopeia-color-primary) !important;}

main .com-content-article {margin:100px 0;}



/* lmz optimierung */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
 width:100%;
 padding-right:var(--gutter-x,.5em);
 padding-left:var(--gutter-x,.5em);
 margin-right:auto;
 margin-left:auto;
}
@media (min-width:576px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl  {
  max-width:540px;
 }
}
@media (min-width:768px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
  max-width:720px;
 }
}
@media (min-width:992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
  max-width:960px;
 }
}
@media (min-width:1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
  max-width:1140px;
 }
}
@media (min-width:1400px) {
 .container,
 .container-lg,
 .container-md,
 .container-sm,
 .container-xl,
 .container-xxl {
  max-width:1320px;
 }
}


.metismenu.mod-menu .metismenu-item > a:focus, .metismenu.mod-menu .metismenu-item > button:focus {
    outline: 0px dotted #ced4da !important;
    outline-offset: 0px !important;
}
.mod-menu a{
  color:inherit !important;
}
@media screen and (min-width: 768px) {
  #menuToggler{
    display: none;
  }
}
@media screen and (max-width: 768px) {
  #menu:not(.show) {
    right:-100%;
  }
  #menu{
    position: fixed;
    height:100vh;
    max-width: 95vw;
    background-color: #fff;
    box-shadow: 0 0 10px #3333;
    top:0;
    right:0%;
    transition: all ease .4s;
    padding:10px;
  }
  .navbar{
    position: unset;
  }
  #menuToggler.hamburger{
    position: fixed;
    top:30px;
    right:30px;
    z-index:999999;
  }
  .metismenu.mod-menu .metismenu-item > ul {
    position: relative;
    box-shadow:none;
  }
  .metismenu.mod-menu .mm-collapse {
    position: relative;
    box-shadow:none;
  }
  .metismenu.mod-menu .metismenu-item {
    display: block;
  }
  .metismenu.mod-menu .mm-collapse:not(.mm-show) {
    display: block;
    height: 0;
    overflow: hidden;
  }
  .level-1.current.active , .level-2.current.active{
    border-left: 3px solid var(--cassiopeia-color-primary);
  }
  #header > div > div.row{
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

.com-contact__thumbnail.thumbnail img{
  max-width: 250px;
}
.com-contact.contact{
  padding:15px;
}
main > div.com-contact.contact{
  display: block;
  max-width: 1320px;
  margin: 10px auto 100px auto;
}
main > div.com-contact.contact .com-contact__container{
  grid-template-rows: repeat(4,2);
  margin:80px 0;
}
main > div.com-contact.contact h3{
  color:#fff;
  font-size:2em;
  font-weight: bold !important;

}
main > div.com-contact.contact .com-contact__container h3{
  color:inherit;
}
main > div.com-contact.contact .com-contact__form {
 background-color: var(--cassiopeia-color-primary);
 padding: 90px 200px 50px 200px;
 margin: -90px -200px -50px -200px;
 border-radius: 15px;
 color: #fff;
 border:1px solid#3333 !important;
 box-shadow: 3px 5px 10px #3333 !important;
}
main > div.com-contact.contact .com-contact__form #contact-form{
  position: relative;
}
@media screen and (min-width: 1024px) {
  main > div.com-contact.contact .com-contact__form #contact-form fieldset::before{
    content:"";
    display: block;
    position: absolute;
    height:80%;
    width:80%;
    top:10%;
    left:20%;
    border-radius: 15px;

    z-index: 9996;
  }
}
@media screen and (max-width: 1024px) {
  .com-contact__thumbnail.thumbnail img {
    margin: 20px 0;
  }
}
main > div.com-contact.contact .com-contact__form #contact-form .control-group{
  position: relative;
  z-index: 9999;
}
main > div.com-contact.contact .com-contact__form #contact-form .control-group input , main > div.com-contact.contact .com-contact__form #contact-form .control-group textarea , main > div.com-contact.contact .com-contact__form #contact-form .control-group button{
  border:1px solid#3333 !important;
  box-shadow: 3px 5px 10px #3333 !important;
}
main > div.com-contact.contact .com-contact__form #contact-form .control-group button{
  border:1px solid#3333 !important;
  box-shadow: 3px 5px 10px #3333 !important;
  background-color: var(--cassiopeia-color-hover) !important;
}
@media (min-width: 992px) {
  .com-contact__container .com-contact__thumbnail {
    text-align: left;
  }
}
/* lmz optimierung END*/

/* under-mainslider-features-container  */

.under-mainslider-features-container{
  min-height: 200px;
  background-color:#aaa1;
}
.under-mainslider-features-container > div {
}
.under-mainslider-features-container .umfc-card {
  margin-top:-100px;
  min-height: 200px;
  box-shadow: 0 0 10px #aaa5;
  border-radius: 30px;
  padding:10px 10px 20px 10px;
  text-align: center;
}
.under-mainslider-features-container .umfc-card .umfc-icon{
  margin:10px auto;
  background-color:#aaa2;
  border:1px solid #3331;
  border-radius: 50%;
  padding:20px;
  box-shadow: 5px 5px 10px #3335;
}
.under-mainslider-features-container .umfc-card .umfc-icon i{
  width:30px;
  height:30px;
  font-size: 30px;
  color:var(--cassiopeia-color-primary);
}
.under-mainslider-features-container .umfc-card .umfc-header{
  font-weight: bold;
}
.under-mainslider-features-container .umfc-card .umfc-text{
  font-size: small;
}
@media screen and (max-width: 768px) {
  .under-mainslider-features-container .umfc-card {
    margin:10px;
  }
}
/* under-mainslider-features-container  END*/


/* .header {display: grid; grid-template-columns: 20% 70%; justify-content: space-around;} */
.container-header {z-index: 99999;}
.container-header .container-nav {display: grid; }

.container-header {
  background-color: var(--white);
  background-image: linear-gradient(135deg,var(--white),var(--white));
  border-top: 10px solid var(--cassiopeia-color-primary);
  box-shadow: 0 -9px 0 0 #fff,0 6px 15px 0 rgba(0,0,0,.1);
  padding-bottom: 10px;
}

.com-content-article.item-page ul.fields-container {display: none;}

.hgd-video {z-index: 1;}
.CB_overlay {position: relative; z-index: 2;}
.container-header .navbar-brand img {width: 100%; min-width: 15rem; padding: .3em; transition: all ease 1s;}
.container-header.header-resize .navbar-brand img {
  /* width: 12rem;
  min-width: 12rem;
  padding: .1em; */
}
.container-header .container-nav {
  justify-content: end;
}
.container-header .mod-menu, .container-header .mod-menu, .container-header .navbar-toggler, .container-header .mod-menu>li>a, .container-header .mod-menu>li>span , .metismenu.mod-menu .metismenu-item > ul > li > ul > li > a{color: var(--template-bg-dark-90) !important;}
.metismenu.mod-menu{
  justify-content: space-between;
}
.metismenu.mod-menu .metismenu-item{
  padding: 10px 5px;
}
.metismenu.mod-menu .metismenu-item:first-of-type{
  padding: 10px 5px 10px 0px;
}
.metismenu.mod-menu .metismenu-item:last-of-type{
  padding: 10px 0px 10px 5px;
}

.dj-megamenu-default li a.dj-up_a > span {
  height: 30px !important;
  line-height: 30px !important;
  font-weight: normal;
}
.dj-megamenu-default li a.dj-up_a {
  height: 30px !important;
}

.CB_Container .fal, .CB_Container .far {padding: 0 .4rem;;}
.CB_Container a.btn {padding: .7rem 1.5rem; letter-spacing: .05rem;}
.CB_itembg {min-height: 100%;}
.container-header .navbar-toggler {margin-bottom: .8rem;}
.navbar-toggler:focus {box-shadow: 0 0 2px var(--dark);}

#mod-hgd-contentbuilder113 .CB_Container a.btn:hover {background: var(--cassiopeia-color-hover) !important;}
#mod-hgd-contentbuilder114 .fal {font-size: 4rem;}
#mod-hgd-contentbuilder114 .card {transition: all ease .7s;}
#mod-hgd-contentbuilder114 a .card:hover {background: var(--cassiopeia-color-hover) !important;}
#mod-hgd-contentbuilder114 a .card:hover .fal {animation: effect .7s;}
#mod-hgd-contentbuilder116 div.card-text {font-size: 1.15rem; font-weight: 300; line-height: 1.6rem;}
#mod-hgd-contentbuilder116 .fal {font-size: 1rem;}
#mod-hgd-contentbuilder116 .card-body {padding: 0;}
#mod-hgd-contentbuilder116 div.card-text {font-size: 1.15rem; font-weight: 300; line-height: 1.6rem;}
#mod-hgd-contentbuilder116 div.card img {max-width: 20rem;}
#mod-hgd-contentbuilder116 ul.cb_menu {padding-left: 0;list-style: none;}
#mod-hgd-contentbuilder116 ul.cb_menu a {font-size: 1.15rem; font-weight: 300; line-height: 1.6rem; text-decoration: none;color: currentColor;transition: all ease .4s;}
#mod-hgd-contentbuilder116 ul.cb_menu a:hover {color: var(--cassiopeia-color-primary);}
#mod-hgd-contentbuilder116 a {color: var(--cwhite);}
#mod-hgd-contentbuilder116 a:hover {color: var(--cassiopeia-color-primary);}
#mod-hgd-contentbuilder116 .table > :not(caption) > * > * {padding: 0; border-bottom: 0;}
#mod-hgd-contentbuilder118 {margin-top: 1rem;}
#mod-hgd-contentbuilder118 .table th {font-size: 1.3rem; font-weight: 300; letter-spacing: .1rem;}
#mod-hgd-contentbuilder118 .table th, #mod-hgd-contentbuilder118 .table tr td {color: var(--white);}
#mod-hgd-contentbuilder118 .table tbody th, #mod-hgd-contentbuilder118 .table tbody tr td {border-color: rgba(255,255,255,.4);}
#mod-hgd-contentbuilder118 .table tr {transition: all ease .4s;}
#mod-hgd-contentbuilder118 .table tr:hover {background: rgba(0,0,0,.3);}
#mod-hgd-contentbuilder118 .table .fal {font-size: 1.3rem; color: var(--white);}
#mod-hgd-contentbuilder118 a {transition: all ease .4s;}
#mod-hgd-contentbuilder118 a:hover {background: var(--cassiopeia-color-hover);}
#mod-hgd-contentbuilder119 .card {transition: all ease .7s;}
#mod-hgd-contentbuilder119 a .card:hover {background: var(--cassiopeia-color-hover) !important;}
#mod-hgd-contentbuilder119 a .card:hover .hgd-counter {animation: effect .7s;}

.footer .grid-child {justify-content: arround; padding: 1.5rem .5em;}
.footer {background-color: var(--cassiopeia-color-primary); background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-primary)); margin-top: 0;}
.footer2 a {text-decoration: none; font-size: .8rem; font-weight: 300;}

.form-control {
    color: var(--cassiopeia-color-hover);
    border: 1px solid var(--cassiopeia-color-hover);
        border-top-color: var(--cassiopeia-color-hover);
        border-right-color: var(--cassiopeia-color-hover);
        border-bottom-color: var(--cassiopeia-color-hover);
        border-left-color: var(--cassiopeia-color-hover);
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


@media screen and (max-width: 1280px) {

}

@media screen and (min-width: 1024px) {
   .com-contact__form .form-control {
      width: 40%;
  }
}

@media screen and (max-width: 768px) {
    .header {display: grid; grid-template-columns: 100%; justify-content: space-around;}
    .container-header .container-nav {justify-content: start;}
    .p-5 {padding: 1rem!important;}
}

    @keyframes effect {
        0% {
            transform: scale(1, 1);
        }
        25% {
            transform: scale(1.5, 0.5);
        }

        50% {
            transform: scale(0.5, 1.5);
        }

        75% {
            transform: scale(1.5, 0.5);
        }

        100% {
            transform: scale(1, 1);
        }
    }


.card-actions-3d a.btn {background: var(--cassiopeia-color-primary); border-radius: 4px; box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.25); color: var(--white); display: inline-block; padding: .6rem 3rem .8rem; position: relative; text-decoration: none; transition: all 0.1s 0s ease-out;}

.card-actions-3d a.btn:hover {background: var(--cassiopeia-color-hover); box-shadow: 0px 8px 2px 0 rgba(0, 0, 0, 0.075); transform: translateY(-2px); transition: all 0.25s 0s ease-out;}

.card-actions-3d a.btn:active,
.card-actions-3d a.btn:active {background: var(--cassiopeia-color-hover); box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.25); transform: translate3d(0, 1px, 0); transition: all 0.025s 0s ease-out;}

div.cards-3d {max-width: 100%;}

div.card-3d {background: var(--white); display: inline-block; margin: 8px; max-width: 400px; perspective: 1000; position: relative; text-align: left; transition: all 0.4s 0s ease-in; width: 100%; z-index: 1;}

div.card-3d .card__image-holder {background: rgba(0, 0, 0, 0.1); height: 0; padding-bottom: 75%; overflow: hidden;}
div.card-3d .card__image-holder img {filter: brightness(.7); transition: all ease .6s;}
div.card-3d:hover .card__image-holder img, div.card-3d.show .card__image-holder img {filter: brightness(1);}

div.card-3d div.card-title-3d {background: var(--white); padding: .6rem 1.5rem 1rem; position: relative; z-index: 0;}

div.card-3d div.card-title-3d div.toggle-info-3d {border-radius: 3rem; height: 3rem; padding: 0; position: absolute; right: 1rem; top: 1rem;}

div.card-3d div.card-title-3d div.toggle-info-3d span {background: var(--white); display: block; position: absolute;  transition: all 0.3s 0s ease-out; width: 12px;}

div.card-3d div.card-title-3d div.toggle-info-3d span.right .fal {padding: 0rem;}
div.card-3d div.card-title-3d div.toggle-info-3d span.right {transform: rotate(0deg);}
div.card-3d.show div.card-title-3d div.toggle-info-3d span.right {transform: rotate(0.5turn);}

div.card-3d .card-title-3d h4 {font-size: 1.7rem; font-weight: 400; letter-spacing: 0.05em; margin: 0; padding: 0; transition: all ease .6s;}

div.card-3d .card-title-3d h4 small {display: block; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.025em; filter: grayscale(70%);}

  div.card-3d div.card-description-3d {padding: 0 1.2rem 1rem; position: relative; font-size: 1.1rem;}
  div.card-3d div.card-description-3d h5 {font-size: 1.1rem;}
   div.card-3d div.card-description-3d td {padding:0 .5rem;}

  div.card-actions-3d {box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.075); padding: 1rem 1.2rem 1.5rem; text-align: center;}

div.cards-3d div.card-3d div.card-flap {background: darken(var(--white), 15); position: absolute; width: 100%; transform-origin: top; transform: rotateX(-90deg);}

div.cards-3d div.card-3d div.flap1 {transition: all 0.2s 0.3s ease-out; z-index: -1;}
div.cards-3d div.card-3d div.flap2 {transition: all 0.2s 0s ease-out; z-index: -2;}

div.cards-3d.showing div.card-3d {cursor: pointer; opacity: 0.5; transform: scale(0.8);}

div.cards-3d div.card-3d:hover {cursor: pointer;}
div.cards-3d div.card-3d:hover h4 {color: var(--cassiopeia-color-primary); font-weight: 500; letter-spacing: .2rem; }
div.cards-3d.showing div.card-3d:hover {opacity: 0.9;transform: scale(0.9);}

div.card-3d.show {opacity: 1 !important; transform: scale(1) !important;}

div.card-3d div.card-title div.toggle-info-3d {background: var(--white) !important;}
div.card-3d div.card-title div.toggle-info-3d span {top: 1rem;}
div.card-3d div.card-title div.toggle-info-3d span.left {right: 1rem;}
div.card-3d div.card-title div.toggle-info-3d span.right {left: 1rem;}

div.cards-3d.showing div.card-3d.show div.card-flap {background: var(--white); transform: rotateX(0deg);}
div.cards-3d.showing div.card-3d.show div.flap1 {transition: all 0.2s 0s ease-out;}
div.cards-3d.showing div.card-3d.show div.flap2 {transition: all 0.2s 0.2s ease-out;}



/* footer  */
@media screen and (min-width: 768px) {
  .justify-md-end > div > .card {
    width: max-content;
  }
  .justify-md-end > div{
    display: flex;
    justify-content: end;
  }
  .justify-md-end > div > .card > div.text-start , .justify-md-end > div > .card > nav{
    text-align: end !important;
  }
}
.container-footer-top{
  border-top: 2px solid #4c8500;
}
.container-footer-top::before{
  content:"";
  display: block;
  background-image: url("https://hagebau-springe.de/images/kundenordner/hagebau_5cm_3D_4C.jpg");
  background-size:cover;
  height:80px;
  width:80px;
  position: relative;
  left:calc( 50% - 40px );
  top: -40px;
}




/* sidebar menu */
.sidebar {
    max-height: 100vh;
    max-width: 100vw;
    position: fixed;
    right: 0;
    top: 35%;
    z-index: 99999;
    transform:translateX(150px);
}
.sidebar ul.sidebar-items{
  list-style: none none;
  margin: 0;
  padding: 0;

}
.sidebar ul.sidebar-items .sidebar-item {
  /* border:1px solid #3333; */

  padding: 10px 0;
  margin-bottom: 5px;
  transition: all cubic-bezier(.77,0,.18,1) .6s;
  background-color:#24914b;
}
.sidebar ul.sidebar-items .sidebar-item.facebook{
  background-color: #3b579d;
}
.sidebar ul.sidebar-items .sidebar-item.instagram{
  background-color: #d30069;
}
.sidebar ul.sidebar-items .sidebar-item.youtube{
  background-color: #ff0000;
}
.sidebar ul.sidebar-items .sidebar-item:hover {
  transform:translateX(-150px);
}
.sidebar ul.sidebar-items .sidebar-item .sidebar-item-link {
}
.sidebar-item-icon {
  display: inline-block;
}
.sidebar-item-icon i{
  width:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  color:#fff;
}
.sidebar-item-label {
  width:150px;
  display: inline-block;
  color:#fff;
}
@media screen and (max-width: 1480px) {
  .footer{
    padding-bottom: 70px;
  }
}
@media (max-width:575.98px) {
 .container-header .container-nav .container-search,
 .container-header .container-nav nav {
  margin-top:0em;
 }
}