@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

.boschSmartHome {
  font-family: "Poppins", sans-serif;
}

.boschSmartHome .row {
  margin: 0;
}

.boschSmartHome .col-12 {
  padding: 0;

  position: relative;
}

.boschSmartHome img {
  width: 100%;
  border-radius: 25px;
}

.boschSmartHome .intro {
  padding-bottom: 50px;
}

.boschSmartHome h1 {
  font-size: 3rem;
  padding-top: 50px;
}

.boschSmartHome .meerinfo {
  padding: 50px 15%;
}

.boschSmartHome .meerinfo p {
  margin-bottom: 20px;
}

.boschSmartHome .rounded-circle {
  width: 150px;

  height: 150px;

  margin: 0 auto;

  position: relative;
}

/*Center h2 horizontally and vertically in .col-sm-3 .rounded-circle*/

.boschSmartHome .rounded-circle h2 {
  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: white;
}

.boschSmartHome .opties {
  padding: 0 15%;
}

.boschSmartHome .opties:hover {
  cursor: pointer;
}

.boschSmartHome .hide {
  display: none;
}

.boschSmartHome .opties .col-sm-3:nth-of-type(1) .rounded-circle,
.boschSmartHome .opties .col-6:nth-of-type(1) .rounded-circle {
  background-color: #d00727;
}

.boschSmartHome .opties .col-sm-3:nth-of-type(2) .rounded-circle,
.boschSmartHome .opties .col-6:nth-of-type(2) .rounded-circle {
  background-color: #363881;
}

.boschSmartHome .opties .col-sm-3:nth-of-type(3) .rounded-circle,
.boschSmartHome .opties .col-6:nth-of-type(3) .rounded-circle {
  background-color: #64a9cf;
}

.boschSmartHome .opties .col-sm-3:nth-of-type(4) .rounded-circle,
.boschSmartHome .opties .col-6:nth-of-type(4) .rounded-circle {
  background-color: #21a76c;
}

.boschSmartHome .balk {
  height: 75px;

  margin: 50px 0;

  color: white;

  border-radius: 25px;
}

.boschSmartHome .btn {
  margin-top: 10px;
}

.boschSmartHome .comfort .balk,
.boschSmartHome .comfort .prijs,
.boschSmartHome .comfort .btn {
  background-color: #d00727;

  color: white;
}

.boschSmartHome .beveiliging .balk,
.boschSmartHome .beveiliging .prijs,
.boschSmartHome .beveiliging .btn {
  background-color: #363881;

  color: white;
}

.boschSmartHome .verwarmen .balk,
.boschSmartHome .verwarmen .prijs,
.boschSmartHome .verwarmen .btn {
  background-color: #64a9cf;

  color: white;
}

.boschSmartHome .partners .balk {
  background-color: #21a76c;
}

/*vertically center the h2 in .balk*/

.boschSmartHome .balk h2 {
  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);
}

.boschSmartHome h3 {
  font-size: 1rem;
}

.boschSmartHome .optie h3 {
  font-size: 0.8rem;
  min-height: 47px;
  
}

/*IMG MAP CSS*/

section .imgmap {
  display: flex;

  align-items: center;

  justify-content: center;
}

.imgmap img {
  width: 100%;
}

/*.popup in topright corner of #imgmapafbeelding width 100px height 100px*/

.popup {
  position: absolute;

  top: 100px;

  right: 50px;

  width: 250px;

  min-height: 300px;

  background-color: rgba(255, 255, 255, 1);

  color: black;

  font-weight: 300;

  font-size: 14px;

  opacity: 0;

  transform: scale(0);

  transition: opacity 300ms, transform 300ms;

  border-radius: 25px;

  padding: 15px;

  z-index: 20;
}

.popup > .close {
  position: absolute;

  right: -10px;

  top: -10px;

  background-color: red;

  border-radius: 50px;

  padding: 4px 10px;

  color: white;

  cursor: pointer;
}

.boschSmartHome .prijs {
  font-size: 20px;

  font-weight: 600;

  color: white;
}

.popup .prijs {
  background-color: red;
}

/*no decoration or new color for .popup a*/

.popup a,
.products a {
  text-decoration: none;

  color: black;
}

area:hover {
  cursor: pointer;
}

/*.pulse div overlay on first area with background red and pulsating effect*/

.pulse {
  position: absolute;

  width: 35px;

  height: 35px;

  background-color: red;

  opacity: 0;

  animation: pulse 2s infinite;

  border-radius: 50%;

  pointer-events: none;
}

.verwarmingpuls {
  top: 21%;

  left: 41%;
}

.controllerpuls {
  top: 22%;

  left: 47%;
}

.stopcontactpuls {
  top: 26.1%;

  left: 66.3%;
}

.schakelaarpuls {
  top: 43.5%;

  left: 47.5%;
}

.rookmelderpuls {
  top: 51%;

  left: 44.5%;
}

.beveiligingscamerapuls {
  top: 53%;

  left: 25.5%;
}

.buitensirenepuls {
  top: 28%;

  left: 74%;
}

.afstandsbedieningpuls {
  top: 60%;

  left: 71.5%;
}

.bewegingsmelderpuls {
  top: 51%;

  left: 73%;
}

.watermelderpuls {
  top: 94%;

  left: 48%;
}

.binnencamerapuls {
  top: 63%;

  left: 71%;
}

.raamdeurpuls {
  top: 55%;

  left: 56%;
}

.kamerthermostaatpuls {
  top: 38%;

  left: 39.5%;
}

.rolluikbesturingpuls {
  top: 60%;

  left: 50%;
}

/*animation called pulse*/

@keyframes pulse {
  0% {
    transform: scale(0);

    opacity: 0.8;
  }

  100% {
    transform: scale(1);

    opacity: 0.1;
  }
}

.popup img {
  width: 150px;
}

/*Section products*/

.optie .prodcontainer {
  box-shadow: 0px 0px 28px -4px rgba(0, 0, 0, 0.15);

  border-radius: 25px;

  margin: 5px 0;

  padding: 10px;

  min-height: 250px;

  position: relative;
}

.boschSmartHome .products {
  margin-top: 15px;
}

.optie .prodimg {
  width: 80%;
  padding: 0 10%;
}

.boschSmartHome .prodcontainer h3 {
  word-wrap: break-word;
  text-wrap: balance;
  min-height: 65px;
}

.boschSmartHome .partner img {
  width: 100%;
  padding: 0 5%;
}

@media (max-width: 1000px) {
  .boschSmartHome .opties {
    padding: 0 5%;
  }
}

@media (max-width: 992px) {
  .pulse {
    display: none;
  }

  .popup {
    display: none;
  }

  .imgmap map {
    display: none;
  }
}

@media (max-width: 767px) {
  .boschSmartHome .opties {
    padding: 0px 10%;
  }

  .boschSmartHome .rounded-circle {
    width: 125px;

    height: 125px;

    margin: 0 auto;
  }

  .opties .col-6 {
    padding: 20px 0;
  }

  .popup img {
    width: 100px;
  }

  .popup {
    font-size: 12px;
    min-height: 240px;
  }
}

@media (max-width: 650px) {
  .btn {
    margin: 5px 0;
  }

  .boschSmartHome .meerinfo {
    padding: 25px 5%;
  }

  .opties .col-6 {
    padding: 10px 0;
  }

  .p-5 {
    padding: 1rem !important;
  }

  .boschSmartHome .balk {
    margin: 25px 0;
  }

  .boschSmartHome .products .col {
    margin-top: 5px;
  }

  .products .col {
    padding-right: 5px;

    padding-left: 5px;
  }

  .boschSmartHome h4 {
    font-size: 0.7rem;

    margin-top: 5px;
  }
}

@media (max-width: 500px) {
  .boschSmartHome h1{
    font-size: 2rem;
    padding-top: 15px;
  }

  .boschSmartHome .intro {
    padding-bottom: 0px;
  }
}

.boschSmartHome .listing-mosaic.grid-container {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

  grid-area: listing-product-container;

  grid-gap: 0.9375rem;
}

.boschSmartHome .verwarmen .listing-mosaic.grid-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

@media (max-width: 1200px) {
  .boschSmartHome .listing-mosaic.grid-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .boschSmartHome .verwarmen .listing-mosaic.grid-container {  
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .boschSmartHome .listing-mosaic.grid-container {
    grid-template-columns: 1fr 1fr;
  }
  .boschSmartHome .verwarmen .listing-mosaic.grid-container {
  
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 500px) {
  .boschSmartHome .listing-mosaic.grid-container {
    grid-template-columns: 1fr;
  }
  .boschSmartHome .verwarmen .listing-mosaic.grid-container {
  
    grid-template-columns: 1fr;
  }
}