/* ----------------------------------------------------------------
	ASV Menue CSS

-----------------------------------------------------------------*/

/*!
 * ASV Menue)
 * menue-bg
 */

#header .menu-bg {
    width: 300px;
    height: 80px;
    background: #fff;
	}

	#header .menu-bg::after {
		content: "";
		position: absolute;
		left: 100%;
		top: 0;
		bottom: 0;
		background-color: #fff;
		width: 50.5vw;
		z-index: -1;
	}

	#header .menu-bg::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		border-left: 0px solid transparent;
		border-right-width: 80px;
		border-right-style:  solid;
		border-right-color: transparent;
		border-bottom-width: 80px;
		border-bottom-style:  solid;
		border-bottom-color: #079876;
		z-index: 0;
	}

#footer {
	height: 150px;
}


#footer .menu-bg {
    width: 1275px;
    height: 164.4px;
    background: #fff;
	}

	#footer .menu-bg::after {
		content: "";
		position: absolute;
		left: 100%;
		top: 0;
		bottom: 0;
		background-color: #555;
		width: 100vw;
		z-index: -1;
	}

	#footer .menu-bg::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		border-left: 150px solid #079876;
		border-left-width: 150px;
		border-right-style:  solid;
		border-right-color: transparent;
		border-bottom-width: 150px;
		border-bottom-style:  solid;
		border-bottom-color: transparent;
		z-index: 0;
	}

/*! end */


/*!
 * ASV Menue
  */


#top-bar {
    background-color: #045c48;
}

 .top-links-item > a {
      display: block;
      padding: 12px;
      line-height: calc(var(--cnvs-topbar-height) - 24px);
      font-weight: var(--cnvs-topbar-font-weight);
      text-transform: var(--cnvs-topbar-font-transform);
      color: #32c8a5; }

#top-social a {
    display: -ms-flexbox;
    display: flex;
    width: auto;
    overflow: hidden;
    font-weight: bold;
    color: #ccc; }

.menu-item h4 {
		font-weight: 700 !important;
		text-transform: none;
		letter-spacing: 1;
		font-size: 0.9625rem;
        margin-bottom: 0px;
		transition: color .3s ease;}

.menu-item p {
		font-weight: 500 !important;
		text-transform: none;
		letter-spacing: 1;
		font-size: 0.8625rem;
        margin-bottom: 0px;
		transition: color .3s ease;
        color: #454545;
        line-height: 12px;
}


.titel h4 {
    font-weight: 500 !important;
    text-transform: none;
    letter-spacing: 1;
    font-size: 0.9225rem;
    transition: color .3s ease;
    color: #454545;
    background-color: #08b089;
    padding: 8px;
    border-radius: 15px 4px;
    margin-bottom: 5px;
    box-shadow: 0 0 10px 5px rgba(0,0,0,.08);
    
}

.asv-menu h5 {
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1;
    font-size: 1.126225rem;
    color: #fff;
}

.asv-menu h4 {
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: 1;
    font-size: 1.06225rem;
    color: #fff;
}

.asv-menu p {
    font-weight: 600 !important;
    text-transform: none;
    font-size: 0.86225rem;
    color: #045c48;
    line-height: 0.96225rem;
}

.fussball-menu {
   font-size: 1.26225rem;
    color:#fff;
    font-weight: 500;
} 


.block-mega-menu-4 .mega-menu-column .feature-box .fbox-content { padding-right: 0; }

.block-mega-menu-4 .mega-menu-column .feature-box > i {
	line-height: 1.25;
	font-size: 1.1226225rem;
		}

.block-mega-menu-4 .mega-menu-column .feature-box h5 { transition: color .15s linear; }

		/* Color Primary */
.block-mega-menu-4 .mega-menu-column .feature-box.card-primary > i,
.block-mega-menu-4 .mega-menu-column .feature-box.card-primary:hover h5 {
	color: #fff;
		}
.block-mega-menu-4 .mega-menu-column .feature-box.card-primary::before {
	background-color: #282828;
		}


.menu-container > .menu-item > .menu-link {
		font-weight: 700 !important;
		text-transform: none;
		letter-spacing: 1;
		font-size: 0.9225rem;
		transition: color .3s ease;}
    
 .is-expanded-menu .sub-menu-container,
 .is-expanded-menu .mega-menu-content {
	box-shadow: 0 0 10px 5px rgba(0,0,0,.08);
	border-radius: 20px;
	padding: 5px;
		}

.is-expanded-menu .mega-menu-column .sub-menu-container {
	padding: 0;
        }

.is-expanded-menu .sub-menu-container .menu-item > .menu-link {
	font-weight: 500;
	border-radius: 0px;
    color:#fff;
    text-transform: none;
		}

.is-expanded-menu .sub-menu-container .menu-item:hover > .menu-link {
	font-weight: 500;
    color:#fff;
    background-color: #08b089;
    box-shadow: 0 0 10px 5px rgba(0,0,0,.08);
    border-radius: 15px 4px;
		}

 .is-expanded-menu .mega-menu-content .sub-menu-container + .sub-menu-container {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
        }


.is-expanded-menu .mega-menu-full .mega-menu-content {
    width: 92rem;
    left: 390px;
    transform: none; }


.is-expanded-menu .mega-menu-small .mega-menu-content {
	left: 30rem;
	width: 50rem;
	transform: none;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}

  .sub-menu-container .menu-item > .menu-link {
    position: relative;
    padding: 5px 5px;
    font-size: 0.9025rem;
    color: #fff; 
    font-weight: 500;
    text-transform: none;  
    
    }
    
  .sub-menu-container .menu-item > .menu-link div {
    position: relative; }

body:not(.is-expanded-menu) .mega-menu-content .sub-menu-container {
    border-top: none; }




.cnvs-hamburger {
  hamburger-size: 1.825rem;
  hamburger-width: 2px;
  hamburger-offset: calc(-1 * calc(calc(var(hamburger-size) - calc(var(hamburger-width) * 2)) * .3));
  display: block;
  position: relative;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: visible; }

  .cnvs-hamburger .cnvs-hamburger-box {
    width: var(hamburger-size);
    height: var(hamburger-size);
    display: block;
    position: relative; }

  .cnvs-hamburger .cnvs-hamburger-inner {
    display: block;
    top: 50%;
    margin-top: calc(-1 * calc(var(hamburger-width) * .5));
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .cnvs-hamburger .cnvs-hamburger-inner, .cnvs-hamburger .cnvs-hamburger-inner::before, .cnvs-hamburger .cnvs-hamburger-inner::after {
      width: var(hamburger-size);
      height: var(hamburger-width);
      background-color: #079876;
      position: absolute;
      transition-property: transform;
      transition-duration: 0.15s;
      transition-timing-function: ease; }

    .cnvs-hamburger .cnvs-hamburger-inner::before, .cnvs-hamburger .cnvs-hamburger-inner::after {
      content: "";
      display: block;
      background-color: #079876;}

    .cnvs-hamburger .cnvs-hamburger-inner::before {
      top: var(hamburger-offset);
      transition: top 0.075s 0.12s ease, opacity 0.075s ease; }

    .cnvs-hamburger .cnvs-hamburger-inner::after {
      bottom: var(hamburger-offset);
      transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .primary-menu-trigger-active .cnvs-hamburger .cnvs-hamburger-inner {
      transform: rotate(45deg);
      transition-delay: 0.12s;
      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

      .primary-menu-trigger-active .cnvs-hamburger .cnvs-hamburger-inner::before {
        top: 0;
        opacity: 0;
        transition: top 0.075s ease, opacity 0.075s 0.12s ease; }

      .primary-menu-trigger-active .cnvs-hamburger .cnvs-hamburger-inner::after {
        bottom: 0;
        transform: rotate(-90deg);
        transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }



/*! end */

/*!
 * ASV Menue
 * Responsive ab 1400px
  */


@media (min-width: 2400px) {
    
    #footer .menu-bg {
    width: 1690px;
    height: 175px;
    background: #fff;
	}

	
   .asv-menue-wrap {
  padding-left: 150px;
  padding-right: 150px; }
    }

@media (min-width: 2000px) {
    
    #footer .menu-bg {
    width: 1355px;
    height: 175px;
    background: #fff;
	}

	
   .asv-menue-wrap {
  padding-left: 150px;
  padding-right: 150px; }
    }
/*! end */

/*!
 * ASV Menue
 * Responsive ab 1280px
  */

@media (max-width: 1300px) {
    
#header .menu-bg {
    width: 180px;
	}
    
.menu-container > .menu-item > .menu-link::after {
		height: 7px;
		}  
    
    .sub-menu-container .menu-item > .menu-link {
     padding: 8px 5px;
    font-size: 0.75rem;
    }
    
.menu-container > .menu-item > .menu-link {
		font-size: 0.75rem;
    }
    
  
    }
/*! end */

/*!
 * ASV Menue
 * Responsive ab 1180px
  */
@media (max-width: 1200px) {
    
    
#header .menu-bg {
    width: 40px;
	}
    
    
#header .menu-bg::after {
		left: -20px;
		width: 82.4vw;
	} 
    
 #header .menu-bg::before {
		left: -20px;
		border-right-width: 40px;
		border-bottom-width: 80px;
	}


   #header-wrap #logo img {
    height: 70px;
    padding-left: 3px;}
    
 #footer {
	height: 100px;
}

    
 #footer .menu-bg::after {
		left: 100%;
	}

	#footer .menu-bg::before {
		border-left: 0px solid #079876;
		border-left-width: 50px;
		border-bottom-width: 100px;
		 }

#footer .menu-bg {
    width: 855px;
    height: 100px;
    }
    
    
    
    
    .social-icon.si-small {
    width:  1.98625rem;
    height:  1.98625rem;}

    .social-icon i {   
    line-height: 1.9rem;}
    
    .social-icon:hover i {   
    line-height: 1.9rem;}
    
    .titel h4 {
		font-size: 0.8225rem;
}
    
    .menu-item h4 {
		font-size: 0.8625rem; }

.menu-item p {
		font-size: 0.7625rem; }
    
.menu-container > .menu-item > .menu-link::after {
		height: 7px;
		}  
    
 .sub-menu-container .menu-item > .menu-link {
     padding: 8px 5px;
    font-size: 0.8225rem;
    }
    
.menu-container > .menu-item > .menu-link {
		font-size: 0.82rem;
    }
    
    
.is-expanded-menu .mega-menu-small .mega-menu-content {
	left: 20rem;
	width: 40rem;
    } 
    
    
    .is-expanded-menu .mega-menu-full .mega-menu-content {
    width: 69.0625rem;
    left: 11px;
    transform: none; }
    
    
    .asv-menu h5 {
   font-size: 0.96225rem;
}

.asv-menu h4 {
    font-size: 0.96225rem;
}

.asv-menu p {
    font-size: 0.76225rem;
    line-height: 0.86225rem;
}
    
.fussball-menu {
   font-size: 0.96225rem;
}    
    
    }
/*! end */



/*!
 * ASV Menue
 * Responsive ab 1028px
  */

@media (max-width: 1030px) {
    
    
#header .menu-bg {
    width: 40px;
	}
    
    
#header .menu-bg::after {
		left: 0;
		width: 82.4vw;
	} 
    
    #header .menu-bg::before {
		border-right-width: 40px;
		border-bottom-width: 80px;
	}

   #header-wrap #logo img {
    height: 60px;
    padding-left: 2px;}
    
 #footer {
	height: 100px;
}

    
 #footer .menu-bg::after {
		left: 100%;
	}

	#footer .menu-bg::before {
		border-left: 0px solid #079876;
		border-left-width: 50px;
		border-bottom-width: 100px;
		 }

#footer .menu-bg {
    width: 755px;
    height: 100px;
    }
    
    
    
    
    .social-icon.si-small {
    width:  1.68625rem;
    height:  1.68625rem;}

    .social-icon i {   
    line-height: 1.5rem;}
    
    .social-icon:hover i {   
    line-height: 1.775rem;}
    
    .titel h4 {
		font-size: 0.8225rem;
}
    
    .menu-item h4 {
		font-size: 0.8625rem; }

.menu-item p {
		font-size: 0.7625rem; }
    
.menu-container > .menu-item > .menu-link::after {
		height: 7px;
		}  
    
 .sub-menu-container .menu-item > .menu-link {
     padding: 8px 5px;
    font-size: 0.8225rem;
    }
    
.menu-container > .menu-item > .menu-link {
		font-size: 0.72rem;
    }
    
    
.is-expanded-menu .mega-menu-small .mega-menu-content {
	left: 20rem;
	width: 40rem;
    } 
    
    
    .is-expanded-menu .mega-menu-full .mega-menu-content {
    width: 61.5625rem;
    left: 11px;
    transform: none; }
    
    
    .asv-menu h5 {
   font-size: 0.96225rem;
}

.asv-menu h4 {
    font-size: 0.96225rem;
}

.asv-menu p {
    font-size: 0.76225rem;
    line-height: 0.86225rem;
}
    
.fussball-menu {
   font-size: 0.96225rem;
}    
    
    }
/*! end */


/*!
 * ASV Menue
 * Responsive ab 998px
  */

@media (min-width: 998px) {
    
    .dark {  
    color: #079876;
    }
    
 .menu-item> .menu-link {
    color: #045c48;
    line-height: 22px;
    font-weight: 700;
    font-family: "poppins", sans-serif;
       } 

     .menu-item.current > .menu-link {  
    color: #079876;
    }
    
     .menu-container > .menu-item > .menu-link:hover {
		color: #079876 !important;
         
	}
    
    
    .menu-container > .menu-item > .menu-link::after {
		opacity: 0;
		content: '';
		position: absolute;
		background: #079876;
		height: 10px;
		bottom: 4px;
		left: 50%;
		width: 0;
		transform: translateX( -50% );
		-webkit-transition: all 0.25s ease;
		-o-transition: all 0.25s ease;
		transition: all 0.25s ease;
        border-radius: 15px 4px;
	}

	.menu-container > .menu-item.current > .menu-link::after,
	.menu-container > .menu-item:hover > .menu-link::after {
    opacity: 1;
    width: 100%;
	}
    
    }


@media (min-width: 992px) {
			

			.block-mega-menu-4 .mega-menu-column {
				max-height: calc(100vh - 101px);
				overflow: auto;
			}

			.block-mega-menu-4 .hover-opacity .feature-box {
				transition: opacity .2s ease;
				will-change: opacity;
			}

			.block-mega-menu-4 .hover-opacity:hover .feature-box:not(:hover) {
				opacity: .3;
			}

			.block-mega-menu-4 .mega-menu-column .feature-box::before {
				content: "";
				opacity: 0;
				position: absolute;
				background-color: #fff;
				width: 100%;
				top: -20px;
				left: -20px;
				border-radius: 30px 10px;
				height: calc(100% + 40px);
				width: calc(100% + 40px);
				transform: scale(.875);
				transition: transform .2s linear;
                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
			}

			.block-mega-menu-4 .mega-menu-column .feature-box:hover::before {
				opacity: .20;
				transform: scale(0.95);
			}
		}

/*! end */

/*!
 * ASV Menue
 * Responsive ab 768px
 * Smartphone
  */

@media (max-width: 768px) {
    
#header {
	height: 80px;
}
    
 #header-wrap #logo img {
    height: 80px;
    padding-left: 5px;}
    
  .asv-item {
   display: none
	}
    
    .menu-container {
        background-color: #353535;
    }
    
     #header .menu-bg {
    width: 175px;
	}
    
    #header .menu-bg::after {
		content: "";
		position: absolute;
		left: 100%;
		top: 0;
		bottom: 0;
		background-color: #353535;
		width: 80vw;
		z-index: -1;
	}

	#header .menu-bg::before {
		content: "";
		position: absolute;
		top: 0px;
		left: 205px;
		border-left: 0px solid transparent;
		border-right-width: 80px;
		border-right-style:  solid;
		border-right-color: transparent;
		border-bottom-width: 80px;
		border-bottom-style:  solid;
		border-bottom-color: #079876;
		z-index: 0;
	}
    
  
    
   .menu-item.current > .menu-link {
        font-weight: 500;
       border-radius: 0px;
        color:#353535;
        background-color: #08b089;
    }
    
    .menu-container > .menu-item:hover > .menu-link {
	    font-weight: 500;
	    border-radius: 0px;
        color:#353535;
        background-color: #08b089;
	}
    
    .sub-menu-container .menu-item > .menu-link {
        padding: 8px 5px;
        font-size: 0.85rem;
    }
    
    .sub-menu-container .menu-item:hover > .menu-link {
	    font-weight: 500;
	    border-radius: 5px;
        color:#353535;
        background-color: #08b089;
        margin-right: 20px;
		}
    
   .menu-container .mega-menu-title > .menu-link {
    background-color: #888;
    color: #fff;
    border-radius: 5px;
    }
    
    .menu-item h4 {
		font-size: 0.8625rem;
        }

.menu-item p {
		
		font-size: 0.7625rem;
        margin-bottom: 0px;
		transition: color .3s ease;
         color: #08b089;
    }
 
    }

@media (max-width: 576px) {
    
  #header .menu-bg {
    width:100px;
	}
    
    #header .menu-bg::after {
		content: "";
		position: absolute;
		left: 0%;
		top: 0;
		bottom: 0;
		background-color: #fff;
        width: 0vw;
		z-index: -1;
	}

	#header .menu-bg::before {
		content: "";
		position: absolute;
		top: 0px;
		left: 96px;
		border-left: 120px solid transparent;
		border-right-width: 54px;
		border-right-style:  solid;
		border-right-color: #fff;
		border-bottom-width: 80px;
		border-bottom-style:  solid;
		border-bottom-color: transparent;
		z-index: 0;
	}
    
    
    .primary-menu-trigger, #page-menu-trigger {
    padding: 0.15rem;
  }

#footer {
	height: auto;
}
    
#footer .menu-bg {
    width: auto;
    height: auto;
    }

    #footer .menu-bg::before {
		border-left-width: 0px;
		border-bottom-width: 0px;
		
	}
		
	}