@import url("https://fonts.googleapis.com/css?family=Arvo:700|Open+Sans");

footer {
  background: #272727;
  color: white;
}

.card-body{
  padding-bottom: 0;
}

.card-footer{
  padding-top: 0;
}

.waaromons_voorstellen h5{
  font-size: 1.5rem;
}
.waaromons_voorstellen p{
  font-size: 1.3rem;
}

.lni{
  color: #600194;
}

.card {
  border: 0;
}
.card-footer {
  border:0;
  background: none;
}

.card-title{
  font-size: 1.2em;
  font-weight: bold;
  color: #600194;
}

.main-close {
  background: #630094;
  height: 40px;
}

.prices {
  display:inline-block;
}

.prices li {
  display: inline-block;
}
.prices span {
  display:inline-block;
  margin-left:10px;
}

table {
  width: 100%;
}

.navbar {
  background-color: #630094;
  color: white;
}

.navbar a {
  color: white;
}

.header-row {
  width: 100%;
}

.homevisual {
  width: 100%;
  display: flex;
  padding: 45px;
  justify-content: flex-end;
}

.homevisual .locations {
  width: 300px;
  height:240px;
  padding: 14px;
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.5);
  float: left;
  color: #fff;
  margin-left:-100px;
  font-size: 1.2em;
}

.homevisual .why {
  width: 300px;
  height:240px;
  padding: 14px;
  border: 1px solid #000;
  background: rgba(0, 0, 0, 0.5);
  float: right;
  color: #fff;
  margin-right:-100px;
}

.btn-primary {
  background-color: #630094;
  border-color: #630094;
}

.btn-primary:hover {
  background-color: #77449f;
  border-color: #77449f;
}

primary-color {
  color: #630094;
}

secondary-color {
  color: #77449f;
}

.remove-all-margin-padding {
  margin: 0 !important;
  padding: 0 !important;
}

strong {
  color:#600194;
}

h3 {
  font-size: 1.286em;
  font-weight: 400;
  margin: 15px 0 15px 0;
}

h4 {
  color: #600194;
  font-size: 1.1em;
  font-weight: bold;
  margin: 15px 0 15px 0;
}

header {
  height: 140px;
}

.navbar * a {
  color: #ffffff;
}

.navbar * a:hover {
  color: #ffffff;
  background-color: #77449f;
}

.fit-image {
  width: 100%;
  object-fit: cover;
}

.logo-background-image {
  width: 100%;
  height: 140px;
  background-image: url('../img/logo_small.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

.main-background-image {
  width: 100%;
  background-image: url('../img/main_background_image.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

.primary-background * a:link {
  color: white;
}

.primary-background {
  background-color: #630094 !important;
}

/*Show more*/

input[type="checkbox"] {
  display: none;
}

.spacer{
  height: 60px;
}

.remove-padding {
  padding: 0px;
  align-items: center;
}

.centered-image {
  /* position: absolute; */
  /* padding-top:80px;
  padding-left: 80px; */
  transform: translate(10%, 0%);
  max-width: 100%; /* Ensure the image doesn't exceed the container width */
  max-height: 100%; /* Ensure the image doesn't exceed the container height */
}

.showmore {
  display: none;
}

label {
  display: inline-block;
  cursor: pointer;
  color: #fff;
  padding: 3px 13px;
  border-radius: 3px;
  margin-top: 12px;
  background-color: #7a44a5;
}

#read-more-state-1:checked~.showmore {
  display: block;
}

#read-more-state-1:checked~label {
  display: none;
}

#read-more-state-2:checked~.showmore {
  display: block;
}

#read-more-state-2:checked~label {
  display: none;
}

#read-more-state-3:checked~.showmore {
  display: block;
}

#read-more-state-3:checked~label {
  display: none;
}

#read-more-state-4:checked~.showmore {
  display: block;
}

#read-more-state-4:checked~label {
  display: none;
}

#read-more-state-5:checked~.showmore {
  display: block;
}

#read-more-state-5:checked~label {
  display: none;
}

#read-more-state-6:checked~.showmore {
  display: block;
}

#read-more-state-6:checked~label {
  display: none;
}

#read-more-state-7:checked~.showmore {
  display: block;
}

#read-more-state-7:checked~label {
  display: none;
}

#read-more-state-8:checked~.showmore {
  display: block;
}

#read-more-state-8:checked~label {
  display: none;
}

#read-more-state-9:checked~.showmore {
  display: block;
}

#read-more-state-9:checked~label {
  display: none;
}

/*
show more end
*/

#features .box-item {
  box-shadow: 0 0 12px #F4F4F4;
  border: 1px solid #600194;
  padding: 15px;
  line-height: 22px;
  margin-top: 30px;
  border-radius: 3px;
  background-color: #fff;
  /* background-color: #600095; */
  -webkit-transition: all .3s ease-in-out;
  -mox-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  position: relative;
  top: 0;
}

#features .box-item .icon {
  text-align: center;
  margin: 4px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#features .box-item .icon i {
  color: #600194;
  /* color: #fff; */
  font-size: 30px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#features .box-item .text h4 {
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

#features .box-item .text p {
  color: #000;
  font-size: 14px;
  line-height: 26px;
}

#features .box-item {
  box-shadow: 0 8px 18px 8px rgba(0, 0, 0, 0.2);
}

#features .box-item:hover h4 {
  color: #600194;
}

#features .show-box {
  margin-top: 50px;
}

#features .show-box img {
  width: 100%;
}

@media screen and (max-width: 768px) {
    .header-row {
      display: flex;
      flex-direction: column;
    }
    .homevisual .locations {
        /* Adjust width for smaller screens */
        /* max-width: 300px; */
        /* width: auto; */
        width:300px;
        height: auto;
        margin-left: 0;
    }

    .homevisual .why {
        /* max-width: 300px; */
        /* width: auto; */
        width:300px;
        height: auto;
        /* Adjust width for smaller screens */
        margin-top: 10px;
    }

    .logo-background-image {
      background-size: 100% auto;
    }

    .container {
      display: flex;
      flex-direction: column;
    }

    .row {
      margin: 0;
      justify-content: center;
    }
}