/**================================================================
 * User overrides Virtumart VmBasic t.b.v. 365DagenDuurzaam.
 * Basisbestand: vmbasic.css
 * ================================================================*/
 
 body {
	color: #3F0100; 							/* heel donkerrood  */
	background-color: #FBFCD3; 			/* lichtgeel */
	}
.com-content-article {
	background-color: #ffffff;
	padding: 1rem 1rem 1rem 1rem; 		/* top right bottom left */
	}
p {
	color: #3F0100; 							/* heel donkerrood  */
	}
a	{
	color: #B41917;    						/* Rode kleur uit logo */
	text-decoration: underline;
	}
a:active	{
	font-weight: 600;
	}
/*a:visited
	{
	font-size: 1.8vmin;
	font-weight: 400;
	color: #91706F;
	} */
a:hover {
	text-transform: none;
	text-decoration: blink;
	}
h1, h2, h3, h4, h5, h6 {
  color: #BC4024; 							/* bruin-rood  */
	}
.header {
	background-color: #B41917;				/* diep rood  */
   background-image: none;
}
.company-name {								/* Bedrijfsnaam in de header */
	font-weight: 400;
	padding-left: 2%;
	padding-right: 2%;
	text-align: center;
	color: #ffffff;
}
.sitename {										/* php-variabele $sitename in de header   */
	font-weight: 400;
	padding-left: 2%;
	padding-right: 2%;
	text-align: center;
	color: #ffffff;
}
.main-menu {
	background-color: #3F0100; 			/* heel donkerrood  */
   color: #ffffff;
}
.main-menu a, 
.main-menu span {
	background-color: #3F0100; 			/* heel donkerrood  */
}
.main-menu .active > a {
	background-color: #7B1C12;				/* donker bruin-rood  */
}
.page {
margin-top: 0 px;
}
li.nav-item.item-101.default.current.active { /* Niet tonen menu-tem 'Home' op homepage */
	display: none;
}
/*===============================================================================================*/
/*   Instellingen voor de categorie-blogs                                                        */ 
/*===============================================================================================*/

.container-component main {
margin-top: 0;
	}
.mod-breadcrumbs {
	background-color: #00000008;
}
.blog-item { 									/* Artikelen in blog-weergave */
	background-color: #ffffff;
	margin: 0.2rem 0rem 0.2rem 1.1rem; 	/* top right bottom left */
	padding: 0.6rem 0.4rem 0.6rem 0.4rem; /* top right bottom left */
	box-shadow: 0rem 0rem 0.4rem #BC4024;
}
.blog-item .item-content {
  padding: 14px;
}
.blog-item h1 {
	font-size:calc(1.1rem + 1.5vw);
	margin-bottom: 0.4rem;
	text-align: center;
}
.blog-item h4 {
	font-size:calc(0.6rem + .6vw);
	margin-bottom: 0.3rem;
	text-align: center;
}
.blog-item p {
	font-size:calc(0.8rem + .3vw);
}
.blog-item img.blog-right {
	float: right;
	padding: 2rem 3rem 0rem 0.4rem;  /* top right bottom left */
	width: 25%;
	}
.blog-item img.blog-col3 {
	float: none;
	padding: 2rem 1rem 0rem 1.6rem;  /* top right bottom left */
	height: auto;
	width: auto;
}
img.blog-right {
	float: right;
	padding: 2rem 3rem 0rem 0.4rem;  /* top right bottom left */
	width: 30%;
	}
.blog-item {
    flex: none;
    width: 94%;
}
/*===============================================================================================*/
/* Einde instellingen voor categorie-blogs                                                       */
/*===============================================================================================*/

footer {
	color: #ffffff;
	background-color: #022357;
}
footer a {
	color: #ffffff;
}
table.left-table {							/* Linker tabel in module 'voettekst'  */
	border: 1px solid #022357;
	width: 100%;
	}
table.left-table td {
	padding: 0.2rem 0.8rem 0.1rem 0.6rem; /* top right bottom left */
	text-align:left;
	}
.left-table td.naw-titel {
	width: 35%;
}
.left-table td.naw-data {
	width: 65%;
}
table.right-table {							/* Rechter tabel in module 'voettekst'  */
	width: 100%;
	border: 1px solid #022357;
	}
table.right-table td {
	padding: 0.2rem 0.8rem 1.2rem 0.4rem; /* top right bottom left */
	}
.dropdown-toggle {
  color: #fff;
}
.vmCartModule .btn-link {
  color: #fff;
}
.input-group  {
	width: 80%;
}
.offcanvas  {
  flex-grow: 0;
  padding: 1rem;
  display: flex;
  overflow-y: visible;
}

/*===============================================================================================*/
/*   Extra kleine schermen (telefoons tot 768px)                                                 */ 
/*===============================================================================================*/
@media (min-width: 320px) and (max-width: 767.98px) {

a.logo img {
	max-width: 80%;
}
.company-name {										/* Bedrijfsnaam in de header */
	font-size: 2rem;
	line-height: 2.2rem;
}
.sitename {
	font-size: 0.6rem;								/* php-variabele $sitename in de header   */
}
.blog-item {
    flex: none;
    width: 94%;
}
.blog-item img.blog-right {
	float: right;
	padding: 2rem 3rem 0rem 0.4rem;  /* top right bottom left */
	width: 25%;
	}
.blog-item img.blog-col3 {
	float: none;
	padding: 2rem 2rem 0rem 0.6rem;  /* top right bottom left */
	width: 90%;
	}
img.blog-right {
	float: right;
	padding: 2rem 3rem 0rem 0.4rem;  /* top right bottom left */
	width: 30%;
	}
.blog-item img.blog-col3 {
	max-width: 70%;
	padding: 2rem 0.2rem 1rem 1rem;  /* top right bottom left */
}
img.floatleft {
	float: left;
	height: auto;
	width: auto;
	max-width: 40%;
	padding: 0.6em 0.2em 0.4em 1em; /* top right bottom left */
}
img.floatcenter {
	display: block; 
	argin-left: auto; 
	margin-right: auto;
	max-width: 80%;
	padding: 0.6em 1em 0.4em 1em; /* top right bottom left */
}
img.floatright {
	float: right;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 1em 0.4em 0.2em; /* top right bottom left */
}
f
}
/*===============================================================================================*/
/*   Kleine schermen (tablets tot 992px )                                                        */ 
/*===============================================================================================*/
@media (min-width: 768px) and (max-width: 991.98px) { 

a.logo img {
	max-width: 80%;
}
.company-name {										/* Bedrijfsnaam in de header */
	font-size: 2.6rem;
	line-height: 2.8rem;
}
.sitename {
	font-size: 1.2rem;								/* php-variabele $sitename in de header   */
}
.blog-item {
    flex: none;
    width: 96%;
}
.blog-item img.blog-col3 {
	max-width: 60%;
	padding: 2rem 0.2rem 1rem 1rem;  /* top right bottom left */
}
img.floatleft {
	float: left;
	height: auto;
	width: auto;
	max-width: 40%;
	padding: 0.6em 0.2em 0.4em 1em; /* top right bottom left */
}
img.floatcenter {
	display: block; 
	argin-left: auto; 
	margin-right: auto;
	max-width: 80%;
	padding: 0.6em 1em 0.4em 1em; /* top right bottom left */
}
img.floatright {
	float: right;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 1em 0.4em 0.2em; /* top right bottom left */
}

}
/*===============================================================================================*/
/*   Kleine schermen tussenmaat (992px tot 1024px)                                               */ 
/*===============================================================================================*/
@media (min-width: 992px) and (max-width: 1023.98px) { 

a.logo img {
	max-width: 80%;
}
.company-name {										/* Bedrijfsnaam in de header */
	font-size: 3.4rem;
	line-height: 3.8rem;
}
.sitename {
	font-size: 1.8rem;								/* php-variabele $sitename in de header   */
}
.blog-item.col-md-6 {
    flex: none;
    width: 96%;
}
.blog-item img.blog-col3 {
	max-width: 50%;
	padding: 2rem 0.2rem 1rem 1rem;  /* top right bottom left */
}
img.floatleft {
	float: left;
	height: auto;
	width: auto;
	max-width: 40%;
	padding: 0.6em 0.2em 0.4em 1em; /* top right bottom left */
}
img.floatcenter {
	display: block; 
	argin-left: auto; 
	margin-right: auto;
	max-width: 80%;
	padding: 0.6em 1em 0.4em 1em; /* top right bottom left */
}
img.floatright {
	float: right;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 1em 0.4em 0.2em; /* top right bottom left */
}

}
/*===============================================================================================*/
/*   Medium schermen (desktops tot 1200px )                                                      */ 
/*===============================================================================================*/
@media (min-width: 1024px) and (max-width: 1199.98px) { 

a.logo img {
	max-width: 80%;
}
.company-name {										/* Bedrijfsnaam in de header */
	font-size: 4rem;
	line-height: 4.4rem;
}
.sitename {
	font-size: 2rem;								/* php-variabele $sitename in de header   */
}
.blog-item.col-lg-4 {
    flex: none; 
    width: 31.6%;
  }
.blog-item img.blog-col3 {
	max-width: 80%;
	padding: 2rem 0.2rem 1rem 1rem;  /* top right bottom left */
	max-height: 19vw;
}
img.floatleft {
	float: left;
	height: auto;
	width: auto;
	max-width: 40%;
	padding: 0.6em 0.2em 0.4em 1em; /* top right bottom left */
}
img.floatcenter {
	display: block; 
	argin-left: auto; 
	margin-right: auto;
	max-width: 80%;
	padding: 0.6em 1em 0.4em 1em; /* top right bottom left */
}
img.floatright {
	float: right;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 1em 0.4em 0.2em; /* top right bottom left */
}

}
/*===============================================================================================*/
/*   Grote schermen (grote desktops, 1200px en groter )                                          */ 
/*===============================================================================================*/
@media (width >= 1200px) {
p, 
li {
	font-size:calc(0.8rem + .3vw);
}

a.logo img {
	max-width: 80%;
}
.company-name {										/* Bedrijfsnaam in de header */
	font-size: 4.0rem;
	line-height: 4.4rem;
}
.sitename {
	font-size: 2.0rem;								/* php-variabele $sitename in de header   */
}
.blog-item.col-lg-4 {
    flex: none; 
    width: 31.6%;
  }
.blog-item img.blog-col3 {
	max-width: 96%;
	padding: 2rem 0.2rem 1rem 1rem;  /* top right bottom left */
	max-height: 19vw;
}
img.floatleft {
	float: left;
	margin:0;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.6em 0.4em 0.4em 1em; /* top right bottom left */
}
img.floatcenter {
	display: block; 
	argin-left: auto; 
	margin-right: auto;
	max-width: 80%;
	padding: 0.6em 1em 0.4em 1em; /* top right bottom left */
}
img.floatright {
	float: right;
	margin:0;
	height: auto;
	width: auto;
	max-width: 48%;
	padding: 0.2em 0.4em 0.2em 0.4em; /* top right bottom left */
}

}