@charset "utf-8";
/* CSS Document */

@media (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}

html, body {
  scroll-behavior: smooth;
}

body {
	font-size: 1.8em;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	background-image: url("https://www.bfpetfood.nl/bio/images/browser2022/jute.jpg");  background-repeat: repeat;
}

h1 {font-size: 1.4em; font-family: 'Nunito Sans', sans-serif; font-weight: 900;}
h2 { font-size: 1.3em; font-family: 'Nunito Sans', sans-serif; font-weight: 800;}
h3 { font-size: 1.2em; font-family: 'Nunito Sans', sans-serif; font-weight: 800;}

@media screen and (min-width: 768px){
h1 {font-size: 2.0em; font-family: 'Nunito Sans', sans-serif; font-weight: 900;}
h2 { font-size: 1.4em; font-family: 'Nunito Sans', sans-serif; font-weight: 800;}
h3 { font-size: 1.2em; font-family: 'Nunito Sans', sans-serif; font-weight: 800;}
}

@media screen and (min-width: 1200px){
h1 {font-size: 2.3em; font-family: 'Nunito Sans', sans-serif; font-weight: 900;}
h2 { font-size: 1.8em; font-family: 'Nunito Sans', sans-serif; font-weight: 800;}
h3 { font-size: 1.4em; font-family: 'Nunito Sans', sans-serif; font-weight: 800;}
}



.header {
    background-color: #ffffff;
    -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
		padding-bottom: 15px;
	padding-top: 15px;

}

@media screen and (min-width: 1200px) {
	.header { 
		position:fixed; 
		width: 100%;
		margin-bottom: 300px;
	z-index: 99;
		height: 110px;
	}
}

.vlaglos {
	width: auto;
	display: block;
	margin-left: 15px;
	margin-bottom: -10px;
height: 25pt;
	clear:none;
	float: right;
}

.menuklein {
display: block;
	}
@media screen and (min-width: 768px) {
.menuklein {
display: none;
	}}

.menuklein ul {
display: block;
list-style: none;
	    margin: 0; /* To remove default bottom margin */ 
    padding: 0; /* To remove default left padding */
	} 

.knoppenbalk {
	padding-top: 5px;
	text-align: right;
	padding-top: 25px;

}

@media screen and (min-width: 1200px) {
.knoppenbalk {
	padding-top: 35px;
	text-align: right;
	
}
}

.knoppenbalk ul {
display: block;
list-style: none;
	    margin: 0; /* To remove default bottom margin */ 
    padding: 0; /* To remove default left padding */
	} 

.knopzij {
	color: #ffffff;
		width: auto;
	text-align: center;
	
}




@media screen and (min-width: 768px) {
.knopzij {
	float: left;
	text-decoration: none;
	color: #000000;
	display: block;
	padding-left: 14px;

	width: auto;
	text-align: left;
	pointer-events: all;
	font-size: 0.8em;
		align: right;
	float: right;
	
}
.knopzij:link {
	color: #000000;
	text-decoration: none;
}
.knopzij:visited {
	color: #000000;
	text-decoration: none;
}
.knopzij:active {
	color: #000000;
	text-decoration: none;
}
.knopzij:hover {
	color: #61b448;
}
}

@media screen and (min-width: 992px) {
.knopzij {
	padding-left: 20px;
	font-weight: 600;
	font-size: 0.8em;
}
}

@media screen and (min-width: 1200px) {
.knopzij {
	padding-left: 30px;

	font-size: 1em;
}
}

.kleinvak {

}

@media screen and (min-width: 768px) {
.kleinvak {
display: none;	
	}
}

	
	
.vak1 {
	color: #ffffff;
	padding-top: 50px;

}
@media screen and (min-width: 768px) {
.vak1 {
		background-image: url(images/browser2022/vak1-5.jpg);
	background-position: center center; /* Center the image */
	object-fit: cover;
	color: #ffffff;
	padding-top: 45px;
	padding-bottom: 45px;

}
}

.ruimtebalk
{ 
	display: none;
}

@media screen and (min-width: 1200px) {
.ruimtebalk
{ 
	display: block;
	height: 105px
}
}

.holland {
	float: left;
	clear: none;
	padding-right: 15px;
	padding-bottom: 25px;

}
@media screen and (min-width: 768px) {
.holland {
	padding-left: 35px;

}
}

.original {
		float: left;
	clear: none;
	color: #000000;
	font-weight: 900;
		font-size: 1.4em;
	line-height: 1.2em;
	margin-top: -2px;

}
@media screen and (min-width: 768px) {
.original {
		color: #ffffff;

}
}

.collage {
	padding-top: 25px;

}
.coltxt {
	padding-top: 10px;
	text-align: center;
	color: #000000;
	font-size: 1.8em; font-family: 'Nunito Sans', sans-serif; font-weight: 900;
}

@media screen and (min-width: 768px) {
.coltxt {
	color: #ffffff;
	font-size: 1.3em; font-family: 'Nunito Sans', sans-serif; font-weight: 900;
}
}

@media screen and (min-width: 1100px) {
.coltxt {
	color: #ffffff;
	font-size: 1.8em; font-family: 'Nunito Sans', sans-serif; font-weight: 900;
}
}

@media screen and (min-width: 1350px) {
.coltxt {
	margin-top: 0px;
	font-size: 2.6em; font-family: 'Nunito Sans', sans-serif; font-weight: 900;
}
}


.pijltje {
	text-align: center;

}

.pijltjevervolg {
	display: none;
}

@media screen and (min-width: 768px) {
.pijltjevervolg {
	display: block;
	text-align: center;
	margin-top: -75px;
}
}

#verder {
  scroll-margin-top: 100px;
}

#prodverder {
  scroll-margin-top: 128px;
}

@media screen and (min-width: 768px) {
.ruimtebrok {
	margin-top: 75px;
}
}

.vak2 {
	text-align: left;

	padding-bottom: 50px;
	padding-top: 25px;
}



.vak3 {
		
	color: #000000;
		
	padding-top: 25px;
	
}
@media screen and (min-width: 768px) {
.vak3 {
		text-align: left;
		background-image: url(images/browser2022/blad-4.jpg);
	background-position: center center; /* Center the image */
	object-fit: cover;
	color: #ffffff;
		padding-bottom: 50px;
	padding-top: 25px;
}
}


.vak4 {
	color: #ffffff;
	background-color: #47b7e5;
}


@media screen and (min-width: 768px) {
.vak4 {
		background-image: url(images/browser2022/bos-3.jpg);
		  background-position: center bottom; /* Center the image */
  object-fit: cover;
	color: #ffffff;
	padding-bottom: 300px;
			padding-top: 25px;
	
}
}

.biologo {
	padding-top: 50px;
}

.vak5 {
	background-color: #ffffff;
			background-image: url(images/browser2022/boer2.jpg);
		  background-position: center bottom; /* Center the image */
background-repeat: no-repeat;
		padding-bottom: 50px;
	padding-top: 25px;
}

.footer {
	background-color: #024309;
	padding-top: 50px;
	color: #ffffff;
	font-size: 0.7em;
	
}

.knoponder {
	color: #ffffff;
	text-decoration: none;
}
.knoponder:link {
	color: #ffffff;
	text-decoration: none;
}
..knoponder:visited {
	color: #ffffff;
	text-decoration: none;
}
.knoponder:active {
	color: #ffffff;
	text-decoration: none;
}
.knoponder:hover {
	color: #000000;
}

.social {
	width: 75px;
	clear: none;
	padding-right: 5px;
}

.staartlogo {
	padding-bottom: 25px;
}

.staarttxt {
	padding-bottom: 50px;
}



/* +++++++++++++++++ */ 
/* OVERZICHTSPAGINA */ 
/* +++++++++++++++++ */ 

.klein100proc {

}

@media screen and (min-width: 768px) {
.klein100proc {
display: none;	
	}
}


.vak100proc {
	color: #000000;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;

}
@media screen and (min-width: 768px) {
.vak100proc {
    background-image: url(images/browser2022/vak100proc-4.jpg);
    background-position: center center; /* Center the image */
    object-fit: cover;
    color: #ffffff;
    padding-top: 100px;
    height: 500px;
   text-shadow: 2px 2px 8px #024309;
}
}
.vakmenu {
	color: #000000;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;

}
@media screen and (min-width: 768px) {
.vakmenu {
    background-image: url(images/browser2022/vakmenu.jpg);
    background-position: center center; /* Center the image */
    object-fit: cover;
    color: #ffffff;
    padding-top: 100px;
    height: 500px;
   text-shadow: 2px 2px 8px #024309;
}
}

.100proctxt {
	color: #000000;
	text-align: center;	
}

.overzichtvak{
	height: 675px;
}
.fotooverzichtvak{
	height: 450px;
	padding-left: 40px;
	padding-right: 40px;

}
.titeloverzichtvak{
	margin-top: 470px;
	text-align: center;
	font-size: 1.2em;
}
.gewichtoverzichtvak{
	text-align: center;
	font-size: 0.8em;
}
.meerinfooverzichtvak{
	padding-top: 10px;
	
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}

.knopoverzicht {
	text-decoration: none;
	color: #000000;
}
.knopoverzicht:link {
	color: #000000;
	text-decoration: none;
}
.knopoverzicht:visited {
	color: #000000;
	text-decoration: none;
}
.knopoverzicht:active {
	color: #000000;
	text-decoration: none;
}
.knopoverzicht:hover {
	color: #61b448;
	text-decoration: none;
}
.varianten {
padding-top: 0px;
	padding-bottom 25px;
}
/* +++++++++++++++++ */ 
/* PRODUCTPAGINA */ 
/* +++++++++++++++++ */ 

.terugbalk {
		background-color: #024309;
	padding-top: 15px;
	padding-bottom: 15px;
	color: #ffffff;   
	    -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.knopterug {
	text-decoration: none;
	color: #ffffff;
	
}
.knopterug:link {
	color: #ffffff;
	text-decoration: none;
}
.knopterug:visited {
	color: #ffffff;
	text-decoration: none;
}
.knopterug:active {
	color: #ffffff;
	text-decoration: none;
}
.knopterug:hover {
	color: #61b448;
}

.product{
	padding-top: 50px;
	padding-bottom: 50px;
}

.product ul li {
   list-style-image: url(https://www.bfpetfood.nl/producten/images/vink.png);
}

@media screen and (min-width: 768px) {
.productfoto {
	margin-top: 20px;	
}
}

.productkop {
	margin-top: -45px;
	padding-bottom: 20px;	
}
.ruimte {
	
	margin-top: 25px;
}

.compleet {
	margin-top: -20px;
}

.ingredienten {
	font-size: 0.7em;

}

.ingredienten table {
  border-width: 1px;
border-bottom-style: none;
border-top-style: none;
border-left-style: none;
border-right-style: none;
font-size: 1em;
background-color: #f6f2f2;
box-shadow: 2px 2px 8px #dadada;
}

.ingredienten tr {
  padding-top: 1px;
  padding-bottom: 4px;
  border-width: 1px;
  border-bottom-style: solid;
border-top-style: none;
border-left-style: none;
border-right-style: solid;
border-color: #FFFFFF;
padding: 5px;
padding-left: 15px;
}
.ingredienten td {
  padding-top: 4px;
  padding-bottom: 4px;
  border-width: 1px;
  border-bottom-style: solid;
border-top-style: none;
border-left-style: none;
border-right-style: solid;
border-color: #ebeaea;
padding: 5px;
padding-left: 15px;
text-align:center;
}

.ingredienten tr:hover {background-color: #ffffff;}


/* +++++++++++++++++ */ 
/* INFOPAGINA */ 
/* +++++++++++++++++ */ 
.knopgeel {
	text-decoration: none;
	color: #ffed00;
}
.knopgeel:link {
	color: #ffed00;
	text-decoration: none;
}
.knopgeel:visited {
	color: #ffed00;
	text-decoration: none;
}
.knopgeel:active {
	color: #ffed00;
	text-decoration: none;
}
.knopgeel:hover {
	color: #ffffff;
	text-decoration: none;
}

.vakpagina {
	color: #000000;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 50px;

}
@media screen and (min-width: 768px) {
.vakpagina {
    background-position: center center; /* Center the image */
    object-fit: cover;
    color: #ffffff;
    padding-top: 100px;
    height: 500px;
   text-shadow: 2px 2px 8px #024309;
}
}