@charset "UTF-8";

/* @import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700); */

body {
      font-family: 'Open Sans', sans-serif;
	/* background-color: #E9DCC6; */
	
	
}

.container {
/*	background-color: #ffffff; */
	
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: #A4BB54 ;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .5rem;
    margin-top: 0;
}
.h1, h1 {
    font-size: calc(3rem + 1.125vw);
}
@media (min-width:1200px) {
    .h1, h1 {
    font-size: 2.1875rem;
}
}.h2, h2 {
    font-size: calc(1.3rem + .6vw);
}
@media (min-width:1200px) {
    .h2, h2 {
    font-size: 1.75rem;
}
}.h3, h3 {
    font-size: calc(1.27813rem + .3375vw);
}
@media (min-width:1200px) {
    .h3, h3 {
    font-size: 1.53125rem;
}
}.h4, h4 {
    font-size: calc(1.25625rem + .075vw);
}
@media (min-width:1200px) {
    .h4, h4 {
    font-size: 1.3125rem;
}
}.h5, h5 {
    font-size: 1.09375rem;
}
.h6, h6 {
    font-size: .875rem;
}
p {
    font-size: 1.3331rem;
	margin-bottom: 1rem;
    margin-top: 0;
}

/* BIG MIN 1024 */
@media (min-width: 1024px) {

.brand-logo {
	margin-left:60px;	
	position: relative;
	width: 140px;
}

.brand-logo img {
width: 164px;
}
.container {
	width: 1280px;
}
.navigation-bar {
	right:32px;	
	top: 0px;
	position: absolute;
	width: auto;
	background-color: #CA8A38;
	color: #ffffff;
	border-radius: 0px 0px 15px 15px;
	padding: 6px
	
}
.navbar-nav {
  flex-direction: inherit;

}
.navbar .navbar-nav .nav-item .nav-link {
	margin-left:8px;
	margin-right:8px;
	font-weight: 600;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	
}

.nav-link, a:hover {
	color: #ffffff;
}

}
/* END BIG */



main {
	min-height: 440px;
	background-image: url('/assets/images/background.png');
	background-repeat: no-repeat;
	background-size: 100%; 
}

.main-background {
	background-image: url('/assets/images/background.png');
	background-repeat: no-repeat;
	max-width: 1280px;
 /* background-size: cover; */
}

.homepage-text {
	
}

p {
	font-size:16px;
	font-color:#333333;
}





.btn-check:focus+.btn, .btn:focus, .btn:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
	
}

.header-background {
	/* background-image: url('/assets/images/vitamineshop-header.png'); */
	background-repeat: no-repeat;
	background-attachment: inherit;
 	background-size: 100%;
	height: 440px;
}

.bg-topline {
  --bs-bg-opacity: 1;
  background-color: #333333;
  color: #fff;
}

.bg-topline .container {
  background-color: #333333;
}

footer {
	
	  background-color: #333333;
}

footer .nav-link {
	
	color: #333333;
}

footer .footer-url {
	
	font-size: 0.9rem;
	text-decoration: none;
}



.btn-outline-vitamineshop {
    --bs-btn-color: #536D51;
    --bs-btn-border-color: #dedede;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #536D51;
    --bs-btn-hover-border-color: #dedede;
    --bs-btn-focus-shadow-rgb: 0, 30, 43;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #536D51;
    --bs-btn-active-border-color: #dedede;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #536D51;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dedede;
    --bs-gradient: none;
	overflow: visible;
}

.homepageinfo {
    background-color: #fefefe;
    border-color: #dedede;
    h1, h2 { color: #536D51; }
}

.fs-6 {
  font-size: 0.875rem !important;
	min-height: 80px;
}

.fs-6 a {
  color: #000000 !important;
}

small {
  font-size: .875em;
}

.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity)) !important;
}



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

.brand-logo {
	margin-left:70px;	
	position: relative;
	width: 140px;
}
	
.brand-logo img {
	width: 80px;
}

.h1, h1 {
    font-size: 1.2rem;
}

.h2, h2 {
    font-size: 1rem;
}
.h3, h3 {
    font-size: 0.8rem;
}
p {
    font-size: 0.8rem;
	margin-bottom: 1rem;
    margin-top: 0;
}


}
/* END SMALL */


.navbar .navbar-toggler {
  border: 1px solid #A4BB54;
  margin-left: .5rem;
  padding: .5rem;
	background: #fff;
}


.testimonial-wrapper {
	padding: 10px;
	background: #fff;
	min-height: 260px;
	margin-bottom:12px;
	box-shadow: 0 0 2px 0 rgba(51, 51, 51, 0.08), 0 0 2px 0 rgba(51, 51, 51, 0.08);
	border: 1px solid #efefef;
}
.testimonial {
    color: #808080;
    position: relative;
    padding: 15px;
    background: #f1f1f1;
    border: 1px solid #efefef;
    border-radius: 3px;
	margin-bottom: 15px;
	min-height: 90px;
	font-size: 13px;
}
.testimonial::after {
	content: "";
	width: 15px;
	height: 15px;
	display: block;
	background: #f1f1f1;
	border: 1px solid #efefef;
	border-width: 0 0 1px 1px;
	position: absolute;
	bottom: -8px;
	left: 46px;
	transform: rotateZ(-46deg);
}

.media {
  position: relative;
  padding: 0 0 0 20px;
}
.media-left, .media > .pull-left {
  padding-right: 15px;
  float: left;
}
.media img {
	max-width: 110px;
	max-height: 110px;
	display: block;
	/* border-radius: 50%; */
}
.overview {
  padding: 3px 0 0 15px;
	font-size: 13px;
}

.item {
  color: #999;
  overflow: hidden;
  min-height: 120px;
  font-size: 13px;
}

a {
	color: #A4BB54;
}

a:hover, a:active {
  color: #000;
}


/* Categories */
.category {
  text-align: center;
  margin-bottom: 0px;
  border: 0px solid #dedede;
  min-height: 198px;
}

.category img {
	width: 100%;
	background-size: 100%, 100%;
}

.caption h4 {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.caption {
  margin: 0;
  background-color: rgb(202, 138, 56);
  padding: 6px;
}

.caption a {
	color: #ffffff;
}



.navbar .navbar-toggler.collapsed .top-bar {
  background-color: #A4BB54;
  transform: rotate(0);
}

.navbar .navbar-toggler.collapsed .middle-bar {
  background-color: #A4BB54;
  transform: rotate(0);
}

.navbar .navbar-toggler.collapsed .bottom-bar {
  background-color: #A4BB54;
  transform: rotate(0);
}

/*
<h1> Open Sans regular 36pt #FBBC00
<p> Open Sans regular 16pt #333333
<ul><li> Open Sans regular 16pt  #333333
<li> bottom margin: 40px #333333  ik heb de gele bullet als png toegevoegd, of kan dat ook in de css gedaan worden?
Menu: Open Sans bold 18pt #fff
Footer kopje: Open sans bold 16 px  #FBBC00
Footer witte tekst: Open sans regular 16 px  #fff
*/