/* Media queries */

/* Adjustments for desktops */
@media (width > 992px) and (width < 1500) {
    div.circle{
      left: 81%;
      background-color:#00558E;
    }
    ul.custom-list{
        overflow: scroll;
    }
    #debruin-logo{
        transform: scale(1.2, 0.9);
    }
    #debruin-logo2{
      transform: scale(1.2, 0.9);
  }
  }

  /* Adjustments for tablet and small desktops*/
  @media (width > 576px) and (width < 992px) {
    div.circle{
      left: 93%;
      top: 111%;
      width: 160px;
      height: 160px;
      background-color: #00558E;
      border-width: 6px;
    }
    span.circle-text{
      font-size: 22px;
    }
    div.header-wood{
      height: 32vh;
    }
    #debruin-logo{
      transform: scale(1.25, 0.8);
    }
    #debruin-logo2{
      transform: scale(1.25, 0.8);
    }
    div.text-block{
      text-align: center;
      padding-left: 5%;
    }
    div.text-block a{
      text-align: left;
      padding-left: 3%;

    }
    div.text-block p{
      text-align: left;
    }
    div.vertical-border{
      border: none;
    }
    ul.custom-list{
      overflow: scroll;
    }
    .magazijn-image{
      height: 262px !important;
      width: 262px !important;
    }
    div.mag-img {
      margin-bottom: 6%;
    }
    #r3-werkzaamheden{
      height: auto
    }
  }

  /* Adjustments for mobile phones*/
@media (width <= 576px) {
    div.circle{
      top: 107%;
      left: 89%;
      width: 160px;
      height: 160px;
      background-color:#00558E;
      border-width: 4px;
    }
    span.circle-text{
      font-size: 24px;
    }
    #debruin-logo{
      transform: scale(1.25, 0.55);
    }
    #debruin-logo2{
      transform: scale(1.25, 0.55);
    }
    div.header-wood{
      height: 30vh;
    }
    div.mag-img{
      margin-bottom: 6%;
    }
    div.text-block{
      text-align: center;
      padding-left: 5%;
    }
    div.text-block a{
      text-align: left;
      padding-left: 2%;
    }
    div.text-block p{
      text-align: left;
    }
    div.vertical-border{
      border: none;
    }
    ul.custom-list{
      overflow: scroll;
    }
    .magazijn-image{
      height: 262px !important;
      width: 262px !important;
    }
    #r3-werkzaamheden{
      height: 40vh !important;
    }
  }


/* Key frames */

@keyframes scaleText {
    0% {
        transform: scale(50);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
        transform: rotate(-10deg);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Make up */

#r3-werkzaamheden{
  height: auto;
}
#r3-houtenachtergrond{
  height: auto;
}

.houten-background{
    background-image: url('../img/hout-debruin.jpg');
    position: relative;
    background-size:cover;
    background-position: center;
    /* animation: fadeInandOut 2s ease-in-out forwards; */
}
.houten-background-block{
  background-image: url('../img/hout-debruin.jpg');
  position: relative;
  background-size:cover;
  background-position: center;
}
.werkzaamheden-background{
    background-image: url('../img/werkzaamheden-debruin2.jpg');
    background-size:cover;
    background-position: center;
}
.centered-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.blue-hr{
    height: 20px;
    background-color: #00558e;
}
.header-wood{
  height: 45vh;
}
/* Circle */
.circle{
  background-color:#00558E;
  border-radius: 100%;
  border: solid #fbda45 8px;
  position: absolute;
  top: 123%;
  left: 95%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  z-index: 10;
  cursor: pointer;
  overflow: hidden;
}

/* Circle text */
.circle-text{
  display: block;
  position: relative;
  top: 30%;
  text-align: left;
  color:#fbda45;
  font-size: 33px;
  font-weight: 800;
  transform: rotate(-10deg);
  cursor: pointer;
  animation: scaleText 1s ease-in-out forwards;
}

.magazijn-image{
    height: 300px;
    width: 300px;
    border-radius: 100%;
    border: solid #00558E 6px;
    max-width: 100%;
    animation: fadeIn 2s ease-in-out forwards;
}

.maatwerk-image{
  height: 300px;
  width: 400px;
  border-radius: 10%;
  border: solid #00558E 8px;
  max-width: 100%;
  animation: fadeIn 2s ease-in-out forwards;  
}
.gevel-image{
  height: 200px;
  width: 300px;
  border-radius: 10%;
  max-width: 100%;
  animation: fadeIn 2s ease-in-out forwards;  
}
.gevel-image-r{
  height: 200px;
  width: 200px;
  border-radius: 10%;
  max-width: 100%;
  animation: fadeIn 2s ease-in-out forwards;  
}
.custom-list-item{
    color: #00558E;;
    font-weight: 1000;
    font-size: 20px;
    padding-left: 5%;
    padding-bottom: 30px;
}

.custom-ul-wrapper{
    padding:3%; 
    height: 100%;
}

.custom-ul{
    background-color: rgba(251, 218, 69, .4);
    height: 100%; 
    max-height: 50vh; 
    border-radius: 10%;
}

.vertical-border {
    border-right: 5px dashed #ffffff; /* Add a white vertical border between columns */
    padding: 15px; /* Add padding to space out the content */

}
.text-block{
    background-color: #00558E !important;
    color: #fbda45 !important;
    font-weight: 800;
    font-style: italic;
}
a.text-block{
    background-color: #00558E !important;
    color: #fbda45 !important;
    font-weight: 800;
}
.btn-debruin {
  color: #fbda45;
  background-color: #00558E;
}
.extralarge {
  font-size: 50px;
}