/*  ---------------------------  general styling + animations ---------------------------*/
.hz-button-row {
	column-gap: 10px;
    row-gap: 10px;
}
	
.hz-button-1, 
.hz-button-1-right, 
.hz-button-1-down, 
.hz-button-2, 
.hz-button-2-right, 
.hz-button-2-down, 
.hz-button-3,
.hz-button-3-right,
.hz-button-3-down,
.hz-button-3-small,
.hz-button-3-small-right,
.hz-button-3-small-down,
.hz-button-4, 
.hz-button-4-right,
.hz-button-4-down,
.hz-button-5, 
.hz-button-5-right,
.hz-button-5-down,
.hz-button-6, 
.hz-button-6-right,
.hz-button-6-down,
.hz-button-7, 
.hz-button-7-right,
.hz-button-7-down,
.hz-button-yellow, 
.hz-button-yellow-right,
.hz-button-yellow-down
{
  display: inline-block;
  align-items: center;
  position: relative;
  font-family: Roboto;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 16px 20px 14px 0px;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
  color: white !important;
  min-width:250px;
  max-width: 94vw;
}

.hz-button-1::before, 
.hz-button-1-right::before, 
.hz-button-1-down::before, 
.hz-button-2::before, 
.hz-button-2-right::before, 
.hz-button-2-down::before, 
.hz-button-3::before,
.hz-button-3-right::before,
.hz-button-3-down::before,
.hz-button-3-small::before,
.hz-button-3-small-right::before,
.hz-button-3-small-down::before,
.hz-button-4::before, 
.hz-button-4-right::before, 
.hz-button-4-down::before, 
.hz-button-5::before, 
.hz-button-5-right::before, 
.hz-button-5-down::before,
.hz-button-6::before, 
.hz-button-6-right::before, 
.hz-button-6-down::before,
.hz-button-7::before, 
.hz-button-7-right::before, 
.hz-button-7-down::before,
.hz-button-yellow::before, 
.hz-button-yellow-right::before, 
.hz-button-yellow-down::before 
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 100%;
  transition: all 0.3s ease;
  z-index: 1;
}

.hz-button-1:hover::before, 
.hz-button-1-right:hover::before, 
.hz-button-1-down:hover::before, 
.hz-button-2:hover::before, 
.hz-button-2-right:hover::before, 
.hz-button-2-down:hover::before, 
.hz-button-3:hover::before,
.hz-button-3-right:hover::before,
.hz-button-3-down:hover::before,
.hz-button-3-small:hover::before,
.hz-button-3-small-right:hover::before,
.hz-button-3-small-down:hover::before,
.hz-button-4:hover::before, 
.hz-button-4-right:hover::before, 
.hz-button-4-down:hover::before, 
.hz-button-5:hover::before, 
.hz-button-5-right:hover::before, 
.hz-button-5-down:hover::before,
.hz-button-6:hover::before, 
.hz-button-6-right:hover::before, 
.hz-button-6-down:hover::before,
.hz-button-7:hover::before, 
.hz-button-7-right:hover::before, 
.hz-button-7-down:hover::before,
.hz-button-yellow:hover::before, 
.hz-button-yellow-right:hover::before, 
.hz-button-yellow-down:hover::before 
{
  width: 14px;
}

.hz-button-1 .b-typography\.paragraph, 
.hz-button-1-right .b-typography\.paragraph, 
.hz-button-1-down .b-typography\.paragraph, 
.hz-button-2 .b-typography\.paragraph, 
.hz-button-2-right .b-typography\.paragraph, 
.hz-button-2-down .b-typography\.paragraph, 
.hz-button-3 .b-typography\.paragraph,
.hz-button-3-right .b-typography\.paragraph,
.hz-button-3-down .b-typography\.paragraph,
.hz-button-3-small .b-typography\.paragraph,
.hz-button-3-small-right .b-typography\.paragraph,
.hz-button-3-small-down .b-typography\.paragraph,
.hz-button-4 .b-typography\.paragraph, 
.hz-button-4-right .b-typography\.paragraph, 
.hz-button-4-down .b-typography\.paragraph, 
.hz-button-5 .b-typography\.paragraph, 
.hz-button-5-right .b-typography\.paragraph, 
.hz-button-5-down .b-typography\.paragraph,
.hz-button-6 .b-typography\.paragraph, 
.hz-button-6-right .b-typography\.paragraph, 
.hz-button-6-down .b-typography\.paragraph,
.hz-button-7 .b-typography\.paragraph, 
.hz-button-7-right .b-typography\.paragraph, 
.hz-button-7-down .b-typography\.paragraph,
.hz-button-yellow .b-typography\.paragraph, 
.hz-button-yellow-right .b-typography\.paragraph, 
.hz-button-yellow-down .b-typography\.paragraph 
{
  flex-grow: 1;
  padding-left: 1.5rem;
  padding-right: 0; 
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: transform 0.3s ease;
  z-index: 2;
  box-sizing: border-box;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: transform;  
 width: 100%;
}
	
.hz-button-1:hover .b-typography\.paragraph, 
.hz-button-1-right:hover .b-typography\.paragraph, 
.hz-button-1-down:hover .b-typography\.paragraph, 
.hz-button-2:hover .b-typography\.paragraph, 
.hz-button-2-right:hover .b-typography\.paragraph, 
.hz-button-2-down:hover .b-typography\.paragraph, 
.hz-button-3:hover .b-typography\.paragraph,
.hz-button-3-right:hover .b-typography\.paragraph,
.hz-button-3-down:hover .b-typography\.paragraph,
.hz-button-3-small:hover .b-typography\.paragraph,
.hz-button-3-small-right:hover .b-typography\.paragraph,
.hz-button-3-small-down:hover .b-typography\.paragraph,
.hz-button-4:hover .b-typography\.paragraph, 
.hz-button-4-right:hover .b-typography\.paragraph, 
.hz-button-4-down:hover .b-typography\.paragraph, 
.hz-button-5:hover .b-typography\.paragraph, 
.hz-button-5-right:hover .b-typography\.paragraph, 
.hz-button-5-down:hover .b-typography\.paragraph,
.hz-button-6:hover .b-typography\.paragraph, 
.hz-button-6-right:hover .b-typography\.paragraph, 
.hz-button-6-down:hover .b-typography\.paragraph,
.hz-button-7:hover .b-typography\.paragraph, 
.hz-button-7-right:hover .b-typography\.paragraph, 
.hz-button-7-down:hover .b-typography\.paragraph,
.hz-button-yellow:hover .b-typography\.paragraph, 
.hz-button-yellow-right:hover .b-typography\.paragraph, 
.hz-button-yellow-down:hover .b-typography\.paragraph 
{
  transform: translate3d(8px, 0, 0);
}

/* make article/non-article buttons the same*/

.hz-button-1 div span p, 
.hz-button-1-right div span p, 
.hz-button-1-down div span p, 
.hz-button-2 div span p,
.hz-button-2-right div span p,
.hz-button-2-down div span p,
.hz-button-3 div span p,
.hz-button-3-right div span p,
.hz-button-3-down div span p,
.hz-button-3-small div span p,
.hz-button-3-small-right div span p,
.hz-button-3-small-down div span p,
.hz-button-4 div span p, 
.hz-button-4-right div span p, 
.hz-button-4-down div span p, 
.hz-button-5 div span p, 
.hz-button-5-right div span p, 
.hz-button-5-down div span p,
.hz-button-6 div span p, 
.hz-button-6-right div span p, 
.hz-button-6-down div span p, 
.hz-button-7 div span p, 
.hz-button-7-right div span p, 
.hz-button-7-down div span p, 
.hz-button-yellow div span p, 
.hz-button-yellow-right div span p, 
.hz-button-yellow-down div span p 
{ 
margin: 0; 
}

/*  when placed chevron as <img> */

.hz-button-1 img, 
.hz-button-2 img, 
.hz-button-3 img, 
.hz-button-3-small img, 
.hz-button-4 img, 
.hz-button-5 img,
.hz-button-6 img,
.hz-button-7 img,
.hz-button-yellow img
{
height:20px; 
margin-left:20px;
}



/*  ---------------------------  buttons 1 styling ---------------------------*/

/*
.hz-button-1, 				
.hz-button-1-right, 				
.hz-button-1-down 				
{ background: rgb(0, 0, 0); } 
	
.hz-button-1::before, 		
.hz-button-1-right::before, 		
.hz-button-1-down::before 		
{ background: rgb(0, 172, 169); }  
	
.hz-button-1:hover::before, 	
.hz-button-1-right:hover::before, 	
.hz-button-1-down:hover::before 	
{ background: rgb(255, 184, 77); }   
*/


.hz-button-1, 				
.hz-button-1-right, 				
.hz-button-1-down 				
{ background: rgb(255, 184, 77);   color: rgb(0, 0, 0) !important;  } 	 /*  background + text  */
	
.hz-button-1::before, 		
.hz-button-1-right::before, 		
.hz-button-1-down::before 		
{ background: rgb(0, 0, 0); }       /*  left border */
	
.hz-button-1:hover::before, 	
.hz-button-1-right:hover::before, 	
.hz-button-1-down:hover::before 	
{ background: rgb(0, 0, 0); }     /*  left border hover state */




/*  ---------------------------  buttons 2 styling ---------------------------*/
		
.hz-button-2, 				
.hz-button-2-right, 				
.hz-button-2-down 				
{ background: rgb(0, 172, 169); }  /*  background + text  */
	
.hz-button-2::before, 		
.hz-button-2-right::before, 		
.hz-button-2-down::before 		
{ background: rgb(2, 104, 99); }   /*  left border */
	
.hz-button-2:hover::before, 	
.hz-button-2-right:hover::before, 	
.hz-button-2-down:hover::before 	
{ background: rgb(255, 184, 77); }     /*  left border hover state */

	
/*  ---------------------------  buttons 3 styling ---------------------------*/
	
.hz-button-3, 				
.hz-button-3-right, 				
.hz-button-3-down 				
{ background: rgb(235, 250, 249); color:black !important;} 	/*  background + text  */

.hz-button-3::before, 		
.hz-button-3-right::before, 		
.hz-button-3-down::before 		
{ background:black; }     /*  left border */

.hz-button-3:hover::before, 	
.hz-button-3-right:hover::before, 	
.hz-button-3-down:hover::before 	
{ background:black;}    /*  left border hover state */

/*  ---------------------------  buttons 3 small styling ---------------------------*/
	
.hz-button-3-small, 				
.hz-button-3-small-right, 				
.hz-button-3-small-down 				
{ 
	background: rgb(235, 250, 249); color:black !important;
    padding: 12px 10px 11px 0px !important;
	min-width: 200px !important;
} 	

.hz-button-3-small::before, 		
.hz-button-3-small-right::before, 		
.hz-button-3-small-down::before 		
{ background:black; }     /*  left border */

.hz-button-3-small:hover::before, 	
.hz-button-3-small-right:hover::before, 	
.hz-button-3-small-down:hover::before 	
{ background:black;}    /*  left border hover state */

	
/*  ---------------------------  buttons 4 styling ---------------------------*/

.hz-button-4, 				
.hz-button-4-right, 				
.hz-button-4-down 				
{ background: rgb(255, 184, 77);   color: rgb(0, 0, 0) !important;  } 	 /*  background + text  */

.hz-button-4-right::before, 		
.hz-button-4-down::before, 		
.hz-button-4::before 		
{ background: rgb(0, 0, 0); }       /*  left border */

.hz-button-4:hover::before, 	
.hz-button-4-right:hover::before, 	
.hz-button-4-down:hover::before 	
{ background: rgb(0, 0, 0); }     /*  left border hover state */


/*  ---------------------------  buttons 5 styling ---------------------------*/
	
.hz-button-5, 				
.hz-button-5-right, 				
.hz-button-5-down 				
{ background: rgb(0, 0, 0);} 	  /*  background + text  */
	
.hz-button-5-right::before, 		
.hz-button-5-down::before, 		
.hz-button-5::before 		
{ background: rgb(255, 255, 255); }        /*  left border */
	
.hz-button-5:hover::before, 	
.hz-button-5-right:hover::before, 	
.hz-button-5-down:hover::before 	
{ background: rgb(255, 184, 77); }        /*  left border hover state */

/*  ---------------------------  buttons 6 styling ---------------------------*/
	
.hz-button-6, 				
.hz-button-6-right, 				
.hz-button-6-down 				
{ 
background:rgb(2, 104, 99);     
color:#fff !important; 
} 	  /*  background + text  */
	
.hz-button-6-right::before, 		
.hz-button-6-down::before, 		
.hz-button-6::before 		
{ background: rgb(0, 63, 60);  }        /*  left border */
	
.hz-button-6:hover::before, 	
.hz-button-6-right:hover::before, 	
.hz-button-6-down:hover::before 	
{ background:  rgb(255, 184, 77) ; }       /*  left border hover state */




/*  ---------------------------  buttons 7 styling ---------------------------*/


.hz-section-home-meer-controle .hz-panel-cta-wrapper-left { 
 transform: scale(0.9);
transform-origin: left;
    justify-content: unset;
bottom: 30px;
 } 
.hz-section-home-meer-controle .hz-panel-content {
    padding-bottom: 40px;
 } 





.hz-button-7, 				
.hz-button-7-right, 				
.hz-button-7-down 				
{ 
    background: rgba(255, 255, 255, 0.1);
    color:#fff !important; 
    padding: 12px 10px 11px 0px !important;
  /*  transform: scale(0.9);
    transform-origin: left; */
    padding: 12px 50px 11px 0px !important;
    min-width: 0px;
margin-right:20px;
} 	  /*  background + text  */
	
.hz-button-7-right::before, 		
.hz-button-7-down::before, 		
.hz-button-7::before 		
{     background: rgba(255, 255, 255, 0.5);
 }        /*  left border */
	
.hz-button-7:hover::before, 	
.hz-button-7-right:hover::before, 	
.hz-button-7-down:hover::before 	
{ background:  rgb(255, 184, 77) ; }       /*  left border hover state */



@media screen and (max-width: 766px) {
.hz-button-7, 				
.hz-button-7-right, 				
.hz-button-7-down 				
{ 
margin-bottom:10px;
} 
.hz-button-7-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-right.svg"); }	
.hz-button-7-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-down.svg"); }	

}


/*  ---------------------------  buttons yellow styling ---------------------------*/
	
.hz-button-yellow, 				
.hz-button-yellow-right, 				
.hz-button-yellow-down 				
{ 
background:rgb(2, 104, 99);     
color:#fff !important;
} 	  /*  background + text  */
	
.hz-button-yellow-right::before, 		
.hz-button-yellow-down::before, 		
.hz-button-yellow::before 		
{ background: rgb(0, 63, 60);  }        /*  left border */
	
.hz-button-yellow:hover::before, 	
.hz-button-yellow-right:hover::before, 	
.hz-button-yellow-down:hover::before 	
{ background:  rgb(255, 184, 77) ; }       /*  left border hover state */


/*  ---------------------------  Chevrons ---------------------------*/

	
.hz-button-1-right,
.hz-button-1-down,
.hz-button-2-right,
.hz-button-2-down,
.hz-button-3-right,
.hz-button-3-down,
.hz-button-3-small-right,
.hz-button-3-small-down,
.hz-button-4-right,
.hz-button-4-down,
.hz-button-5-right,
.hz-button-5-down,
.hz-button-6-right,
.hz-button-6-down,
.hz-button-7-right,
.hz-button-7-down,
.hz-button-yellow-right,
.hz-button-yellow-down
	{
  position: relative;
  padding-right: 68px; /* ruimte voor de chevron */
  display: inline-block;
}

.hz-button-1-right::after,
.hz-button-1-down::after,
.hz-button-2-right::after,
.hz-button-2-down::after,
.hz-button-3-right::after,
.hz-button-3-down::after,
.hz-button-3-small-right::after,
.hz-button-3-small-down::after,
.hz-button-4-right::after,
.hz-button-4-down::after,
.hz-button-5-right::after,
.hz-button-5-down::after,
.hz-button-6-right::after,
.hz-button-6-down::after,
.hz-button-7-right::after,
.hz-button-7-down::after,
.hz-button-yellow-right::after,
.hz-button-yellow-down::after
{
  content: "";
  position: absolute;
  right: 10px; /* afstand tot tekst */
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}	


.hz-button-1-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-black-chevron-right.svg"); }	
.hz-button-1-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-black-chevron-down.svg"); }	
.hz-button-2-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-right.svg"); }	
.hz-button-2-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-down.svg"); }	
.hz-button-3-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-black-chevron-right.svg"); }	
.hz-button-3-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-black-chevron-down.svg"); }	
.hz-button-3-small-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-black-chevron-right.svg"); }	
.hz-button-3-small-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-black-chevron-down.svg"); }	
.hz-button-4-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-black-chevron-right.svg"); }	
.hz-button-4-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-black-chevron-down.svg"); }	
.hz-button-5-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-right.svg"); }	
.hz-button-5-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-down.svg"); }	
.hz-button-6-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-right.svg"); }	
.hz-button-6-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-down.svg"); }	
.hz-button-7-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-right.svg"); }	
.hz-button-7-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-down.svg"); }	
.hz-button-yellow-right::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-right.svg"); }	
.hz-button-yellow-down::after{ background-image: url("https://cdn.opptylab.com/hi/assets/icon-svg-white-chevron-down.svg"); }	
	
.hz-button-offerte:hover  { cursor: pointer; }




/*losse pijlen*/

.chevron-right,
.chevron-left,
.chevron-up,
.chevron-down
{
	width: 45px;
	display:inline-block;
}

.chevron-right::before,
.chevron-left::before,
.chevron-up::before,
.chevron-down::before
{
    content: "\e801";
    font-family: "fontello"; 
    font-size: 9px;
    display: inline-block;
    position:absolute;
    right:0px;
     transition: all 0.3s ease;
     z-index: 1;
     top:0px;
}


.chevron-right::before  { rotate:-90deg; }
.chevron-left::before   { rotate:90deg;  }
.chevron-up::before	    { rotate:180deg; }
.chevron-down::before   { rotate:0deg;   }

.hz-button-row a:hover .chevron-right::before	  
{ transform: translate3d(0, -8px, 0);}
.hz-button-row a:hover .chevron-left::before		 
{ transform: translate3d(0, 8px, 0);}
.hz-button-row a:hover .chevron-up::before
{ transform: translate3d(8px, 0, 0); }
.hz-button-row a:hover .chevron-down::before
{ transform: translate3d(-8px, 0, 0); }