/*
 * CSS Brood&Ko 
 Kleuren:
 Tekst: #000000
 Links: #FF0000 
 Achtergrond: #FFFFFF
 Bestelknop: #f0ad4e
 Navigatie achtergrond: #edf6fb
 Randen: #000066
 * aanpassingen Les 06-06-25
 */

@font-face {
    font-family: 'bekkers';
    src: url('../fonts/Brandon_Grotesque_medium-Bold.ttf'); /* IE9 Compat Modes */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}



body {
background: url(../img/.jpg) no-repeat center center fixed; /**/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: bekkers;
color: #000;
font-size: 16px;
min-height: 100%;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
 /* position: relative;*/
  top: 20px;
  
}



a {
color: inherit;	
}
a:hover{
color: #000000;	
}
select{
background: #FFF url('../img/down-arrow.png') no-repeat right;
background: #FFF url('../img/down-arrow.png') no-repeat right;
appearance:none;
-webkit-appearance:none; 
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 50px;
height: 28px;
line-height:20px;
}

.text-danger {
color: #FF0000;
}
.glyphicon-home:before {
left: -2px;
}
.glyphicon-search:before {
top: -15px;
left: 15px;
}
h4,
.h4 {
font-size: 18px;
}
.btn {	
font-size: 18px;
font-weight: normal;
height:28px;
border: 1px solid transparent;
border-radius: 4px;
}
.bestelknop{
color: #fff;
border-color: #000000;
margin-bottom: 5px;
margin-left: 10px;
background-color: #0c7ec3;
width:110px;
}
.bestelknop:hover,
.bestelknop:focus,
.bestelknop.focus,
.bestelknop:active,
.bestelknop.active,
.open > .dropdown-toggle.bestelknop {
color: #fff;
background-color: #000066;
border-color: #123501F;
}
.rodeknop {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
.rodeknop:hover,
.rodeknop:focus,
.rodeknop.focus,
.rodeknop:active,
.rodeknop.active,
.open > .dropdown-toggle.rodeknop {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
}

.rodeknop.disabled,
.rodeknop[disabled],
fieldset[disabled] .rodeknop,
.rodeknop.disabled:hover,
.rodeknop[disabled]:hover,
fieldset[disabled] .rodeknop:hover,
.rodeknop.disabled:focus,
.rodeknop[disabled]:focus,
fieldset[disabled] .rodeknop:focus,
.rodeknop.disabled.focus,
.rodeknop[disabled].focus,
fieldset[disabled] .rodeknop.focus,
.rodeknop.disabled:active,
.rodeknop[disabled]:active,
fieldset[disabled] .rodeknop:active,
.rodeknop.disabled.active,
.rodeknop[disabled].active,
fieldset[disabled] .rodeknop.active {
background-color: #d9534f;
border-color: #d43f3a;
}
.rodeknop .badge {
color: #d9534f;
background-color: #fff;
}
.groeneknop {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.groeneknop:hover,
.groeneknop:focus,
.groeneknop.focus,
.groeneknop:active,
.groeneknop.active,
.open > .dropdown-toggle.groeneknop {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
.groeneknop.disabled,
.groeneknop[disabled],
fieldset[disabled] .groeneknop,
.groeneknop.disabled:hover,
.groeneknop[disabled]:hover,
fieldset[disabled] .groeneknop:hover,
.groeneknop.disabled:focus,
.groeneknop[disabled]:focus,
fieldset[disabled] .groeneknop:focus,
.groeneknop.disabled.focus,
.groeneknop[disabled].focus,
fieldset[disabled] .groeneknop.focus, 
.groeneknop.disabled:active,
.groeneknop[disabled]:active,
fieldset[disabled] .groeneknop:active,
.groeneknop.disabled.active,
.groeneknop[disabled].active,
fieldset[disabled] .groeneknop.active {
background-color: #5cb85c;
border-color: #4cae4c;
}
.groeneknop .badge {
color: #5cb85c;
background-color: #fff;
}
nav {

color: #FFFFFF; 
 top: 20px;
  left: 200px;

}

#header {
background-color: ;
height: 100px;
border: 1px solid #0c7ec3;
padding-left: 10px;
color : 


;
}

#logo{
position: absolute;
left : 23%;
height : 30px;
padding-top: 0px;
float: left;
max-width: 100%;
text-align: center;
}

#bestelgegevens {
padding-top: 10px;
width:50%;
text-align: left;
float:left;  
} 
#zoek{
padding-top: 50px;
text-align:right;
float: right;
padding-right: 20px;
}
#zoek>input[type=text]{
width: 150px;
}
#mandje{
font-size: 28px;
text-align:right;
float: right;
border-radius: 7px;
margin-right: -150px;
}

.textkader{
width: 70%; /**/
}

nav ul li {

/*background-color: rgba(222, 94, 118, 0.9);   */
background-color: #6a3327;


float: left;
/* color: inherit; */
color:#000;
border-radius:0px;

margin-left: 0px;
margin-top: 1px;
}

subnav ul li {
background-color:rgba(222, 94, 118, 0.47);
float: left;
color: inherit;
}
nav a {
color : #fff; 
/* color: inherit; /**/
font-size: 20px;
font-weight: 100;
font-style: italic;
line-height: 45px;
text-decoration: none;
}

.toggle{
background-color: #FFFFFF;
color: inherit;
font-size: 20px;
line-height: 50px;
}
 
#logo >a>img {
padding-top: 15px;
} 
 
.afbeelding > h2 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  font-weight: normal;
}

#midden {

}

.productkader{
	
padding: 5px;
background: #fff;
border:;
font-size: inherit;
box-shadow: 0 0 5px #ddd;
}
.fotokader{
padding: 0px;
background: #fff;
box-shadow: 0 0 5px #ddd;
border: 1px solid #000066;
font-size: inherit;
}
.afbeelding>h2 span {
float: left; 
color: white; 
letter-spacing: -1px;  
background: rgb(0, 0, 0); 
background: rgba(0, 0, 0, 0.7);
padding: 3px; 
}
.productnaam{
height: 20px;
color: inherit;
font-size: 16px;
font-weight: normal;
}
.text-danger {
color: #FF0000;
}




.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
background-color: #f5f5f5;
}

.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
.table .table {
background-color: #fff;
}
.table{
background: #fff;
}
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
background-color: #f5f5f5;
}
.table-bordered {
border: 1px solid #ddd;
box-shadow: 0 0 5px #ddd;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #ddd;
}

.form-group>label>span {
color: inherit;
font-family: inherit;
font-weight: bold;
}

.form-group>input[type="text"], .form-group input[type="email"], .form-group textarea, .form-group select{
border: 1px solid #CCC;
color: #888;
}

.gegevens{
height: 400;
width: 300;
}
.reclamelint{
color: white;
background-color: red;
border: 1px solid white;
}
.omlijsting {
padding-bottom: 15px;
}

.omlijsting {
  width: 25%;
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
  padding-top: 10px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  width: 1070px;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.zoekbalk {
padding-top: 10px;
}
.informatieomlijsting{
width: 100%;
height: 1000px; 
}
.textkader{
box-shadow: 0 0 5px #ddd;
background: #FFF;
color: inherit;
border: 1px solid #000066;
}   
.text-center>h1{
border-bottom: 1px solid #DADADA;
color: inherit;
font-size: 30px;
}

#zoek>input[type=text]{
border: 1px solid #000066;
border-radius: 5px;
}

#footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 6px;
background-color: #FFFFFF;
text-align: center;
font-size:12px;
background-color: #0c7ec3;
color: white;
}

.img-responsivezoom {
 display: block;
  width: 75%;
  height: auto;
}

.afbeelding > h2 span {
  margin-top: 30px;
  float: right;
  color: black;
  letter-spacing: -1px;
  background: transparent;
  padding: 3px;
  font-size:15px;
}

@media (max-width: 1200px) {
nav {
margin-left: 30px;
}

.informatieomlijsting{
width: 100%;
}
.gegevensbox{
width: 100%;
}
	
.textkader{
background: #fff;
box-shadow: 0 0 5px #ddd;
} 

#mandje{
/*font-size: 24px; /**/
}
}


@media (max-width: 1024px) {


}

@media (max-width: 992px) {
/*#zoek>input[type=text]{
width: 185px;

}/**/
#logo { display: none;} /**/
}

@media (max-width: 874px) {
}
@media (max-width: 874px) {
#midden { padding-top: 50px;
}
}
@media (max-width : 767px) {

body {
background: url(../img/stippen.png 200px 200px);  /**/
-webkit-background-size: 200px 200px;
-moz-background-size: 200px 200px;
-o-background-size: 200px 200px;
background-size: 200px 200px;
}

.omlijsting{
width:33% !important;
height: 20%;
padding:0px;
padding-top:4px;
}



.bestelknop{
margin-bottom: 1px;
margin-left: 1px;
/*background-color: #AD5542*/;
width:110px;
}
.container{
/* width:25% !important; */
height: 20%;
padding:1px;
width:auto;

}
.productkader{
/* height: 230px; */
}
/* Begin reclame lintjes */
.reclamelint{
   display: block;
   position: absolute;
   left: 0px !important;
   width: 120px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   opacity: 0.7;
   -webkit-transform: rotate(-10deg) !important;
   font-weight: 700;
   border: 1px solid white;
   z-index: 500;
   }
.reclamelint.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.reclamelint.top-left{
  top: 0px;
  left: -50px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.reclamelint.top-right{
  top: 15px;
  right: -25px;
  left: auto;
   -webkit-transform: rotate(45deg);
   -moz-transform:    rotate(45deg);
   -ms-transform:     rotate(45deg);
   transform:         rotate(45deg);
}
 /* Einde reclame lintjes */ 

.textkader{
width:100%;
}


nav {
margin-left: 0px;
}


#logo {
  display: none;
}
#logo >a>img {
max-width : 100%;
}
.toggle {
background-color: #FFFFFF;
color: #000066;
padding: 0 20px;
font-size: 20px;
line-height: 50px;
}

nav ul li {
margin-left:0;
border: 1px solid #000066;
background-color: #FFFFFF;
border-radius:0px;
}
nav ul li ul li .toggle,
nav ul ul a { background-color: #212121; }
nav ul ul {
color: #000066;
}



nav a {
color: #000066;
font-size: 20px;
line-height: 50px;
}
nav ul ul li {
width: 170px;
}

/**/
@media (max-width : 410px) {


}