/************************* Navigation ******************************************
			
			01. Variabelen
			02. Typografie
			03. Navigation
			04. Buttons
			05. Font Icon
			06. Lightbox
			07. Image Map
			08. Newslist
			09. Newsreader
			10. Über uns
			11. Zahlen und Fakten
			12. Geschichte
			13. Tabelle
			14. Galerie 
			
			
			20. Footer
			21. Bottom





********************************************************************************/

/*************************** 00. Globales **************************************/
/*damit der body nicht überscrollt wird*/
html, body {
    overscroll-behavior: none;
}

html, body {
  overflow-x: hidden !important; 
}

.top-link .progress-ring circle,
.top-link{
	display: none;
}

/*** alle Bilder runde Ecken ***/
/*spezifisch wo kein*/
.ce_image.no-border-radius .image_container img,
.image_container img,
.ce_countup.no-border-radius .image_container img{
	border-radius: 0px;
}

.ce_image .image_container img,
.image_container img{
	border-radius: 15px;
}

/*** 2 Bilder Collage ***/
.ce_image_collage_2pics.style2 .image_1 {
	 grid-column: 7 / span 12;
	 padding-top: 83%;
	 border-radius: 20px;
}
.ce_image_collage_2pics.style2 .image_2 img,
.ce_image_collage_2pics.style2 .image_1 img{
	transform: translateX(0) translateY(0) rotate(0deg);
}



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

/************************* 01. Variabelen **************************************/
:root {
	--accent-color: #a2bf1a;
	--second-color: #03613d;
	--green-one:	#28a94f;
	--green-two:	#bbd9a5;
	--green-three:	#f3e8cb;
	--icon-h2:		rgba(243,232,203,0.5)
}

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

/************************* 02. Typografie **************************************/
body h1, body .h1, body h2, body .h2, body h3, body .h3, body h4, body .h4, body h5, body .h5, body h6, body .h6{
	font-family: museo, serif;
	font-weight: 700;
	font-style: normal;
}

body h1, body .h1{
	font-size:	6.5rem;
	line-height: 6.5rem;
	z-index: 555555;
}

body h2,
body .h2{
	font-size:	3.5rem;
	line-height: 4rem;
	color: var(--second-color);
}

body h3,
body .h3{
	font-size: 3.5rem;
	color: var(--accent-color);
}

body h4,
body .h4{
	font-size: 3rem;
	color: var(--accent-color);
}

body h5,
body .h5{
	margin-bottom: 10px;
	font-size: 1.6rem;
}


body h6 ,
body .h6 {
	font-size: 1.4rem;
	color: var(--accent-color);
	margin-bottom: 10px;
	font-family: museo-sans, sans-serif;
}


body p,
body span,
body a,
.date{
	font-family: museo-sans, sans-serif;
	font-weight: 300;
	font-style: normal;
	
}

body p{
	color: #000000;
	font-size: 1.2rem;
}

body p a {
	color: var(--second-color);
}

.ce_teambox .function {
	font-family: museo-sans, sans-serif;
	font-size: 1.2rem;
	font-weight: 300;
}

.ce_timeline .timeline-item .timeline-item-title {
	font-family: museo, serif;
}

@media only screen and (max-width: 1200px) {
  body h1{
	font-size: 4rem;
	line-height: 4rem;
  }
  body h2,
  body .h2{
  	font-size: 3.5rem;
  	line-height: 4rem;
  }
  body h3,
  body .h3{
  	font-size: 3rem;
  	line-height: 3.5rem;
  }
  body h4,
  body .h4{
  	font-size: 2.5rem;
	line-height: 3rem;
  }
  body h5,
  body .h5,
  body h6,
  body .h6{
  	font-size: 1.4rem;
	line-height: 3rem;
	margin-bottom: 2px;
  }
}

@media only screen and (max-width: 764px) {
  body h1{
	font-size: 3.5rem;
	line-height: 4rem;
  }
  body h2,
  body .h2{
  	font-size: 2.5rem;
  	line-height: 3rem;
  }
  body h3,
  body .h3{
  	font-size: 3rem;
  	line-height: 3.5rem;
  }
  body h4,
  body .h4{
  	font-size: 2.5rem;
	line-height: 3rem;
  }
  body h5,
  body .h5{
  	font-size: 1.6rem;
	line-height: 3rem;
  }
  
  body h6,
  body .h6 {
  	font-size: 1.1rem;
	line-height: 2rem;
	margin-bottom: 2px;
  }
}

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

/******************************** 03. Navigation *******************************/
.logo a {
	width: 110%;
    height: 170%;
}

@media only screen and (max-width: 764px) {
	.logo a{
		width: 90%;
	    height: 95%
	}
  .header .logo {
        padding-left: 15px;
    }	
    
}


  



.stickyheader .logo a{
	width: 100%;
    height: 100%;
}

#header .inside {
	max-width: 90%;
}

#stickyheader .logo {
	min-height: 40px;
}

.header .mainmenu ul li a.a-level_1.trail span, .header .mainmenu ul li a.a-level_1.active span {
	 border-bottom: none;
}

.header .mainmenu ul li a.a-level_1.trail span:after, /*da mit border-botton keine abgerundete ecken möglich sind*/
.header .mainmenu ul li a.a-level_1.active span:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 2.5px;
  background-color: #a2bf1a;
  border-radius: 2px; 
}

/* TabletMenu -> Body fixieren*/


body.smartmenu_open div.body,
body.smartmenu_open .stickyheader{
  transform: translateX(0);
  padding-top: 0;
  
}

body.smartmenu_open div.body::before,
body.smartmenu_open div.stickyheader:before{
    content: ""; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    0% {
        background-color: rgba(0, 0, 0, 0); 
    }
    100% {
        background-color: rgba(0, 0, 0, 0.5); 
    }
}

/*** Mobile Navigation ***/
@media only screen and (max-width: 767px) {
.smartmenu{
	display: block;
}
.smartmenu-content{
	width: 80vw;
}

#header .inside {
  margin-right: auto;
  position: absolute;
  min-width: 95%;
}

#mmenu,
.mmenu_trigger{
	display: none;
}

#header .inside {
	margin-right: auto;
}
}

#stickyheader .header .smartmenu .smartmenu-trigger .line,
#stickyheader .header .smartmenu .smartmenu-trigger .line:before,
#stickyheader .header .smartmenu .smartmenu-trigger .line:after{
	background-color: var(--second-color);
}

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

/********************************* 04. Buttons *********************************/
.ce_hyperlink a {
	font-size: 17px;
	background: none;
	/*box-shadow: 5px 5px 10px rgba(0,0,0,0.1);*/
	color: rgba(255,255,255,1);
	padding: 10px 25px;
	border-radius: 35px;
	border:  solid 2px white;
	transition:	ease 0.3s;
	font-family: museo-sans, sans-serif;
	font-weight: 500;
	font-style: normal;
}

.ce_hyperlink a:hover {
	background-color: white;
	color: var(--second-color);
	opacity: 1;
}

.second-color a{
	color: var(--second-color);
	border: solid 2px var(--second-color);
}


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

/******************************** 05. Font Icon ********************************/
/*Font Icon*/
p a[href^="tel:"],
p a[href^="mailto:"]{
	position: relative;
	padding-left: 25px;
	transition: ease 0.2s;
	color: var(--second-color);
	transition: 0.3s ease;
}

p a[href^="tel:"]:hover,
p a[href^="mailto:"]:hover{
  color: var(--accent-color);
}


p a[href^="tel:"]:before,
p a[href^="mailto:"]:before,
p a[href^="tel:"]:after,
p a[href^="mailto:"]:after{ 
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    left: 0;
    bottom: 0;
    transform: translateY(-2.5px);
    background-color: var(--second-color);
    mask-size: contain;
    -webkit-mask-size: contain;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: ease 0.3s;
    padding-left: 5px;
    transition: 0.3s ease;
}

#footer p a[href^="tel:"]:before,
#footer p a[href^="mailto:"]:before{
	background-color: white;
}

#footer p a[href^="tel:"]:before {
	margin-top: 0;
}

p a[href^="tel:"]:before {
	mask: url("/files/gvz/icons/phone-light.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/phone-light.svg") no-repeat center;
	opacity: 1;
}

p a[href^="tel:"]:after {
	mask: url("/files/gvz/icons/phone-solid.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/phone-solid.svg") no-repeat center;
	opacity: 0;
}

p a[href^="mailto:"]:before{
	mask: url("/files/gvz/icons/envelope-light.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/envelope-light.svg") no-repeat center;
	opacity: 1;
}

p a[href^="mailto:"]:after{
	mask: url("/files/gvz/icons/envelope-solid.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/envelope-solid.svg") no-repeat center;
	opacity: 0;
}

p a[href^="tel:"]:hover:before {
	mask: url("/files/gvz/icons/phone-light.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/phone-light.svg") no-repeat center;
	opacity: 0;
}
p a[href^="tel:"]:hover:after {
	mask: url("/files/gvz/icons/phone-solid.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/phone-solid.svg") no-repeat center;
	opacity: 1;
}

p a[href^="mailto:"]:hover:before{
	mask: url("/files/gvz/icons/envelope-light.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/envelope-light.svg") no-repeat center;
	opacity: 0;
}

p a[href^="mailto:"]:hover:after{
	mask: url("/files/gvz/icons/envelope-solid.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/envelope-solid.svg") no-repeat center;
	opacity: 1;
}

#main p a[href^="tel:"]:hover:after,
#main p a[href^="mailto:"]:hover:after {
	background-color: var(--accent-color);
}

#footer p a[href^="tel:"]:hover:after,
#footer p a[href^="mailto:"]:hover:after {
	background-color: #fff;
}

.externe-links a{
	position: relative;
	transition: 0.3s ease;
}

.externe-links a:after {
	content:"";
	position: absolute;
	width: 16px;
	height: 16px;
	bottom: 0;
	right: -25px;
	margin-bottom: 1px;
	background-color: white;
	mask: url("/files/gvz/icons/arrow-up-right-light.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/arrow-up-right-light.svg") no-repeat center;
	transition: opacity 0.3s ease, transform 0.3s ease;
}


#main .externe-links a:after {
	background-color: var(--second-color);
}

#main .externe-links a:hover:after {
	transform: rotate(45deg);
	background-color: var(--accent-color);
}

#main .externe-links a:hover {
	color: var(--accent-color);
}

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

/********************************
Headline Icon
********************************/
/*auf Wunsch von Moni Icons bei Headline weg
.mod_article:not(.fullwidth) > .container {
	z-index: 55; 
}

.icon-left {
	position: relative;
}

.icon-left:before{
	position: absolute;
	content: "";
	width: 90px;
	height: 90px;
	top: -45px;
	left: -45px;
	z-index: -55;
	background-color: var(--icon-h2);
}

.green:before{
	background-color: rgba(187,217,165,0.5);	
}

.carrot:before{
	mask: url("/files/gvz/icons/carrot-light.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/carrot-light.svg") no-repeat center;

}

.tomato:before {
	mask: url("/files/gvz/icons/tomato-light.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/tomato-light.svg") no-repeat center;
}

.seedling:before {
	mask: url("/files/gvz/icons/seedling-light.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/seedling-light.svg") no-repeat center;
	width: 150px; for Headline h1
	height: 150px;
	top: -70px;
	left: -70px;
}*/



/******************************** 06. Lightbox *********************************/
#cboxCurrent { /*image 2 of 5 ausblenden*/
	display: none !important;
}

#cboxLoadedContent { /*schwarzer border weg*/
 border: 0;
}

#cboxClose { /*neues Icon laden*/
  background: url(/files/gvz/icons/xmark.svg) no-repeat center center;
  width: 25px;
  height: 25px;
  top: -40px;
  right: 0;
}

#cboxNext,
#cboxPrevious{
  width: 50px;
  height: 55px;
}
#cboxNext {
	background: url(/files/gvz/icons/angle-right-thin.svg) no-repeat center center;
	background-color: rgba(255,255,255,0.7);
	right: 0;
}

#cboxPrevious {
  background: url(/files/gvz/icons/angle-left-thin.svg) no-repeat center center;
  background-color: rgba(255,255,255,0.7);
  left: 0;
}

#cboxNext:hover,
#cboxPrevious:hover {
    background-position: center center;
}


#colorbox, #cboxOverlay, #cboxWrapper {
  overflow: visible;
}

@media only screen and (max-width: 767px) {
  #cboxClose { 
    width: 15px;
    height: 15px;
    top: -30px;
  }
  
  #cboxNext,
  #cboxPrevious{
  width: 20px;
  height: 30px;
  transform: translateY(50%);
  }
}

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

/******************************** 07. Image Map ********************************/
.ce_imagemap .hotspot {
	display: block !important;
}

.ce_imagemap .hotspot_content h5 {
	color: var(--accent-color);
}

.ce_imagemap .hotspot_content.center {
	text-align: left;
	padding: 20px;
	border-radius: 8px 8px 8px 8px;
}

.ce_imagemap .hotspot.active .hotspot_content{
	width: 400px;
}

.hotspot_content p{
	padding: 0px 5px;
	font-size: 1rem;
	color: #777777;
}

@media only screen and (max-width: 767px) {
.ce_imagemap .hotspot.active .hotspot_content{
	width: 100%;
}

.hotspot_content p{
	font-size: 10.5px;

}
}
.hotspot_content p.betriebe,
.hotspot_content p.konventionell,
.hotspot_content p.bio,
.hotspot_content p.gewaechshaus,
.hotspot_content p.gesamt-anbau{
	position: relative;
	padding-left: 30px;
}

.hotspot_content p.betriebe:after,
.hotspot_content p.konventionell:after,
.hotspot_content p.bio:after,
.hotspot_content p.gewaechshaus:after,
.hotspot_content p.gesamt-anbau:after{
	content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 0;
    top: 0;
    padding-top: 3px;
    background-color: var(--second-color);
    cursor: pointer;
    transition: ease 0.3s;
    padding-left: 5px;
    

}

.hotspot_content p.betriebe:after {
	    mask: url("/files/gvz/icons/tractor-light.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/tractor-light.svg") no-repeat center;
}

.hotspot_content p.konventionell:after {
	    mask: url("/files/gvz/icons/konvwntionelle-landwirtschaft.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/konvwntionelle-landwirtschaft.svg") no-repeat center;
}

.hotspot_content p.bio:after {
	    mask: url("/files/gvz/icons/bio-suisse.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/bio-suisse.svg") no-repeat center;
}

.hotspot_content p.gewaechshaus:after {
	mask: url("/files/gvz/icons/gewaechshaus.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/gewaechshaus.svg") no-repeat center;
}

.hotspot_content p.gesamt-anbau:after {
	mask: url("/files/gvz/icons/field-size.svg") no-repeat center;
	-webkit-mask: url("/files/gvz/icons/field-size.svg") no-repeat center;
}

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

/********************************* 08. Newslist ********************************/
.mod_newslist {
	overflow: visible;
	padding: 5px 0px;
}
.newslist-v4 .info{
	display: none;
}

.mod_newslist_v4 {
    align-items: stretch;
    overflow: visible;
}

.mod_newslist_v4 > .newslist-v4 {
    display: flex;
    flex-wrap: wrap;
}


.newslist-v4-inside {
    display: flex;
    flex-direction: column;
    height: 100%;
    
    transition: 
    box-shadow 0.3s ease,
    border-radius 0.3s ease,
    transform 0.3s ease;
}


.newslist-v4 {
    overflow: visible;
}

.newslist-v4-inside .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border: 0px;
}

.newslist-v4-inside .link {
    margin-top: auto;
}

.newslist-v4 .newslist-v4-inside {
	border-radius: 20px;
}

.newslist-v4:hover .newslist-v4-inside{
	box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
	transform: translateY(-3px);
}

.newslist-v4:hover {
	opacity: 1;
}

.h6 a {
	color: var(--second-color);
	font-weight: 700;
}

@media only screen and (max-width: 1200px) { 
	.newslist-v4 {
		flex: 1 1 calc(50% - 20px);
	}
	.mod_newslist_v4 > .newslist-v4 {
    	max-width: 50%;
}
}

@media only screen and (max-width: 767px) { 
	.mod_newslist_v4 > .newslist-v4 {
    	max-width: 100%;
}
}

.newslist-v4 {
    position: relative;
    cursor: pointer;
}

.newslist-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.aktuelles .newslist-v4 .content,
.aktuelles .newslist-v4 .image_container{
	background-color: rgba(247,247,247,1) !important;
}

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


/******************************** 09. Newsreader *******************************/
.newsreader .info {
	background: none;
	padding: 0;
	margin-bottom: 15px;
}

.newsreader .info .date{
	font-size: 1rem;
	color: var(--accent-color);
	font-weight: 400;
}

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

/********************************* 10. Über uns ********************************/
#article-14622 .function {
	margin-bottom: 0;
}

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

/******************************** 11. Zahlen und Fakten ************************/
.bg-white .ce_bgimage-image {
	background-size: contain !important;
}

.bg-white {
	background-color: #f8f8f8;
}

.count-up .headline.h3 {
	color: #000000;
	font-size: 3.4rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.count-up .headline.h3{
		font-size: 25px;
	}
}


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

/******************************* 12. Geschichte ********************************/
.ce_timeline .timeline-item img{
	border-radius: 15px;
}

.ce_timeline:before,
.ce_timeline .timeline-item i,
.ce_timeline .timeline-item .timeline-item-title:before,
.ce_timeline i.last-point{
	background: var(--second-color);
}

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

/*********************************** 13. Tabelle *******************************/
tbody tr {
	border-bottom: solid 1px var(--second-color);
	
}

tbody tr td {
	padding: 5px;
	color: black;
}



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

/*********************************** 14. Galerie *******************************/
/*.ce_gallery.block {
	overflow: visible;
}*/

.ce_gallery .gallery-margin .image_container {
	margin: 0 5px 3px;
}

.ce_gallery .content {
	border-radius: 15px;
}


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

/*********************************** 20. Footer ********************************/
/*footer effekt*/
body {
    margin-bottom: 499px;
}

@media only screen and (max-width: 767px) {
		body {
	    margin-bottom: 0;
	}
	#footer,
	#bottom {
		position: relative !important;
        height: auto !important;
        overflow: visible !important;
	}
}

#footer {
	background-color: var(--second-color);
	position: fixed;
	bottom: 0;
	height: 500px;
	width: 100%;
}


#footer p,
#footer p a{
	font-size: 16px;
	font-weight: 300;
	color: white !important;
}

#footer p a{
	font-weight: 700;
	/*border-bottom: solid 1px white;*/
}

#footer h4 {
	font-size: 1.5rem !important;
	line-height: 1.7rem;
	color: #f3e8cb;
}

#footer .ce_text {
	overflow: visible;
}

#footer .inside {
	padding-top: 20px;
}

#footer .externe-links {
	border-bottom: 0.8px solid rgba(243,232,203,1);
	padding: 5px 0;
	margin: 0;
}

#footer .externe-links:first-child {
	border-top: 0.8px solid rgba(243,232,203,1);
}

#footer .inside img {
	border-radius: 15px;
}

#footer .totop {
	display: none;
}

#footer .mod_socials a i {
	background: none;
}

#footer .fa-facebook:before,
#footer .fa-instagram:before {
	color: white;
}

#footer .footer-qualitaetslogo.autogrid_row>.column {
	padding-left: 0px;
}

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



/*********************************** 21. Bottom ********************************/
#bottom {
	background-color: var(--second-color);
	border-top: none;
	position: fixed;
	bottom: 0;
	width: 100%;
}

#bottom .inside .left,
#bottom .inside .right a{
	font-family: museo-sans, sans-serif;
	font-weight: 500;
	color: white;
}

#bottom .inside .right a {
	color: #f3e8cb;
}

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