/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Basisopbouw voor alle pagina's */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

* { 
	box-sizing: border-box;
	}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 0px; 
  width: 100%;
}

html {
	font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8em;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Opbouw header (in basis_html.php) */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

div.header {
   background: url(../plaatjes/headerbg.jpg);
   background-size: 100% auto;
   background-repeat: no-repeat;
}

img.header {
	float: left;
	width: 100px;
	margin: 5px;
}

div.headertekst {
 	float: left;
 	margin-top: 10px;
 	padding-left: 45px;
	color: red;
	font-size: 1.0em;
}

div.menuheader {
   background-color: #00023D;  /*#15799e;*/
}

img.social {
	margin-left: 1px;
	margin-right: 1px;
	width: 30px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Basis container */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

body {
	margin: 0px;
	padding: 0px;
  background-color: white; /*#a6a6a6;*/
  color: black;
  -webkit-text-size-adjust: 100%;			/* font-sizes ook op iPhone correct maken */
}

.zijkantlinks {
	/*display: none;*/
	text-align: left;
	padding: 5px;
	color: black;
}

.onder, .zijkantrechts {
	text-align: center;
	padding: 5px;
	color: black;
}

.zijkantrechts {
	display: none;
	text-align: right;
}

table.uitleg {
	margin: 0 auto; 
}

td {
  font-size: 0.8em; 
}

td.uitleg {
	text-align: left;
	padding: 5px;
	font-size: 0.8em;
	color: white;
}

img.uitleg {
	width: 30px;
}

img.levering {
	width: 30px;
	margin-left: 10px;
	margin-right: 10px;
}

img.winkelkar {
	width: 40px;
	margin-right: 10px;
}

img.menu {
 	margin-top: 10px;
 	margin-left: 20px;
	height: 30px;
}

.content_grid {
	text-align: center;
}

.footer {
  position:fixed;
  z-index: 999999;
  left: 0px;
  bottom: 0px;
  padding: 10px;
  width: 100%;
/*  background: lightgrey; */
	background: #666666;
	text-align: center; 
	color: black;
	font-size: 0.8em; 
}

a:link , a:visited , a:hover , a:active {
  text-decoration: none;
 	color: black;
	cursor: pointer;  
}
a:active , a:hover {
   color: blue;
}

a:link.categorie , a:visited.categorie {
 	color: black;
}

a:active.categorie , a:hover.categorie {
 	color: blue;
}

a:link.menurechts , a:visited.menurechts , a:hover.menurechts , a:active.menurechts {
  text-decoration: none;
 	color: black;
	cursor: pointer;
}
a:active.menurechts , a:hover.menurechts {
 	color: blue;
}

a:link.meerinfo , a:visited.meerinfo , a:hover.meerinfo , a:active.meerinfo {
  text-decoration: none;
 	color: red;
	cursor: pointer;
}
a:active.meerinfo , a:hover.meerinfo {
 	color: yellow;
}

a:link.quasar , a:visited.quasar , a:hover.quasar , a:active.quasar {
  text-decoration: none;
 	color: black;
	cursor: pointer;
}
a:active.quasar , a:hover.quasar {
 	color: yellow;
}

h2 {
  width     : 100%;
  padding   : 10px; 
  background: #00023D;
  color     : white;
  font-size : 1.0em;
	/*
  color: #ffca00;
	font-size: 1.0em;
  */
}

h3 {
 	color: black;
	/*text-shadow: 2px 2px black;*/
	font-style: italic;
}

.telefoonnummer {
	font-size: 1.4em;
	font-weight: bold;
	margin-top: 11px;
}

input[type=text] , input[type=password] {
	padding: 2px; 
	/*box-shadow: 3px 3px 10px black;*/
}

textarea {
	padding: 2px; 
	/*box-shadow: 3px 3px 10px black;*/
	width: 100%;
	height: 147px;
	resize: vertical;
	padding: 10px;
}

input[type=submit] {
  -webkit-appearance: none;
 	/*box-shadow: 5px 5px 10px black;*/
  background-color: green;
  color: white;
  cursor: pointer;
  margin-top: 5px;
  margin-left: 0.5%;
  margin-right: 0.5%;
  height: 35px;
  width: 120px;
  text-align: center;
}


select {
/*	box-shadow: 3px 3px 10px black;*/
	padding: 2px;
	background-color: #f2f2f2; /*#0c455a;*/
  color: black;
  cursor: pointer;
}

div.warning {
	text-align: center;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Voorwaarden    */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

ol.voorwaarden_dec {
	list-style-type: decimal;
	margin-left:-10px;
	font-weight: bold;
	color: navy;
}

ol.voorwaarden_chr {
	list-style-type: lower-latin;
	margin-left:-10px;
	margin-top: 5px;
	margin-right: 30px;
	margin-bottom: 5px;
	font-weight: normal;
	color: black;
}

li.voorwaarden {
	padding-top: 5px;
	padding-bottom: 5px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Procesbalk     */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.procesbalk {
	border: 1px solid white;
	margin-top: 20px;
	margin-left: 0.5%;
	margin-right: 0.5%;
	text-align: center;
}

.proces {
	float: left;
	width: 20%;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color: lightblue;
	color: white;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Tekstscherm    */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.content {
  margin-top: 20px;
}

.tekstscherm {
 	box-shadow: none; /*box-shadow: 5px 5px 10px black;*/
	border: 0px solid lightgrey; /*black*/
	margin-bottom: 10px;
	padding: 10px;
	padding-top: 0px;
  /*background: #00023D;*/
	color: black /*white*/ ;
	text-align: left;
	line-height: 130%;
  letter-spacing: 1px;
}

.tekstscherm2 {
 	/*box-shadow: 5px 5px 10px black;*/
	border: 0px solid lightgrey;
	margin-bottom: 10px;
	padding: 10px;
	padding-top: 0px;
  /*background: #00023D;*/
	/*color: white;*/
	text-align: left;
	line-height: 130%;
  letter-spacing: 1px;
}

.fout {
  background-color: red;
}

img.middenkaal , img.midden {
	width: 75%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

img.midden {
 	/*box-shadow: 5px 5px 10px black;*/
	border: 1px solid black;
}

img.klantkaart {
	border: 1px solid black;
  border-radius: 10px;
	width: 100%;
	max-width: 400px;
}

.assorti {
	display: block;
}

div.iphonepage {
	display: block;
	text-align: center;
}

table.iphone {
	margin: 0 auto;
}

td.opentijd_l , td.opentijd_c  {
	padding-right: 8px;
  letter-spacing: 1px; 
	color: black;
	text-align: left;
  font-size:  0.8em;
}
td.opentijd_c {
	text-align: center;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Artikelen grid */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.grid , .grid_winkelwagen, .grid_menu {
	display: inline-block;
	vertical-align: middle; 
	/*box-shadow: 5px 5px 10px black;*/
	width: 230px;
	height: 343px; 
	background: #f2f2f2;
  border: 1px solid black;
	margin: 0.5%;
	margin-top: 15px;
	padding: 0px;
	color: black;
	text-align: center;
}

.grid_winkelwagen {
	height: 368px;
} 

.grid_menu {
	height: 225px;
	background: #00023D; /*grey;*/
	color: white;
}

.grid_inner {
	width: 100%;
	height:	173px; 
}

.grid_image {
	width: 100%; 	
	height :100%;
}

.grid_image_specs {
	box-shadow: 5px 5px 10px black;
	width: 100%; 	
	height: 100%;
}

.grid_artikel {
 	height: 15px;
	padding-left: 10px; 
	padding-right: 10px;
	font-weight: bold; 
}

.grid_tekst {
 	height: 15px;
	padding-left: 10px; 
	padding-right: 10px;
	margin-bottom: 20px;
	font-size: 0.8em;
	font-style: italic;
	text-align: left;
}

.grid_prijs {
 	padding-left: 10px;
	font-size: 1.0em;
}

.grid_aantal {
 	padding-left: 10px;
	font-size: 1.0em;
}

.grid_bedrag {
 	background: darkgrey;
 	padding-top: 10px;
 	padding-bottom: 10px;
 	color: white;
	font-size: 1.3em;
}

.grid_info , .grid_icon {
	float: left;
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
	width: 30px;
}

.grid_icon {
	float: right;
	margin-right: 10px;
	margin-left: 0px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Artikelen informatie grid */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.grid_specs {
	margin-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.grid_specs_image {
	/*box-shadow: 5px 5px 10px black;*/
	width: 100%;
}

.grid_specs_balk {
	/*box-shadow: 3px 3px 5px black;*/
	margin-left:  15px;
  margin-bottom: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	/*background: lightgrey;*/ 
	text-align: left;
	color: black;
  letter-spacing: 0px;
}

.grid_specs_balk_opties {
	/*box-shadow: 3px 3px 5px black;*/
	margin-left:  5px;
  margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 10px;
	padding-left:	10px;
	padding-right	:	10px;
	padding-bottom:	20px;
	text-align: left;
	/*background: lightgrey;*/ 
	/*color: black;*/
  letter-spacing: 0px;
}

.grid_specs_tekst {
	padding-left:	2%;
	padding-right: 2%;
	line-height: 150%;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Winkelwagen */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

table.shopcart {
 	width: 100%;
 	max-width: 650px;
 	margin: 0px auto;
	}

td.shopcart_artikel 		, 
td.shopcart_aantal 			, 
td.shopcart_prijs 			, 
td.shopcart_bedrag 			,
td.shopcart_icon				,
td.shopcart_totaalbedrag	{
 	vertical-align: top;
	text-align: left;
/*	border: 1px solid white; */
}

td.shopcart_artikel {
	box-shadow: 5px 5px 10px black;
 	vertical-align: middle;
	padding: 10px;
	background: grey;
}

td.shopcart_aantal {
	text-align:	right;
	padding-top: 10px;
	padding-bottom: 10px;
}

td.shopcart_prijs , td.shopcart_bedrag {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align:	right;
	width: 100px;
}

img.shopcart_icon {
	width: 13px;
	height: 13px;
	margin-left: 	15px;
	cursor: pointer;
}

td.shopcart_totaalbedrag {
	text-align:	right;
 	font-size: 1.2em;
	font-weight:bold;
	text-shadow: 2px 2px black;
}

.buttondiv  {
	margin-top: 20px;
	text-align: center;
}

button {
 	/*box-shadow: 5px 5px 10px black;*/
  background-color: green;
  color: white;
  cursor: pointer;
  margin-top: 5px;
  margin-left: 0.5%;
  margin-right: 0.5%;
  height: 35px;
  width: 120px;
  text-align: center;
}

button.terugselect {
  border: 0px solid #00023D;
  background-color: #00023D;
  color: white;
  cursor: pointer;
  margin-top: 5px;
  margin-left: 0%;
  margin-right: 0.2%;
  height: 35px;
  width: 40px;
 }

button.terug {
  background-color: grey;
  color: white;
}

.shopcart_specs {
	font-style: italic;
	color: yellow;
}

input.winkelwagen {
	text-align: center;
}

img.grid_min , img.grid_plus {
	float: left;
	margin-top: -77px;
	margin-right: 25px;
	margin-left: 40px;
	width: 30px;
}
img.grid_plus {
	float: right;
}

img.grid_delete {
	float: left;
	margin-top: 0px;
	margin-left: 105px;
	width: 30px;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Kassa */
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.kassaregel , .kassaregel_totaal {
 	background-color: #f2f2f2;
  letter-spacing: 0px;
	margin-bottom: 3px;
	padding: 5px;
	valign: middle;
}

.kassaregel_totaal {
  background: lightgrey;
	font-weight: bold;
}

.kassa_artikel {
}

.kassa_prijs {
	text-align: right;
}

.kassa_bevestig {
	text-align: center;
	margin-bottom: 15px;
}

.labels {
	line-height: 100%;
  letter-spacing: 0px;
}

input[type="text"].toonadres {
  border:  1px solid lightgrey;
  background:  #f2f2f2;
 	color: blue;
} 

.besteld {
	font-weight: bold;
	color: blue;
}

/*---------------------------------------------------------------------------*/
/* Responsive functies																											 */
/*---------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) {
  img.header 					{width			: 240px	;	margin-bottom	: 40px	;	}
	.headertekst		 		{margin-top	: 15px	;	font-size			: 3.0em	;	}  
  .zijkantlinks				{display		: block	;													}
  .zijkantrechts 			{display		: block	;													}
	.onder 							{display		: none	;													}
	.assorti						{display		: none	;													}
	.shopcart_buttondiv {text-align	: right	;													}
	div.iphonepage 			{display		: none	;													}
}

@media only screen and (min-width: 480px) {
  .col-iphone4-5 	 {width:   5.00%;}
  .col-iphone4-10  {width:  10.00%;}
  .col-iphone4-15  {width:  15.00%;}
  .col-iphone4-20	 {width:  20.00%;}
  .col-iphone4-25	 {width:  25.00%;}
  .col-iphone4-30	 {width:  30.00%;}
  .col-iphone4-35	 {width:  35.00%;}
  .col-iphone4-40	 {width:  40.00%;}
  .col-iphone4-45	 {width:  45.00%;}
  .col-iphone4-50	 {width:  50.00%;}
  .col-iphone4-55	 {width:  55.00%;}
  .col-iphone4-60	 {width:  60.00%;}
  .col-iphone4-65	 {width:  65.00%;}
  .col-iphone4-70	 {width:  70.00%;}
  .col-iphone4-75	 {width:  75.00%;}
  .col-iphone4-80	 {width:  80.00%;}
  .col-iphone4-85	 {width:  85.00%;}
  .col-iphone4-90	 {width:  90.00%;}
  .col-iphone4-95	 {width:  95.00%;}
  .col-iphone4-100 {width: 100.00%;}
}

@media only screen and (min-width: 568px) {
  .col-iphone5-5 	 {width:   5.00%;}
  .col-iphone5-10  {width:  10.00%;}
  .col-iphone5-15  {width:  15.00%;}
  .col-iphone5-20	 {width:  20.00%;}
  .col-iphone5-25	 {width:  25.00%;}
  .col-iphone5-30	 {width:  30.00%;}
  .col-iphone5-35	 {width:  35.00%;}
  .col-iphone5-40	 {width:  40.00%;}
  .col-iphone5-45	 {width:  45.00%;}
  .col-iphone5-50	 {width:  50.00%;}
  .col-iphone5-55	 {width:  55.00%;}
  .col-iphone5-60	 {width:  60.00%;}
  .col-iphone5-65	 {width:  65.00%;}
  .col-iphone5-70	 {width:  70.00%;}
  .col-iphone5-75	 {width:  75.00%;}
  .col-iphone5-80	 {width:  80.00%;}
  .col-iphone5-85	 {width:  85.00%;}
  .col-iphone5-90	 {width:  90.00%;}
  .col-iphone5-95	 {width:  95.00%;}
  .col-iphone5-100 {width: 100.00%;}
}

@media only screen and (min-width: 667px) {
  .col-iphone6-5 	 {width:   5.00%;}
  .col-iphone6-10  {width:  10.00%;}
  .col-iphone6-15  {width:  15.00%;}
  .col-iphone6-20	 {width:  20.00%;}
  .col-iphone6-25	 {width:  25.00%;}
  .col-iphone6-30	 {width:  30.00%;}
  .col-iphone6-35	 {width:  35.00%;}
  .col-iphone6-40	 {width:  40.00%;}
  .col-iphone6-45	 {width:  45.00%;}
  .col-iphone6-50	 {width:  50.00%;}
  .col-iphone6-55	 {width:  55.00%;}
  .col-iphone6-60	 {width:  60.00%;}
  .col-iphone6-65	 {width:  65.00%;}
  .col-iphone6-70	 {width:  70.00%;}
  .col-iphone6-75	 {width:  75.00%;}
  .col-iphone6-80	 {width:  80.00%;}
  .col-iphone6-85	 {width:  85.00%;}
  .col-iphone6-90	 {width:  90.00%;}
  .col-iphone6-95	 {width:  95.00%;}
  .col-iphone6-100 {width: 100.00%;}
}

@media only screen and (min-width: 736px) {
  .col-iphone7-5 	 {width:   5.00%;}
  .col-iphone7-10  {width:  10.00%;}
  .col-iphone7-15  {width:  15.00%;}
  .col-iphone7-20	 {width:  20.00%;}
  .col-iphone7-25	 {width:  25.00%;}
  .col-iphone7-30	 {width:  30.00%;}
  .col-iphone7-35	 {width:  35.00%;}
  .col-iphone7-40	 {width:  40.00%;}
  .col-iphone7-45	 {width:  45.00%;}
  .col-iphone7-50	 {width:  50.00%;}
  .col-iphone7-55	 {width:  55.00%;}
  .col-iphone7-60	 {width:  60.00%;}
  .col-iphone7-65	 {width:  65.00%;}
  .col-iphone7-70	 {width:  70.00%;}
  .col-iphone7-75	 {width:  75.00%;}
  .col-iphone7-80	 {width:  80.00%;}
  .col-iphone7-85	 {width:  85.00%;}
  .col-iphone7-90	 {width:  90.00%;}
  .col-iphone7-95	 {width:  95.00%;}
  .col-iphone7-100 {width: 100.00%;}
}

@media only screen and (min-width: 768px) {
  .col-ipad-5 	{width:   5.00%;}
  .col-ipad-10  {width:  10.00%;}
  .col-ipad-15  {width:  15.00%;}
  .col-ipad-20	{width:  20.00%;}
  .col-ipad-25	{width:  25.00%;}
  .col-ipad-30	{width:  30.00%;}
  .col-ipad-35	{width:  35.00%;}
  .col-ipad-40	{width:  40.00%;}
  .col-ipad-45	{width:  45.00%;}
  .col-ipad-50	{width:  50.00%;}
  .col-ipad-55	{width:  55.00%;}
  .col-ipad-60	{width:  60.00%;}
  .col-ipad-65	{width:  65.00%;}
  .col-ipad-70	{width:  70.00%;}
  .col-ipad-75	{width:  75.00%;}
  .col-ipad-80	{width:  80.00%;}
  .col-ipad-85	{width:  85.00%;}
  .col-ipad-90	{width:  90.00%;}
  .col-ipad-95	{width:  95.00%;}
  .col-ipad-100 {width: 100.00%;}
}

@media only screen and (min-width: 1024px) {
  .col-pc-5 	{width:   5.00%;}
  .col-pc-10  {width:  10.00%;}
  .col-pc-15  {width:  15.00%;}
  .col-pc-20	{width:  20.00%;}
  .col-pc-25	{width:  25.00%;}
  .col-pc-30	{width:  30.00%;}
  .col-pc-35	{width:  35.00%;}
  .col-pc-40	{width:  40.00%;}
  .col-pc-45	{width:  45.00%;}
  .col-pc-50	{width:  50.00%;}
  .col-pc-55	{width:  55.00%;}
  .col-pc-60	{width:  60.00%;}
  .col-pc-65	{width:  65.00%;}
  .col-pc-70	{width:  70.00%;}
  .col-pc-75	{width:  75.00%;}
  .col-pc-80	{width:  80.00%;}
  .col-pc-85	{width:  85.00%;}
  .col-pc-90	{width:  90.00%;}
  .col-pc-95	{width:  95.00%;}
  .col-pc-100 {width: 100.00%;}
  
 	.kassa_bevestig	{text-align	: right;}						/* buttons */
  
}

@media only screen and (min-width: 1583px) {      /* 1600 minus 17 voor de rechter scrollbar */
  .col-pcxl-5 	{width:   5.00%;}
  .col-pcxl-10  {width:  10.00%;}
  .col-pcxl-15  {width:  15.00%;}
  .col-pcxl-20	{width:  20.00%;}
  .col-pcxl-25	{width:  25.00%;}
  .col-pcxl-30	{width:  30.00%;}
  .col-pcxl-35	{width:  35.00%;}
  .col-pcxl-40	{width:  40.00%;}
  .col-pcxl-45	{width:  45.00%;}
  .col-pcxl-50	{width:  50.00%;}
  .col-pcxl-55	{width:  55.00%;}
  .col-pcxl-60	{width:  60.00%;}
  .col-pcxl-65	{width:  65.00%;}
  .col-pcxl-70	{width:  70.00%;}
  .col-pcxl-75	{width:  75.00%;}
  .col-pcxl-80	{width:  80.00%;}
  .col-pcxl-85	{width:  85.00%;}
  .col-pcxl-90	{width:  90.00%;}
  .col-pcxl-95	{width:  95.00%;}
  .col-pcxl-100 {width: 100.00%;}
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Top navigatiemenu 
/*----------------------------------------------------------------------------------------------------------------------------------------------------------- */

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul.topnav li {
	float: left;
}

ul.topnav li a {
  display: inline-block;
	color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

ul.topnav li a:hover {
	background-color: #33b5e5;
}

ul.topnav li.icon {
	display: none;
}

@media screen and (max-width:768px) {
  ul.topnav li:not(:first-child) {display: none;} 
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:768px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}